├── .gitignore
├── .npmignore
├── CHANGELOG.md
├── src
    ├── lab
    │   ├── consts.ts
    │   ├── to-hsl.ts
    │   ├── to-hsv.ts
    │   ├── to-lch.ts
    │   └── to-rgb.ts
    ├── hsl
    │   ├── to-lab.ts
    │   ├── to-lch.ts
    │   ├── patch.ts
    │   ├── to-hsv.ts
    │   └── to-rgb.ts
    ├── hsv
    │   ├── to-lab.ts
    │   ├── to-lch.ts
    │   ├── patch.ts
    │   ├── to-hsl.ts
    │   └── to-rgb.ts
    ├── rgb
    │   ├── to-lch.ts
    │   ├── assert.ts
    │   ├── to-hex.ts
    │   ├── from-hex.ts
    │   ├── to-hsv.ts
    │   ├── to-hsl.ts
    │   └── to-lab.ts
    ├── lch
    │   ├── to-hsl.ts
    │   ├── to-hsv.ts
    │   ├── to-rgb.ts
    │   └── to-lab.ts
    ├── common.ts
    ├── assert.ts
    └── index.ts
├── jest.config.js
├── .editorconfig
├── .eslintrc.js
├── tsconfig.json
├── rollup.config.js
├── .github
    └── workflows
    │   └── node.js.yml
├── LICENSE
├── package.json
├── test
    ├── hsl.spec.ts
    ├── common.ts
    ├── lab.spec.ts
    ├── data.ts
    ├── lch.spec.ts
    ├── hsv.spec.ts
    └── rgb.spec.ts
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .*
2 | *.config.js
3 | tsconfig.json
4 | test
5 | src
6 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | > ⚠️ - Breaking changes
 4 | 
 5 | ## 0.1.1
 6 | 
 7 | * Fix config for type declarations.
 8 | 
 9 | ## 0.1.0
10 | 
11 | * First release.
12 | 


--------------------------------------------------------------------------------
/src/lab/consts.ts:
--------------------------------------------------------------------------------
1 | export const κ = 24389 / 27; // 29^3/3^3
2 | export const ε = 216 / 24389; // 6^3/29^3
3 | export const white = [0.96422, 1.0, 0.82521]; // D50 reference white
4 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   roots: ["<rootDir>"],
3 |   testMatch: ["**/test/**/(*.)+spec.(ts|tsx|js)"],
4 |   transform: {
5 |     "^.+\\.(ts|tsx)$": "ts-jest",
6 |   },
7 | };
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/src/hsl/to-lab.ts:
--------------------------------------------------------------------------------
1 | import { Channels } from "../common";
2 | import hslToRgb from "./to-rgb";
3 | import rgbToLab from "../rgb/to-lab";
4 | 
5 | export default function (hsl: Channels): Channels {
6 |   return rgbToLab(hslToRgb(hsl));
7 | }
8 | 


--------------------------------------------------------------------------------
/src/hsl/to-lch.ts:
--------------------------------------------------------------------------------
1 | import { Channels } from "../common";
2 | import hslToRgb from "./to-rgb";
3 | import rgbToLch from "../rgb/to-lch";
4 | 
5 | export default function (hsl: Channels): Channels {
6 |   return rgbToLch(hslToRgb(hsl));
7 | }
8 | 


--------------------------------------------------------------------------------
/src/hsv/to-lab.ts:
--------------------------------------------------------------------------------
1 | import { Channels } from "../common";
2 | import hsvToRgb from "./to-rgb";
3 | import rgbToLab from "../rgb/to-lab";
4 | 
5 | export default function (hsv: Channels): Channels {
6 |   return rgbToLab(hsvToRgb(hsv));
7 | }
8 | 


--------------------------------------------------------------------------------
/src/hsv/to-lch.ts:
--------------------------------------------------------------------------------
1 | import { Channels } from "../common";
2 | import hsvToRgb from "./to-rgb";
3 | import rgbToLch from "../rgb/to-lch";
4 | 
5 | export default function (hsv: Channels): Channels {
6 |   return rgbToLch(hsvToRgb(hsv));
7 | }
8 | 


--------------------------------------------------------------------------------
/src/lab/to-hsl.ts:
--------------------------------------------------------------------------------
1 | import { Channels } from "../common";
2 | import labToRgb from "./to-rgb";
3 | import rgbToHsl from "../rgb/to-hsl";
4 | 
5 | export default function (lab: Channels): Channels {
6 |   return rgbToHsl(labToRgb(lab));
7 | }
8 | 


--------------------------------------------------------------------------------
/src/lab/to-hsv.ts:
--------------------------------------------------------------------------------
1 | import { Channels } from "../common";
2 | import labToRgb from "./to-rgb";
3 | import rgbToHsv from "../rgb/to-hsv";
4 | 
5 | export default function (lab: Channels): Channels {
6 |   return rgbToHsv(labToRgb(lab));
7 | }
8 | 


--------------------------------------------------------------------------------
/src/rgb/to-lch.ts:
--------------------------------------------------------------------------------
1 | import { Channels } from "../common";
2 | import rgbToLab from "./to-lab";
3 | import labToLch from "../lab/to-lch";
4 | 
5 | export default function (rgb: Channels): Channels {
6 |   return labToLch(rgbToLab(rgb));
7 | }
8 | 


--------------------------------------------------------------------------------
/src/hsv/patch.ts:
--------------------------------------------------------------------------------
 1 | import { Channels } from "../common";
 2 | import { ε } from "../common";
 3 | 
 4 | export function patchHsv([h, s, v]: Channels): Channels {
 5 |   if (s < ε) {
 6 |     h = s = 0;
 7 |   }
 8 | 
 9 |   if (v < ε) {
10 |     h = s = 0;
11 |   }
12 | 
13 |   return [h, s, v];
14 | }
15 | 


--------------------------------------------------------------------------------
/src/lch/to-hsl.ts:
--------------------------------------------------------------------------------
 1 | import { Channels } from "../common";
 2 | import lchToRgb from "./to-rgb";
 3 | import rgbToHsl from "../rgb/to-hsl";
 4 | import { assertHue } from "../assert";
 5 | 
 6 | export default function (lch: Channels): Channels {
 7 |   assertHue(lch[2]);
 8 | 
 9 |   return rgbToHsl(lchToRgb(lch));
10 | }
11 | 


--------------------------------------------------------------------------------
/src/lch/to-hsv.ts:
--------------------------------------------------------------------------------
 1 | import { Channels } from "../common";
 2 | import lchToRgb from "./to-rgb";
 3 | import rgbToHsv from "../rgb/to-hsv";
 4 | import { assertHue } from "../assert";
 5 | 
 6 | export default function (lch: Channels): Channels {
 7 |   assertHue(lch[2]);
 8 | 
 9 |   return rgbToHsv(lchToRgb(lch));
10 | }
11 | 


--------------------------------------------------------------------------------
/src/lch/to-rgb.ts:
--------------------------------------------------------------------------------
 1 | import { Channels } from "../common";
 2 | import { assertHue } from "../assert";
 3 | import lchToLab from "./to-lab";
 4 | import labToRgb from "../lab/to-rgb";
 5 | 
 6 | export default function (lch: Channels): Channels {
 7 |   assertHue(lch[2]);
 8 | 
 9 |   return labToRgb(lchToLab(lch));
10 | }
11 | 


--------------------------------------------------------------------------------
/src/common.ts:
--------------------------------------------------------------------------------
 1 | export type Channels = [number, number, number];
 2 | 
 3 | export const ε = 1e-6;
 4 | 
 5 | function clamp(val: number, max: number, min = 0): number {
 6 |   return Math.min(Math.max(val, min), max);
 7 | }
 8 | 
 9 | export function clampRgb(rgb: Channels): Channels {
10 |   return rgb.map((ch) => clamp(ch, 255)) as Channels;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/hsl/patch.ts:
--------------------------------------------------------------------------------
 1 | import { Channels } from "../common";
 2 | import { ε } from "../common";
 3 | 
 4 | export function patchHsl([h, s, l]: Channels): Channels {
 5 |   if (s < ε) {
 6 |     h = s = 0;
 7 |   }
 8 |   if (l < ε) {
 9 |     h = s = l = 0;
10 |   } else if (1 - l < ε) {
11 |     l = 1;
12 |     h = s = 0;
13 |   }
14 |   return [h, s, l];
15 | }
16 | 


--------------------------------------------------------------------------------
/src/lch/to-lab.ts:
--------------------------------------------------------------------------------
 1 | import { Channels } from "../common";
 2 | import { assertHue } from "../assert";
 3 | 
 4 | const { cos, sin, PI } = Math;
 5 | 
 6 | export default function ([l, c, h]: Channels): Channels {
 7 |   assertHue(h);
 8 | 
 9 |   return [
10 |     l, // L is still L
11 |     c * cos((h * PI) / 180), // a
12 |     c * sin((h * PI) / 180), // b
13 |   ];
14 | }
15 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   parser: "@typescript-eslint/parser",
 4 |   plugins: ["@typescript-eslint"],
 5 |   extends: [
 6 |     "eslint:recommended",
 7 |     "plugin:@typescript-eslint/recommended",
 8 |     "prettier/@typescript-eslint",
 9 |     "plugin:prettier/recommended",
10 |   ],
11 |   env: {
12 |     browser: true,
13 |     node: true,
14 |   },
15 | };
16 | 


--------------------------------------------------------------------------------
/src/rgb/assert.ts:
--------------------------------------------------------------------------------
 1 | import { Channels } from "../common";
 2 | 
 3 | export function assertRange(val: number | Channels): void {
 4 |   let pass;
 5 |   if (typeof val === "number") {
 6 |     pass = 0 <= val && val <= 255;
 7 |   } else {
 8 |     pass = val.every((v) => 0 <= v && v <= 255);
 9 |   }
10 |   if (!pass) {
11 |     throw new RangeError("RGB channel value shoud be in range [0, 255].");
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/rgb/to-hex.ts:
--------------------------------------------------------------------------------
 1 | import { Channels } from "../common";
 2 | import { assertRange } from "./assert";
 3 | 
 4 | const { round } = Math;
 5 | 
 6 | export default function (rgb: Channels): string {
 7 |   return "#" + rgb.map(convert).join("");
 8 | }
 9 | 
10 | function convert(ch: number): string {
11 |   assertRange(ch);
12 | 
13 |   const str = round(ch).toString(16);
14 |   return str.length == 1 ? `0${str}` : str;
15 | }
16 | 


--------------------------------------------------------------------------------
/src/lab/to-lch.ts:
--------------------------------------------------------------------------------
 1 | import { Channels } from "../common";
 2 | import { assertCIELightness } from "../assert";
 3 | 
 4 | const { atan2, PI, sqrt, pow } = Math;
 5 | 
 6 | export default function ([l, a, b]: Channels): Channels {
 7 |   assertCIELightness(l);
 8 | 
 9 |   const h = (atan2(b, a) * 180) / PI;
10 |   return [
11 |     l, // L is still L
12 |     sqrt(pow(a, 2) + pow(b, 2)), // Chroma
13 |     h >= 0 ? h : h + 360, // hue, in degrees [0 to 360)
14 |   ];
15 | }
16 | 


--------------------------------------------------------------------------------
/src/hsv/to-hsl.ts:
--------------------------------------------------------------------------------
 1 | import { Channels } from "../common";
 2 | import { assertHue, assertUnit } from "../assert";
 3 | import { patchHsl } from "../hsl/patch";
 4 | 
 5 | export default function ([h, s, v]: Channels): Channels {
 6 |   assertHue(h);
 7 |   assertUnit(s, "satuation");
 8 |   assertUnit(v, "value");
 9 | 
10 |   let l = (2 - s) * v;
11 |   let sl = s * v;
12 |   sl /= l <= 1 ? l : 2 - l;
13 |   sl = sl || 0;
14 |   l /= 2;
15 |   return patchHsl([h, sl, l]);
16 | }
17 | 


--------------------------------------------------------------------------------
/src/hsl/to-hsv.ts:
--------------------------------------------------------------------------------
 1 | import { Channels } from "../common";
 2 | import { assertHue, assertUnit } from "../assert";
 3 | import { patchHsv } from "../hsv/patch";
 4 | 
 5 | const { min } = Math;
 6 | 
 7 | export default function ([h, s, l]: Channels): Channels {
 8 |   assertHue(h);
 9 |   assertUnit(s, "satuation");
10 |   assertUnit(l, "lightness");
11 | 
12 |   const hv = h;
13 |   const v = l + s * min(l, 1 - l);
14 |   const sv = v === 0 ? 0 : 2 * (1 - l / v);
15 | 
16 |   return patchHsv([hv, sv, v]);
17 | }
18 | 


--------------------------------------------------------------------------------
/src/rgb/from-hex.ts:
--------------------------------------------------------------------------------
 1 | import { Channels } from "../common";
 2 | 
 3 | const hexRe = /^#(?:[0-9a-f]{3}){1,2}$/i;
 4 | 
 5 | export default function (hex: string): Channels {
 6 |   if (!hexRe.test(hex)) {
 7 |     throw new Error(`Invalid format for hex color value: ${hex}`);
 8 |   }
 9 | 
10 |   let val = hex.slice(1);
11 | 
12 |   if (val.length === 3) {
13 |     val = val
14 |       .split("")
15 |       .map((c) => c + c)
16 |       .join("");
17 |   }
18 | 
19 |   const num = parseInt(val, 16);
20 | 
21 |   return [num >> 16, (num >> 8) & 255, num & 255];
22 | }
23 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["es6"],
 5 |     "esModuleInterop": true,
 6 |     "sourceMap": true,
 7 |     "declaration": true,
 8 |     "declarationDir": "dist/types",
 9 |     "rootDir": "src",
10 |     "strict": true /* enable all strict type-checking options */
11 |     /* Additional Checks */
12 |     // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
13 |     // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
14 |     // "noUnusedParameters": true,  /* Report errors on unused parameters. */
15 |   },
16 |   "exclude": ["node_modules"],
17 |   "include": ["src"]
18 | }
19 | 


--------------------------------------------------------------------------------
/src/assert.ts:
--------------------------------------------------------------------------------
 1 | export function assertHue(val: number): void {
 2 |   if (val < 0 || val >= 360) {
 3 |     throw new RangeError("Hue channel value shoud be in range [0, 360).");
 4 |   }
 5 | }
 6 | 
 7 | export function assertUnit(val: number, channelName: string): void {
 8 |   if (val < 0 || val > 1) {
 9 |     throw new RangeError(
10 |       `${upperFirst(channelName)} channel value shoud be in range [0, 1].`
11 |     );
12 |   }
13 | }
14 | 
15 | function upperFirst(str: string): string {
16 |   if (str.length === 0) {
17 |     return str;
18 |   }
19 |   return str.charAt(0).toUpperCase() + str.slice(1);
20 | }
21 | 
22 | export function assertCIELightness(val: number): void {
23 |   if (val < 0) {
24 |     throw new RangeError(`CIE lightness channel value shoud be positive.`);
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import typescript from "rollup-plugin-typescript2";
 2 | import { terser } from "rollup-plugin-terser";
 3 | 
 4 | export default {
 5 |   input: "src/index.ts",
 6 |   output: [
 7 |     {
 8 |       file: "dist/index.esm.js",
 9 |       format: "es",
10 |       sourcemap: true,
11 |     },
12 |     {
13 |       file: "dist/index.esm.min.js",
14 |       format: "es",
15 |       sourcemap: true,
16 |       plugins: [terser()],
17 |     },
18 |     {
19 |       file: "dist/index.cjs.js",
20 |       format: "cjs",
21 |       sourcemap: true,
22 |     },
23 |     {
24 |       file: "dist/index.cjs.min.js",
25 |       format: "cjs",
26 |       sourcemap: true,
27 |       plugins: [terser()],
28 |     },
29 |   ],
30 |   plugins: [
31 |     typescript({
32 |       useTsconfigDeclarationDir: true,
33 |     }),
34 |   ],
35 | };
36 | 


--------------------------------------------------------------------------------
/.github/workflows/node.js.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 3 | 
 4 | name: Node.js CI
 5 | 
 6 | on:
 7 |   push:
 8 |     branches: [ master ]
 9 |   pull_request:
10 |     branches: [ master ]
11 | 
12 | jobs:
13 |   build:
14 | 
15 |     runs-on: ubuntu-latest
16 | 
17 |     strategy:
18 |       matrix:
19 |         node-version: [10.x, 12.x, 14.x]
20 | 
21 |     steps:
22 |     - uses: actions/checkout@v2
23 |     - name: Use Node.js ${{ matrix.node-version }}
24 |       uses: actions/setup-node@v1
25 |       with:
26 |         node-version: ${{ matrix.node-version }}
27 |     - run: npm ci
28 |     - run: npm run build --if-present
29 |     - run: npm test
30 | 


--------------------------------------------------------------------------------
/src/hsl/to-rgb.ts:
--------------------------------------------------------------------------------
 1 | import { Channels } from "../common";
 2 | import { assertHue, assertUnit } from "../assert";
 3 | 
 4 | export default function ([h, s, l]: Channels): Channels {
 5 |   assertHue(h);
 6 |   assertUnit(s, "satuation");
 7 |   assertUnit(l, "lightness");
 8 | 
 9 |   // https://www.w3.org/TR/css-color-4/#hsl-to-rgb
10 |   const t2 = l <= 0.5 ? l * (s + 1) : l + s - l * s;
11 |   const t1 = l * 2 - t2;
12 |   const r = hueToRgb(t1, t2, h + 120);
13 |   const g = hueToRgb(t1, t2, h);
14 |   const b = hueToRgb(t1, t2, h - 120);
15 | 
16 |   return [r * 255, g * 255, b * 255];
17 | }
18 | 
19 | function hueToRgb(t1: number, t2: number, h: number): number {
20 |   h = (h + 360) % 360;
21 | 
22 |   if (h < 60) {
23 |     return ((t2 - t1) * h) / 60 + t1;
24 |   } else if (h < 180) {
25 |     return t2;
26 |   } else if (h < 240) {
27 |     return ((t2 - t1) * (240 - h)) / 60 + t1;
28 |   } else {
29 |     return t1;
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/rgb/to-hsv.ts:
--------------------------------------------------------------------------------
 1 | import { Channels } from "../common";
 2 | import { assertRange } from "./assert";
 3 | import { patchHsv } from "../hsv/patch";
 4 | 
 5 | export default function (rgb: Channels): Channels {
 6 |   assertRange(rgb);
 7 | 
 8 |   const [r, g, b] = rgb.map((ch) => ch / 255);
 9 |   const max = Math.max(r, g, b);
10 |   const min = Math.min(r, g, b);
11 |   const diff = max - min;
12 | 
13 |   let h;
14 |   let s;
15 | 
16 |   if (max === min) {
17 |     h = 0;
18 |   } else if (max === r && g >= b) {
19 |     h = (60 * (g - b)) / diff + 0;
20 |   } else if (max === r && g < b) {
21 |     h = (60 * (g - b)) / diff + 360;
22 |   } else if (max === g) {
23 |     h = (60 * (b - r)) / diff + 120;
24 |   } else {
25 |     // max === b
26 |     h = (60 * (r - g)) / diff + 240;
27 |   }
28 | 
29 |   if (max === 0) {
30 |     s = 0;
31 |   } else {
32 |     s = diff / max;
33 |   }
34 | 
35 |   const v = max;
36 |   return patchHsv([h, s, v]);
37 | }
38 | 


--------------------------------------------------------------------------------
/src/hsv/to-rgb.ts:
--------------------------------------------------------------------------------
 1 | import { Channels } from "../common";
 2 | import { assertHue, assertUnit } from "../assert";
 3 | 
 4 | const { floor } = Math;
 5 | 
 6 | export default function ([h, s, v]: Channels): Channels {
 7 |   assertHue(h);
 8 |   assertUnit(s, "satuation");
 9 |   assertUnit(v, "value");
10 | 
11 |   const hi = floor(h / 60);
12 |   const f = h / 60 - hi;
13 |   const p = v * (1 - s);
14 |   const q = v * (1 - f * s);
15 |   const t = v * (1 - (1 - f) * s);
16 | 
17 |   let rgb1: Channels;
18 | 
19 |   switch (hi) {
20 |     case 0:
21 |       rgb1 = [v, t, p];
22 |       break;
23 |     case 1:
24 |       rgb1 = [q, v, p];
25 |       break;
26 |     case 2:
27 |       rgb1 = [p, v, t];
28 |       break;
29 |     case 3:
30 |       rgb1 = [p, q, v];
31 |       break;
32 |     case 4:
33 |       rgb1 = [t, p, v];
34 |       break;
35 |     case 5:
36 |       rgb1 = [v, p, q];
37 |       break;
38 |     default:
39 |       rgb1 = [0, 0, 0];
40 |   }
41 | 
42 |   return rgb1.map((ch) => ch * 255) as Channels;
43 | }
44 | 


--------------------------------------------------------------------------------
/src/rgb/to-hsl.ts:
--------------------------------------------------------------------------------
 1 | import { Channels } from "../common";
 2 | import { assertRange } from "./assert";
 3 | import { patchHsl } from "../hsl/patch";
 4 | 
 5 | export default function (rgb: Channels): Channels {
 6 |   assertRange(rgb);
 7 | 
 8 |   const [r, g, b] = rgb.map((ch) => ch / 255);
 9 |   const max = Math.max(r, g, b);
10 |   const min = Math.min(r, g, b);
11 |   const diff = max - min;
12 |   const sum = max + min;
13 | 
14 |   let h;
15 |   let s;
16 |   const l = sum / 2;
17 | 
18 |   if (max === min) {
19 |     h = 0;
20 |   } else if (max === r && g >= b) {
21 |     h = (60 * (g - b)) / diff + 0;
22 |   } else if (max === r && g < b) {
23 |     h = (60 * (g - b)) / diff + 360;
24 |   } else if (max === g) {
25 |     h = (60 * (b - r)) / diff + 120;
26 |   } else {
27 |     // max === b
28 |     h = (60 * (r - g)) / diff + 240;
29 |   }
30 | 
31 |   if (l === 0 || max === min) {
32 |     s = 0;
33 |   } else if (0 < l && l <= 0.5) {
34 |     s = diff / sum;
35 |   } else {
36 |     // l > 0.5
37 |     s = diff / (2 - sum);
38 |   }
39 | 
40 |   return patchHsl([h, s, l]);
41 | }
42 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 GU Yiling
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "color-converters",
 3 |   "version": "0.1.1",
 4 |   "description": "Modular color converters.",
 5 |   "module": "dist/index.esm.min.js",
 6 |   "main": "dist/index.cjs.min.js",
 7 |   "types": "dist/types/index.d.ts",
 8 |   "scripts": {
 9 |     "build": "rollup -c",
10 |     "test": "jest",
11 |     "prepublishOnly": "npm run test && npm run build"
12 |   },
13 |   "keywords": [
14 |     "color",
15 |     "convert"
16 |   ],
17 |   "author": "Justineo <justice360@gmail.com>",
18 |   "license": "MIT",
19 |   "devDependencies": {
20 |     "@types/d3-color": "^1.2.2",
21 |     "@types/d3-hsv": "^0.1.3",
22 |     "@types/jest": "^26.0.10",
23 |     "@typescript-eslint/eslint-plugin": "^3.9.1",
24 |     "@typescript-eslint/parser": "^3.9.1",
25 |     "d3-color": "^2.0.0",
26 |     "d3-hsv": "^0.1.0",
27 |     "eslint": "^7.7.0",
28 |     "eslint-config-prettier": "^6.11.0",
29 |     "eslint-plugin-prettier": "^3.1.4",
30 |     "jest": "^26.4.2",
31 |     "prettier": "^2.0.5",
32 |     "rollup": "^2.26.3",
33 |     "rollup-plugin-terser": "^7.0.0",
34 |     "rollup-plugin-typescript2": "^0.27.2",
35 |     "ts-jest": "^26.2.0",
36 |     "typescript": "^3.9.7"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | export { default as rgbToHsl } from "./rgb/to-hsl";
 2 | export { default as rgbToHsv } from "./rgb/to-hsv";
 3 | export { default as rgbToLab } from "./rgb/to-lab";
 4 | export { default as rgbToLch } from "./rgb/to-lch";
 5 | export { default as rgbToHex } from "./rgb/to-hex";
 6 | export { default as hexToRgb } from "./rgb/from-hex";
 7 | 
 8 | export { default as hslToRgb } from "./hsl/to-rgb";
 9 | export { default as hslToHsv } from "./hsl/to-hsv";
10 | export { default as hslToLab } from "./hsl/to-lab";
11 | export { default as hslToLch } from "./hsl/to-lch";
12 | 
13 | export { default as hsvToHsl } from "./hsv/to-hsl";
14 | export { default as hsvToRgb } from "./hsv/to-rgb";
15 | export { default as hsvToLab } from "./hsv/to-lab";
16 | export { default as hsvToLch } from "./hsv/to-lch";
17 | 
18 | export { default as lchToHsl } from "./lch/to-hsl";
19 | export { default as lchToRgb } from "./lch/to-rgb";
20 | export { default as lchToHsv } from "./lch/to-hsv";
21 | export { default as lchToLab } from "./lch/to-lab";
22 | 
23 | export { default as labToHsl } from "./lab/to-hsl";
24 | export { default as labToRgb } from "./lab/to-rgb";
25 | export { default as labToHsv } from "./lab/to-hsv";
26 | export { default as labToLch } from "./lab/to-lch";
27 | 


--------------------------------------------------------------------------------
/src/lab/to-rgb.ts:
--------------------------------------------------------------------------------
 1 | import { Channels, clampRgb } from "../common";
 2 | import { assertCIELightness } from "../assert";
 3 | import { ε, κ, white } from "./consts";
 4 | 
 5 | const { pow } = Math;
 6 | 
 7 | export default function (lab: Channels): Channels {
 8 |   assertCIELightness(lab[0]);
 9 | 
10 |   return clampRgb(lrgbToRgb(xyz50toLrgb(toXyz50(lab))));
11 | }
12 | 
13 | function toXyz50([l, a, b]: Channels): Channels {
14 |   // compute f, starting with the luminance-related term
15 |   const f1 = (l + 16) / 116;
16 |   const f0 = a / 500 + f1;
17 |   const f2 = f1 - b / 200;
18 | 
19 |   // compute xyz
20 |   const xyz = [
21 |     pow(f0, 3) > ε ? pow(f0, 3) : (116 * f0 - 16) / κ,
22 |     l > κ * ε ? pow((l + 16) / 116, 3) : l / κ,
23 |     pow(f2, 3) > ε ? pow(f2, 3) : (116 * f2 - 16) / κ,
24 |   ];
25 | 
26 |   // Compute XYZ by scaling xyz by reference white
27 |   return xyz.map((val, i) => val * white[i]) as Channels;
28 | }
29 | 
30 | function xyz50toLrgb([x, y, z]: Channels): Channels {
31 |   return [
32 |     3.1338561 * x + -1.6168667 * y + -0.4906146 * z,
33 |     -0.9787684 * x + 1.9161415 * y + 0.033454 * z,
34 |     0.0719453 * x + -0.2289914 * y + 1.4052427 * z,
35 |   ];
36 | }
37 | 
38 | function lrgbToRgb(rgb: Channels): Channels {
39 |   return rgb.map(
40 |     (val) =>
41 |       (val > 0.0031308 ? 1.055 * pow(val, 1 / 2.4) - 0.055 : 12.92 * val) * 255
42 |   ) as Channels;
43 | }
44 | 


--------------------------------------------------------------------------------
/src/rgb/to-lab.ts:
--------------------------------------------------------------------------------
 1 | import { Channels } from "../common";
 2 | import { assertRange } from "./assert";
 3 | import { ε, κ, white } from "../lab/consts";
 4 | 
 5 | const { pow, cbrt } = Math;
 6 | 
 7 | export default function (rgb: Channels): Channels {
 8 |   assertRange(rgb);
 9 | 
10 |   return xyz50toLab(toXyz50(rgb));
11 | }
12 | 
13 | function toXyz50(rgb: Channels): Channels {
14 |   const [r, g, b] = toLrgb(rgb);
15 | 
16 |   /**
17 |    * Convert linear sRGB to XYZ. Instead of linear sRGB -> XYZ D65 -> XYZ D50,
18 |    * we use linear sRGB -> XYZ D50 to calculate faster.
19 |    * See https://www.w3.org/TR/css-color-4/#color-conversion-code
20 |    * See http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
21 |    */
22 |   return [
23 |     0.4360747 * r + 0.3850649 * g + 0.1430804 * b,
24 |     0.2225045 * r + 0.7168786 * g + 0.0606169 * b,
25 |     0.0139322 * r + 0.0971045 * g + 0.7141733 * b,
26 |   ];
27 | }
28 | 
29 | function toLrgb(rgb: Channels): Channels {
30 |   return rgb.map((ch) => {
31 |     const val = ch / 255;
32 | 
33 |     if (val < 0.04045) {
34 |       return val / 12.92;
35 |     }
36 | 
37 |     return pow((val + 0.055) / 1.055, 2.4);
38 |   }) as Channels;
39 | }
40 | 
41 | // See https://www.w3.org/TR/css-color-4/#color-conversion-code
42 | function xyz50toLab(xyz: Channels): Channels {
43 |   // compute xyz, which is XYZ scaled relative to reference white
44 |   const scaledXyz = xyz.map((val, i) => val / white[i]);
45 | 
46 |   const f = scaledXyz.map((val) =>
47 |     val > ε ? cbrt(val) : (κ * val + 16) / 116
48 |   );
49 | 
50 |   return [
51 |     116 * f[1] - 16, // L
52 |     500 * (f[0] - f[1]), // a
53 |     200 * (f[1] - f[2]), // b
54 |   ];
55 | }
56 | 


--------------------------------------------------------------------------------
/test/hsl.spec.ts:
--------------------------------------------------------------------------------
 1 | import { assertConvert, assertThrow } from "./common";
 2 | import { HSL_VALUES } from "./data";
 3 | import { hslToRgb, hslToHsv, hslToLab, hslToLch } from "../src/index";
 4 | import { rgb, hsl, lab, lch } from "d3-color";
 5 | import { hsv } from "d3-hsv";
 6 | 
 7 | test("hsl: to rgb", () => {
 8 |   assertThrow(hslToRgb, [
 9 |     [-1, 0, 0],
10 |     [361, 0, 0],
11 |     [0, 2, 0],
12 |     [0, 0, -1],
13 |   ]);
14 | 
15 |   assertConvert(
16 |     hslToRgb,
17 |     HSL_VALUES.map((val) => {
18 |       const { r, g, b } = rgb(hsl(...val));
19 |       return [val, [r, g, b]];
20 |     })
21 |   );
22 | });
23 | 
24 | test("hsl: to hsv", () => {
25 |   assertThrow(hslToHsv, [
26 |     [-1, 0, 0],
27 |     [361, 0, 0],
28 |     [0, 2, 0],
29 |     [0, 0, -1],
30 |   ]);
31 | 
32 |   assertConvert(
33 |     hslToHsv,
34 |     HSL_VALUES.map((val) => {
35 |       const { h, s, v } = hsv(hsl(...val));
36 |       return [val, [isNaN(h) ? 0 : h, isNaN(s) ? 0 : s, v]];
37 |     }),
38 |     // d3-color convert hsl to rgb first so precision is lost
39 |     // so relax precision for comparison here
40 |     [0.6, 0.01, 0.01]
41 |   );
42 | });
43 | 
44 | test("hsl: to lab", () => {
45 |   assertThrow(hslToLab, [
46 |     [-1, 0, 0],
47 |     [361, 0, 0],
48 |     [0, 2, 0],
49 |     [0, 0, -1],
50 |   ]);
51 | 
52 |   assertConvert(
53 |     hslToLab,
54 |     HSL_VALUES.map((val) => {
55 |       const { l, a, b } = lab(hsl(...val));
56 |       return [val, [l, a, b]];
57 |     })
58 |   );
59 | });
60 | 
61 | test("hsl: to lch", () => {
62 |   assertThrow(hslToLch, [
63 |     [-1, 0, 0],
64 |     [361, 0, 0],
65 |     [0, 2, 0],
66 |     [0, 0, -1],
67 |   ]);
68 | 
69 |   assertConvert(
70 |     hslToLch,
71 |     HSL_VALUES.map((val) => {
72 |       const { l, c, h } = lch(hsl(...val));
73 |       return [val, [l, isNaN(c) ? 0 : c, isNaN(h) ? 0 : h]];
74 |     })
75 |   );
76 | });
77 | 


--------------------------------------------------------------------------------
/test/common.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @typescript-eslint/ban-types */
 2 | /* eslint-disable @typescript-eslint/no-namespace */
 3 | import { Channels } from "../src/common";
 4 | 
 5 | type ChannelsEpsilon = number | Channels;
 6 | 
 7 | declare global {
 8 |   namespace jest {
 9 |     interface Matchers<R> {
10 |       toAlmostEqual(expected: Channels, ε?: ChannelsEpsilon): R;
11 |     }
12 |   }
13 | }
14 | 
15 | const { abs } = Math;
16 | expect.extend({
17 |   toAlmostEqual(
18 |     received: Channels,
19 |     expected: Channels,
20 |     ε: ChannelsEpsilon = 0.01
21 |   ) {
22 |     if (typeof ε === "number") {
23 |       ε = [ε, ε, ε];
24 |     }
25 | 
26 |     const pass =
27 |       abs(received[0] - expected[0]) < ε[0] &&
28 |       abs(received[1] - expected[1]) < ε[1] &&
29 |       abs(received[2] - expected[2]) < ε[2];
30 | 
31 |     return {
32 |       pass,
33 |       message: () =>
34 |         `expected ${JSON.stringify(received)} to${
35 |           pass ? " not" : ""
36 |         } be almost equal to ${JSON.stringify(expected)}`,
37 |     };
38 |   },
39 | });
40 | 
41 | export type Convertable = string | Channels;
42 | // export type ChannelsConverter = (from: Channels) => Channels;
43 | export type Converter = (from: Convertable) => Convertable;
44 | 
45 | export function assertThrow(
46 |   convert: Function,
47 |   invalidValues: Convertable[]
48 | ): void {
49 |   const convertFn = convert as Converter;
50 |   invalidValues.forEach((val) => {
51 |     expect(() => convertFn(val)).toThrow();
52 |   });
53 | }
54 | 
55 | export function assertConvert(
56 |   convert: Function,
57 |   cases: [Convertable, Convertable][],
58 |   ε: ChannelsEpsilon = 0.01
59 | ): void {
60 |   const convertFn = convert as Converter;
61 |   cases.forEach(([from, to]) => {
62 |     if (typeof to === "string") {
63 |       expect(convertFn(from)).toEqual(to);
64 |     } else {
65 |       expect(convertFn(from)).toAlmostEqual(to, ε);
66 |     }
67 |   });
68 | }
69 | 


--------------------------------------------------------------------------------
/test/lab.spec.ts:
--------------------------------------------------------------------------------
 1 | import { assertConvert, assertThrow } from "./common";
 2 | import { LAB_VALUES } from "./data";
 3 | import { labToRgb, labToHsl, labToHsv, labToLch } from "../src/index";
 4 | import { clampRgb } from "../src/common";
 5 | import { patchHsl } from "../src/hsl/patch";
 6 | import { patchHsv } from "../src/hsv/patch";
 7 | import { rgb, hsl, lab, lch } from "d3-color";
 8 | import { hsv } from "d3-hsv";
 9 | 
10 | test("lab: to rgb", () => {
11 |   assertThrow(labToRgb, [[-1, 0, 0]]);
12 | 
13 |   assertConvert(
14 |     labToRgb,
15 |     LAB_VALUES.map((val) => {
16 |       const { r, g, b } = rgb(lab(...val));
17 |       return [val, clampRgb([r, g, b])];
18 |     })
19 |   );
20 | });
21 | 
22 | test("lab: to hsl", () => {
23 |   assertThrow(labToHsl, [[-1, 0, 0]]);
24 | 
25 |   assertConvert(
26 |     labToHsl,
27 |     LAB_VALUES.map((val) => {
28 |       const { r, g, b } = rgb(lab(...val));
29 |       // compare after clamping rgb channels to [0, 255]
30 |       // otherwise it'll be meaning less
31 |       const { h, s, l } = hsl(rgb(...clampRgb([r, g, b])));
32 |       return [val, patchHsl([isNaN(h) ? 0 : h, isNaN(s) ? 0 : s, l])];
33 |     })
34 |   );
35 | });
36 | 
37 | test("lab: to hsv", () => {
38 |   assertThrow(labToHsv, [[-1, 0, 0]]);
39 | 
40 |   assertConvert(
41 |     labToHsv,
42 |     LAB_VALUES.map((val) => {
43 |       const { r, g, b } = rgb(lab(...val));
44 |       // compare after clamping rgb channels to [0, 255]
45 |       // otherwise it'll be meaning less
46 |       const { h, s, v } = hsv(rgb(...clampRgb([r, g, b])));
47 |       return [val, patchHsv([isNaN(h) ? 0 : h, isNaN(s) ? 0 : s, v])];
48 |     }),
49 |     [1.5, 0.01, 0.01]
50 |   );
51 | });
52 | 
53 | test("lab: to lch", () => {
54 |   assertThrow(labToLch, [[-1, 0, 0]]);
55 | 
56 |   assertConvert(
57 |     labToLch,
58 |     LAB_VALUES.map((val) => {
59 |       const { l, c, h } = lch(lab(...val));
60 |       return [val, [l, isNaN(c) ? 0 : c, isNaN(h) ? 0 : h]];
61 |     })
62 |   );
63 | });
64 | 


--------------------------------------------------------------------------------
/test/data.ts:
--------------------------------------------------------------------------------
 1 | import { Channels } from "../src/common";
 2 | 
 3 | export const RGB_VALUES: Channels[] = [
 4 |   [100.0, 100.0, 100.0],
 5 |   [50.0, 50.0, 50.0],
 6 |   [0.0, 0.0, 0.0],
 7 |   [100.0, 0.0, 0.0],
 8 |   [75.0, 75.0, 0.0],
 9 |   [0.0, 50.0, 0.0],
10 |   [50.0, 100.0, 100.0],
11 |   [50.0, 50.0, 100.0],
12 |   [75.0, 25.0, 75.0],
13 |   [62.8, 64.3, 14.2],
14 |   [11.6, 67.5, 25.5],
15 |   [70.4, 18.7, 89.7],
16 |   [99.8, 97.4, 53.2],
17 |   [9.9, 79.5, 59.1],
18 |   [21.1, 14.9, 59.7],
19 |   [49.5, 49.3, 72.1],
20 | ].map(([a, b, c]) => [(a / 100) * 255, (b / 100) * 255, (c / 100) * 255]);
21 | 
22 | export const HSL_VALUES: Channels[] = [
23 |   [0, 0.0, 1.0],
24 |   [0, 0.0, 0.5],
25 |   [0, 0.0, 0.0],
26 |   [0.0, 1.0, 0.5],
27 |   [60.0, 1.0, 0.375],
28 |   [120.0, 1.0, 0.25],
29 |   [180.0, 1.0, 0.75],
30 |   [240.0, 1.0, 0.75],
31 |   [300.0, 0.5, 0.5],
32 |   [61.8, 0.638, 0.393],
33 |   [134.9, 0.707, 0.396],
34 |   [283.7, 0.775, 0.542],
35 |   [56.9, 0.991, 0.765],
36 |   [162.4, 0.779, 0.447],
37 |   [248.3, 0.601, 0.373],
38 |   [240.5, 0.29, 0.607],
39 | ];
40 | 
41 | export const HSV_VALUES: Channels[] = [
42 |   [0, 0.0, 1.0],
43 |   [0, 0.0, 0.5],
44 |   [0, 0.0, 0.0],
45 |   [0.0, 1.0, 1.0],
46 |   [60.0, 1.0, 0.75],
47 |   [120.0, 1.0, 0.5],
48 |   [180.0, 0.5, 1.0],
49 |   [240.0, 0.5, 1.0],
50 |   [300.0, 0.667, 0.75],
51 |   [61.8, 0.779, 0.643],
52 |   [134.9, 0.828, 0.675],
53 |   [283.7, 0.792, 0.897],
54 |   [56.9, 0.467, 0.998],
55 |   [162.4, 0.875, 0.795],
56 |   [248.3, 0.75, 0.597],
57 |   [240.5, 0.316, 0.721],
58 | ];
59 | 
60 | export const LAB_VALUES: Channels[] = [
61 |   [0, 0, 0],
62 |   [50, 0, 0],
63 |   [50, 10, 20],
64 |   [50, 4, -5],
65 |   [70, -45, 0],
66 |   [10, 20, 30],
67 |   [80, 40, 120],
68 |   [100, 40, -50],
69 | ];
70 | 
71 | export const LCH_VALUES: Channels[] = [
72 |   [120, 40, 50],
73 |   [0, 0, 0],
74 |   [0, 20, 40],
75 |   [120, 0, 40],
76 |   [0, 0, 40],
77 |   [180, 50, 0],
78 |   [0, 50, 0],
79 |   [240, 0, 0],
80 |   [120, 20, 10],
81 |   [320, 20, 110],
82 | ];
83 | 


--------------------------------------------------------------------------------
/test/lch.spec.ts:
--------------------------------------------------------------------------------
 1 | import { assertConvert, assertThrow } from "./common";
 2 | import { LCH_VALUES } from "./data";
 3 | import { lchToRgb, lchToHsl, lchToHsv, lchToLab } from "../src/index";
 4 | import { clampRgb } from "../src/common";
 5 | import { patchHsl } from "../src/hsl/patch";
 6 | import { patchHsv } from "../src/hsv/patch";
 7 | import { rgb, hsl, lab, lch } from "d3-color";
 8 | import { hsv } from "d3-hsv";
 9 | 
10 | test("lch: to rgb", () => {
11 |   assertThrow(lchToRgb, [
12 |     [0, 0, 360],
13 |     [0, 0, -1],
14 |   ]);
15 | 
16 |   assertConvert(
17 |     lchToRgb,
18 |     LCH_VALUES.map((val) => {
19 |       const { r, g, b } = rgb(lch(...val));
20 |       return [val, clampRgb([r, g, b])];
21 |     })
22 |   );
23 | });
24 | 
25 | test("lch: to hsl", () => {
26 |   assertThrow(lchToHsl, [
27 |     [0, 0, 360],
28 |     [0, 0, -1],
29 |   ]);
30 | 
31 |   assertConvert(
32 |     lchToHsl,
33 |     LCH_VALUES.map((val) => {
34 |       const { r, g, b } = rgb(lch(...val));
35 |       // compare after clamping rgb channels to [0, 255]
36 |       // otherwise it'll be meaning less
37 |       const { h, s, l } = hsl(rgb(...clampRgb([r, g, b])));
38 |       return [val, patchHsl([isNaN(h) ? 0 : h, isNaN(s) ? 0 : s, l])];
39 |     })
40 |   );
41 | });
42 | 
43 | test("lch: to hsv", () => {
44 |   assertThrow(lchToHsv, [
45 |     [0, 0, 360],
46 |     [0, 0, -1],
47 |   ]);
48 | 
49 |   assertConvert(
50 |     lchToHsv,
51 |     LCH_VALUES.map((val) => {
52 |       const { r, g, b } = rgb(lch(...val));
53 |       // compare after clamping rgb channels to [0, 255]
54 |       // otherwise it'll be meaning less
55 |       const { h, s, v } = hsv(rgb(...clampRgb([r, g, b])));
56 |       return [val, patchHsv([isNaN(h) ? 0 : h, isNaN(s) ? 0 : s, v])];
57 |     }),
58 |     [1.5, 0.01, 0.01]
59 |   );
60 | });
61 | 
62 | test("lch: to lab", () => {
63 |   assertThrow(lchToLab, [
64 |     [0, 0, 360],
65 |     [0, 0, -1],
66 |   ]);
67 | 
68 |   assertConvert(
69 |     lchToLab,
70 |     LCH_VALUES.map((val) => {
71 |       const { l, a, b } = lab(lch(...val));
72 |       return [val, [l, a, b]];
73 |     })
74 |   );
75 | });
76 | 


--------------------------------------------------------------------------------
/test/hsv.spec.ts:
--------------------------------------------------------------------------------
 1 | import { assertConvert, assertThrow } from "./common";
 2 | import { HSV_VALUES } from "./data";
 3 | import { hsvToRgb, hsvToHsl, hsvToLab, hsvToLch } from "../src/index";
 4 | import { rgb, hsl, lab, lch } from "d3-color";
 5 | import { hsv } from "d3-hsv";
 6 | import { Channels } from "../src/common";
 7 | 
 8 | test("hsv: to rgb", () => {
 9 |   assertThrow(hsvToRgb, [
10 |     [-1, 0, 0],
11 |     [361, 0, 0],
12 |     [0, 2, 0],
13 |     [0, 0, -1],
14 |   ]);
15 | 
16 |   assertConvert(
17 |     // d3-hsv round rgb channels so make some compromise here
18 |     (val: Channels) => hsvToRgb(val).map(Math.round),
19 |     HSV_VALUES.map((val) => {
20 |       const { r, g, b } = rgb(hsv(...val));
21 |       return [val, [r, g, b]];
22 |     })
23 |   );
24 | });
25 | 
26 | test("hsv: to hsl", () => {
27 |   assertThrow(hsvToHsl, [
28 |     [-1, 0, 0],
29 |     [361, 0, 0],
30 |     [0, 2, 0],
31 |     [0, 0, -1],
32 |   ]);
33 | 
34 |   assertConvert(
35 |     hsvToHsl,
36 |     HSV_VALUES.map((val) => {
37 |       const { h, s, l } = hsl(hsv(...val));
38 |       return [val, [isNaN(h) ? 0 : h, isNaN(s) ? 0 : s, isNaN(l) ? 0 : l]];
39 |     }),
40 |     // d3-color convert hsl to rgb first so precision is lost
41 |     // so relax precision for comparison here
42 |     [0.6, 0.01, 0.01]
43 |   );
44 | });
45 | 
46 | test("hsv: to lab", () => {
47 |   assertThrow(hsvToLab, [
48 |     [-1, 0, 0],
49 |     [361, 0, 0],
50 |     [0, 2, 0],
51 |     [0, 0, -1],
52 |   ]);
53 | 
54 |   assertConvert(
55 |     hsvToLab,
56 |     HSV_VALUES.map((val) => {
57 |       const { l, a, b } = lab(hsv(...val));
58 |       return [val, [l, a, b]];
59 |     }),
60 |     // d3-color convert hsl to rgb first so precision is lost
61 |     // so relax precision for comparison here
62 |     [0.6, 0.5, 0.5]
63 |   );
64 | });
65 | 
66 | test("hsv: to lch", () => {
67 |   assertThrow(hsvToLch, [
68 |     [-1, 0, 0],
69 |     [361, 0, 0],
70 |     [0, 2, 0],
71 |     [0, 0, -1],
72 |   ]);
73 | 
74 |   assertConvert(
75 |     hsvToLch,
76 |     HSV_VALUES.map((val) => {
77 |       const { l, c, h } = lch(hsv(...val));
78 |       return [val, [l, isNaN(c) ? 0 : c, isNaN(h) ? 0 : h]];
79 |     }),
80 |     // d3-color convert hsl to rgb first so precision is lost
81 |     // so relax precision for comparison here
82 |     [0.6, 0.5, 0.5]
83 |   );
84 | });
85 | 


--------------------------------------------------------------------------------
/test/rgb.spec.ts:
--------------------------------------------------------------------------------
  1 | import { assertConvert, assertThrow } from "./common";
  2 | import { RGB_VALUES } from "./data";
  3 | import {
  4 |   hexToRgb,
  5 |   rgbToHex,
  6 |   rgbToHsl,
  7 |   rgbToHsv,
  8 |   rgbToLab,
  9 |   rgbToLch,
 10 | } from "../src/index";
 11 | import { rgb, hsl, lab, lch } from "d3-color";
 12 | import { hsv } from "d3-hsv";
 13 | import { Channels } from "../src/common";
 14 | 
 15 | test("hex: to rgb", () => {
 16 |   assertThrow(hexToRgb, [
 17 |     "123",
 18 |     "#12345",
 19 |     "#1234567",
 20 |     "#123456789",
 21 |     "#4183c488",
 22 |   ]);
 23 | 
 24 |   assertConvert(hexToRgb, [
 25 |     ["#000", [0, 0, 0]],
 26 |     ["#333", [51, 51, 51]],
 27 |     ["#4183c4", [65, 131, 196]],
 28 |   ]);
 29 | });
 30 | 
 31 | test("rgb: to hex", () => {
 32 |   assertThrow(rgbToHex, [
 33 |     [-1, 0, 0],
 34 |     [256, 0, 0],
 35 |   ]);
 36 | 
 37 |   assertConvert(rgbToHex, [
 38 |     [[0, 0, 0], "#000000"],
 39 |     [[51, 51, 51], "#333333"],
 40 |     [[65, 131, 196], "#4183c4"],
 41 |   ]);
 42 | });
 43 | 
 44 | test("rgb: to hsl", () => {
 45 |   assertThrow(rgbToHsl, [
 46 |     [-1, 0, 0],
 47 |     [256, 0, 0],
 48 |   ]);
 49 | 
 50 |   assertConvert(
 51 |     rgbToHsl,
 52 |     RGB_VALUES.map((val) => {
 53 |       const { h, s, l } = hsl(rgb(...val));
 54 |       return [val, [isNaN(h) ? 0 : h, isNaN(s) ? 0 : s, l]];
 55 |     })
 56 |   );
 57 | });
 58 | 
 59 | test("rgb: to hsv", () => {
 60 |   assertThrow(rgbToHsv, [
 61 |     [-1, 0, 0],
 62 |     [256, 0, 0],
 63 |   ]);
 64 | 
 65 |   assertConvert(
 66 |     rgbToHsv,
 67 |     RGB_VALUES.map((val) => {
 68 |       const { h, s, v } = hsv(rgb(...val));
 69 |       return [
 70 |         // d3-hsv round rgb channels so make some compromise here
 71 |         val.map(Math.round) as Channels,
 72 |         [isNaN(h) ? 0 : h, isNaN(s) ? 0 : s, v],
 73 |       ];
 74 |     })
 75 |   );
 76 | });
 77 | 
 78 | test("rgb: to lab", () => {
 79 |   assertThrow(rgbToLab, [
 80 |     [-1, 0, 0],
 81 |     [256, 0, 0],
 82 |   ]);
 83 | 
 84 |   assertConvert(
 85 |     rgbToLab,
 86 |     RGB_VALUES.map((val) => {
 87 |       const { l, a, b } = lab(rgb(...val));
 88 |       return [val, [l, a, b]];
 89 |     })
 90 |   );
 91 | });
 92 | 
 93 | test("rgb: to lch", () => {
 94 |   assertThrow(rgbToLch, [
 95 |     [-1, 0, 0],
 96 |     [256, 0, 0],
 97 |   ]);
 98 | 
 99 |   assertConvert(
100 |     rgbToLch,
101 |     RGB_VALUES.map((val) => {
102 |       const { l, c, h } = lch(rgb(...val));
103 |       return [val, [l, isNaN(c) ? 0 : c, isNaN(h) ? 0 : h]];
104 |     })
105 |   );
106 | });
107 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Color converters
 2 | 
 3 | ![Node.js CI](https://github.com/Justineo/color-converters/workflows/Node.js%20CI/badge.svg)
 4 | 
 5 | Modular color converters.
 6 | 
 7 | ## Installation
 8 | 
 9 | ```bash
10 | npm i -save color-converters
11 | ```
12 | 
13 | ## Usage
14 | 
15 | ```js
16 | import { rgbToLch } from 'color-converters'
17 | 
18 | console.log(rgbToLch([128, 64, 192]))
19 | // [ 40.69258402616329, 73.62226037144089, 308.8993602683097 ]
20 | ```
21 | 
22 | ## Supported color spaces and converters
23 | 
24 | * RGB (sRGB, 0–255)
25 | 
26 |   * `rgbToHex: (rgb: [number, number, number]) => string`
27 |   * `hexToRgb: (hex: string) => [number, number, number]`
28 |   * `rgbToHsl: (rgb: [number, number, number]) => [number, number, number]`
29 |   * `rgbToHsv: (rgb: [number, number, number]) => [number, number, number]`
30 |   * `rgbToLab: (rgb: [number, number, number]) => [number, number, number]`
31 |   * `rgbToLch: (rgb: [number, number, number]) => [number, number, number]`
32 | 
33 | * HSL
34 | 
35 |   * `hslToRgb: (hsl: [number, number, number]) => [number, number, number]`
36 |   * `hslToHsv: (hsl: [number, number, number]) => [number, number, number]`
37 |   * `hslToLab: (hsl: [number, number, number]) => [number, number, number]`
38 |   * `hslToLch: (hsl: [number, number, number]) => [number, number, number]`
39 | 
40 | * HSV
41 | 
42 |   * `hsvToRgb: (hsv: [number, number, number]) => [number, number, number]`
43 |   * `hsvToHsl: (hsv: [number, number, number]) => [number, number, number]`
44 |   * `hsvToLab: (hsv: [number, number, number]) => [number, number, number]`
45 |   * `hsvToLch: (hsv: [number, number, number]) => [number, number, number]`
46 | 
47 | * Lab (CIE L\*a\*b\*)
48 | 
49 |   * `labToRgb: (lab: [number, number, number]) => [number, number, number]`
50 |   * `labToHsl: (lab: [number, number, number]) => [number, number, number]`
51 |   * `labToHsv: (lab: [number, number, number]) => [number, number, number]`
52 |   * `labToLch: (lab: [number, number, number]) => [number, number, number]`
53 | 
54 | * LCH<sub>ab</sub>
55 | 
56 |   * `lchToRgb: (lch: [number, number, number]) => [number, number, number]`
57 |   * `lchToHsl: (lch: [number, number, number]) => [number, number, number]`
58 |   * `lchToHsv: (lch: [number, number, number]) => [number, number, number]`
59 |   * `lchToLab: (lch: [number, number, number]) => [number, number, number]`
60 | 
61 | ## Notes
62 | 
63 | * Conversion between RGB and Lab/LCH follows the algorithm described in [CSS Colors Level 4](https://www.w3.org/TR/css-color-4/#rgb-to-lab), which produces slightly different result with Chroma.js. See also: [*Lab and RGB*](https://observablehq.com/@mbostock/lab-and-rgb).
64 | * Unavailable channel values are filled with `0` instead of `NaN` (eg. H channel in HSL when L is `0`). This is a trade-off between being more precise and requiring users to fill unavailable values themselves.
65 | * Produced RGB channel values are clamped to [0, 255] when converting from Lab/LCH to RGB.
66 | * RGB channel values are not rounded to integers.
67 | 
68 | ## Why another color library?
69 | 
70 | Existing color manipulation libraries like [`color`](https://www.npmjs.com/package/color), [`TinyColor`](http://bgrins.github.io/TinyColor/), [`Chroma.js`](https://vis4.net/chromajs/) and [`d3-color`](https://www.npmjs.com/package/d3-color) are powerful enough but are bundled with all functionalities together to support a “jQuery like” API. While sometimes we only need simple conversion among two or three color spaces. This library provides a bunch of color conversion functions which are fully treeshakable, no formatting, no manipulation, no color palette generation.
71 | 


--------------------------------------------------------------------------------