Lighten Examples

These examples are equivalent to generating a tint scale.

let lighterColor: Color.hex[] = Color.from('hex', '881155')
  .modify('lighten', {
    method: /* methods listed below */,
    amount: /* amounts listed below */
  })

lighten

hsl

hsl: { h: 326, s: 78, l: 30, a: 100 }881155hsl: { h: 326, s: 78, l: 37, a: 100 }0.1hsl: { h: 326, s: 78, l: 44, a: 100 }0.2hsl: { h: 326, s: 78, l: 51, a: 100 }0.3hsl: { h: 326, s: 78, l: 58, a: 100 }0.4hsl: { h: 325, s: 78, l: 65, a: 100 }0.5hsl: { h: 325, s: 78, l: 72, a: 100 }0.6hsl: { h: 326, s: 78, l: 79, a: 100 }0.7hsl: { h: 326, s: 77, l: 86, a: 100 }0.8hsl: { h: 326, s: 78, l: 93, a: 100 }0.9

lighten

hsv

hsv: { h: 326, s: 88, v: 53, a: 100 }881155hsv: { h: 326, s: 79, v: 58, a: 100 }0.1hsv: { h: 326, s: 70, v: 63, a: 100 }0.2hsv: { h: 326, s: 61, v: 67, a: 100 }0.3hsv: { h: 326, s: 53, v: 72, a: 100 }0.4hsv: { h: 326, s: 44, v: 77, a: 100 }0.5hsv: { h: 326, s: 35, v: 81, a: 100 }0.6hsv: { h: 325, s: 26, v: 86, a: 100 }0.7hsv: { h: 326, s: 17, v: 91, a: 100 }0.8hsv: { h: 326, s: 9, v: 95, a: 100 }0.9

lighten

hsi

hsi: { h: 325, s: 79, i: 31, a: 100 }881155hsi: { h: 325, s: 71, i: 38, a: 100 }0.1hsi: { h: 325, s: 63, i: 45, a: 100 }0.2hsi: { h: 325, s: 55, i: 52, a: 100 }0.3hsi: { h: 325, s: 47, i: 59, a: 100 }0.4hsi: { h: 325, s: 40, i: 65, a: 100 }0.5hsi: { h: 326, s: 31, i: 73, a: 100 }0.6hsi: { h: 325, s: 24, i: 79, a: 100 }0.7hsi: { h: 325, s: 16, i: 86, a: 100 }0.8hsi: { h: 325, s: 8, i: 93, a: 100 }0.9

lighten

hsp

hsp: { h: 326, s: 88, p: 32, a: 100, pb: 0.114, pr: 0.299 }881155hsp: { h: 326, s: 79, p: 38, a: 100, pb: 0.114, pr: 0.299 }0.1hsp: { h: 326, s: 70, p: 45, a: 100, pb: 0.114, pr: 0.299 }0.2hsp: { h: 326, s: 61, p: 52, a: 100, pb: 0.114, pr: 0.299 }0.3hsp: { h: 326, s: 53, p: 59, a: 100, pb: 0.114, pr: 0.299 }0.4hsp: { h: 326, s: 44, p: 66, a: 100, pb: 0.114, pr: 0.299 }0.5hsp: { h: 326, s: 35, p: 73, a: 100, pb: 0.114, pr: 0.299 }0.6hsp: { h: 326, s: 26, p: 80, a: 100, pb: 0.114, pr: 0.299 }0.7hsp: { h: 327, s: 17, p: 86, a: 100, pb: 0.114, pr: 0.299 }0.8hsp: { h: 325, s: 9, p: 93, a: 100, pb: 0.114, pr: 0.299 }0.9

lighten

rgb

rgb: { r: 136, g: 17, b: 85, a: 255, bitDepth: 8 }881155rgb: { r: 148, g: 41, b: 102, a: 255, bitDepth: 8 }0.1rgb: { r: 160, g: 65, b: 119, a: 255, bitDepth: 8 }0.2rgb: { r: 172, g: 88, b: 136, a: 255, bitDepth: 8 }0.3rgb: { r: 184, g: 112, b: 153, a: 255, bitDepth: 8 }0.4rgb: { r: 196, g: 136, b: 170, a: 255, bitDepth: 8 }0.5rgb: { r: 207, g: 160, b: 187, a: 255, bitDepth: 8 }0.6rgb: { r: 219, g: 184, b: 204, a: 255, bitDepth: 8 }0.7rgb: { r: 231, g: 207, b: 221, a: 255, bitDepth: 8 }0.8rgb: { r: 243, g: 231, b: 238, a: 255, bitDepth: 8 }0.9

lighten

cmyk

cmyk: { c: 0, m: 88, y: 38, k: 47 }881155cmyk: { c: 0, m: 79, y: 34, k: 42 }0.1cmyk: { c: 0, m: 70, y: 30, k: 37 }0.2cmyk: { c: 0, m: 61, y: 26, k: 33 }0.3cmyk: { c: 0, m: 53, y: 23, k: 28 }0.4cmyk: { c: 0, m: 44, y: 19, k: 23 }0.5cmyk: { c: 0, m: 35, y: 15, k: 19 }0.6cmyk: { c: 0, m: 26, y: 11, k: 14 }0.7cmyk: { c: 0, m: 17, y: 7, k: 9 }0.8cmyk: { c: 0, m: 9, y: 4, k: 5 }0.9

lighten

lab

lab: { l: 30, a: 52, b: -8 }881155lab: { l: 37, a: 47, b: -7 }0.1lab: { l: 44, a: 42, b: -6 }0.2lab: { l: 51, a: 36, b: -5 }0.3lab: { l: 58, a: 31, b: -5 }0.4lab: { l: 65, a: 26, b: -4 }0.5lab: { l: 72, a: 21, b: -3 }0.6lab: { l: 79, a: 16, b: -3 }0.7lab: { l: 86, a: 10, b: -2 }0.8lab: { l: 93, a: 5, b: -1 }0.9

lighten

luv

luv: { l: 30, u: 63, v: -18 }881155luv: { l: 37, u: 57, v: -16 }0.1luv: { l: 44, u: 51, v: -14 }0.2luv: { l: 51, u: 44, v: -13 }0.3luv: { l: 58, u: 38, v: -11 }0.4luv: { l: 65, u: 31, v: -9 }0.5luv: { l: 72, u: 25, v: -7 }0.6luv: { l: 79, u: 19, v: -6 }0.7luv: { l: 86, u: 13, v: -4 }0.8luv: { l: 93, u: 7, v: -2 }0.9

let lighterColor: Color.hex[] = Color.from('hex', '22aaee')
  .modify('lighten', {
    method: /* methods listed below */,
    amount: /* amounts listed below */
  })

lighten

hsl

hsl: { h: 200, s: 86, l: 53, a: 100 }22aaeehsl: { h: 200, s: 86, l: 58, a: 100 }0.1hsl: { h: 200, s: 85, l: 63, a: 100 }0.2hsl: { h: 200, s: 86, l: 67, a: 100 }0.3hsl: { h: 200, s: 86, l: 72, a: 100 }0.4hsl: { h: 200, s: 86, l: 77, a: 100 }0.5hsl: { h: 200, s: 85, l: 81, a: 100 }0.6hsl: { h: 200, s: 86, l: 86, a: 100 }0.7hsl: { h: 200, s: 87, l: 91, a: 100 }0.8hsl: { h: 198, s: 83, l: 95, a: 100 }0.9

lighten

hsv

hsv: { h: 200, s: 86, v: 93, a: 100 }22aaeehsv: { h: 200, s: 77, v: 94, a: 100 }0.1hsv: { h: 200, s: 68, v: 95, a: 100 }0.2hsv: { h: 200, s: 60, v: 95, a: 100 }0.3hsv: { h: 200, s: 51, v: 96, a: 100 }0.4hsv: { h: 200, s: 43, v: 96, a: 100 }0.5hsv: { h: 200, s: 34, v: 97, a: 100 }0.6hsv: { h: 201, s: 26, v: 98, a: 100 }0.7hsv: { h: 200, s: 17, v: 99, a: 100 }0.8hsv: { h: 200, s: 8, v: 99, a: 100 }0.9

lighten

hsi

hsi: { h: 199, s: 77, i: 58, a: 100 }22aaeehsi: { h: 199, s: 69, i: 62, a: 100 }0.1hsi: { h: 199, s: 62, i: 66, a: 100 }0.2hsi: { h: 199, s: 54, i: 70, a: 100 }0.3hsi: { h: 198, s: 45, i: 74, a: 100 }0.4hsi: { h: 196, s: 38, i: 78, a: 100 }0.5hsi: { h: 196, s: 30, i: 82, a: 100 }0.6hsi: { h: 195, s: 22, i: 86, a: 100 }0.7hsi: { h: 194, s: 14, i: 91, a: 100 }0.8hsi: { h: 193, s: 7, i: 95, a: 100 }0.9

lighten

hsp

hsp: { h: 200, s: 86, p: 60, a: 100, pb: 0.114, pr: 0.299 }22aaeehsp: { h: 200, s: 77, p: 64, a: 100, pb: 0.114, pr: 0.299 }0.1hsp: { h: 200, s: 69, p: 68, a: 100, pb: 0.114, pr: 0.299 }0.2hsp: { h: 200, s: 60, p: 72, a: 100, pb: 0.114, pr: 0.299 }0.3hsp: { h: 200, s: 52, p: 76, a: 100, pb: 0.114, pr: 0.299 }0.4hsp: { h: 200, s: 43, p: 80, a: 100, pb: 0.114, pr: 0.299 }0.5hsp: { h: 199, s: 34, p: 84, a: 100, pb: 0.114, pr: 0.299 }0.6hsp: { h: 199, s: 25, p: 88, a: 100, pb: 0.114, pr: 0.299 }0.7hsp: { h: 200, s: 17, p: 92, a: 100, pb: 0.114, pr: 0.299 }0.8hsp: { h: 200, s: 8, p: 96, a: 100, pb: 0.114, pr: 0.299 }0.9

lighten

rgb

rgb: { r: 34, g: 170, b: 238, a: 255, bitDepth: 8 }22aaeergb: { r: 56, g: 179, b: 240, a: 255, bitDepth: 8 }0.1rgb: { r: 78, g: 187, b: 241, a: 255, bitDepth: 8 }0.2rgb: { r: 100, g: 196, b: 243, a: 255, bitDepth: 8 }0.3rgb: { r: 122, g: 204, b: 245, a: 255, bitDepth: 8 }0.4rgb: { r: 145, g: 213, b: 247, a: 255, bitDepth: 8 }0.5rgb: { r: 167, g: 221, b: 248, a: 255, bitDepth: 8 }0.6rgb: { r: 189, g: 230, b: 250, a: 255, bitDepth: 8 }0.7rgb: { r: 211, g: 238, b: 252, a: 255, bitDepth: 8 }0.8rgb: { r: 233, g: 247, b: 253, a: 255, bitDepth: 8 }0.9

lighten

cmyk

cmyk: { c: 86, m: 29, y: 0, k: 7 }22aaeecmyk: { c: 77, m: 26, y: 0, k: 6 }0.1cmyk: { c: 68, m: 23, y: 0, k: 5 }0.2cmyk: { c: 60, m: 20, y: 0, k: 5 }0.3cmyk: { c: 51, m: 17, y: 0, k: 4 }0.4cmyk: { c: 43, m: 15, y: 0, k: 3 }0.5cmyk: { c: 34, m: 11, y: 0, k: 3 }0.6cmyk: { c: 26, m: 9, y: 0, k: 2 }0.7cmyk: { c: 17, m: 6, y: 0, k: 1 }0.8cmyk: { c: 8, m: 3, y: 0, k: 1 }0.9

lighten

lab

lab: { l: 66, a: -11, b: -44 }22aaeelab: { l: 69, a: -10, b: -39 }0.1lab: { l: 73, a: -9, b: -35 }0.2lab: { l: 76, a: -8, b: -31 }0.3lab: { l: 80, a: -7, b: -26 }0.4lab: { l: 83, a: -6, b: -22 }0.5lab: { l: 86, a: -4, b: -18 }0.6lab: { l: 90, a: -4, b: -13 }0.7lab: { l: 93, a: -2, b: -9 }0.8lab: { l: 97, a: -1, b: -5 }0.9

lighten

luv

luv: { l: 66, u: -42, v: -69 }22aaeeluv: { l: 69, u: -38, v: -62 }0.1luv: { l: 73, u: -33, v: -55 }0.2luv: { l: 76, u: -29, v: -49 }0.3luv: { l: 80, u: -25, v: -41 }0.4luv: { l: 83, u: -21, v: -34 }0.5luv: { l: 86, u: -17, v: -27 }0.6luv: { l: 90, u: -12, v: -21 }0.7luv: { l: 93, u: -8, v: -14 }0.8luv: { l: 97, u: -4, v: -7 }0.9