1 | import { rgb2hue, rgb2value, rgb2whiteness, hue2rgb } from './util';
|
---|
2 |
|
---|
3 | /* Convert between RGB and HSL
|
---|
4 | /* ========================================================================== */
|
---|
5 |
|
---|
6 | export function rgb2hsl(rgbR, rgbG, rgbB, fallbackhue) {
|
---|
7 | const hslH = rgb2hue(rgbR, rgbG, rgbB, fallbackhue);
|
---|
8 | const hslV = rgb2value(rgbR, rgbG, rgbB);
|
---|
9 | const hslW = rgb2whiteness(rgbR, rgbG, rgbB);
|
---|
10 |
|
---|
11 | // calculate value/whiteness delta
|
---|
12 | const hslD = hslV - hslW;
|
---|
13 |
|
---|
14 | // calculate lightness
|
---|
15 | const hslL = (hslV + hslW) / 2;
|
---|
16 |
|
---|
17 | // calculate saturation
|
---|
18 | const hslS = hslD === 0 ? 0 : hslD / (100 - Math.abs(2 * hslL - 100)) * 100;
|
---|
19 |
|
---|
20 | return [ hslH, hslS, hslL ];
|
---|
21 | }
|
---|
22 |
|
---|
23 | export function hsl2rgb(hslH, hslS, hslL) {
|
---|
24 | // calcuate t2
|
---|
25 | const t2 = hslL <= 50 ? hslL * (hslS + 100) / 100 : hslL + hslS - hslL * hslS / 100;
|
---|
26 |
|
---|
27 | // calcuate t1
|
---|
28 | const t1 = hslL * 2 - t2;
|
---|
29 |
|
---|
30 | // calculate rgb
|
---|
31 | const [ rgbR, rgbG, rgbB ] = [
|
---|
32 | hue2rgb(t1, t2, hslH + 120),
|
---|
33 | hue2rgb(t1, t2, hslH),
|
---|
34 | hue2rgb(t1, t2, hslH - 120)
|
---|
35 | ];
|
---|
36 |
|
---|
37 | return [ rgbR, rgbG, rgbB ];
|
---|
38 | }
|
---|
39 |
|
---|
40 | /*
|
---|
41 |
|
---|
42 | References
|
---|
43 | ----------
|
---|
44 |
|
---|
45 | - https://www.w3.org/TR/css-color-3/#hsl-color
|
---|
46 | - https://www.w3.org/TR/css-color-4/#hsl-to-rgb
|
---|
47 | - https://www.rapidtables.com/convert/color/rgb-to-hsl.html
|
---|
48 | - https://www.rapidtables.com/convert/color/hsl-to-rgb.html
|
---|
49 |
|
---|
50 | /* ========================================================================== */
|
---|