{"id":13567831,"url":"https://github.com/omgovich/colord","last_synced_at":"2025-05-13T21:06:12.141Z","repository":{"id":38330284,"uuid":"316474381","full_name":"omgovich/colord","owner":"omgovich","description":"👑 A tiny yet powerful tool for high-performance color manipulations and conversions","archived":false,"fork":false,"pushed_at":"2023-10-02T00:32:53.000Z","size":352,"stargazers_count":1755,"open_issues_count":37,"forks_count":54,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-06T03:02:16.489Z","etag":null,"topics":["a11y","color","color-names","converter","css-color","hacktoberfest","hex","hsl","hsv","hwb","lab","lch","parser","rgb","tiny","xyz","zero-dependency"],"latest_commit_sha":null,"homepage":"https://colord.omgovich.ru","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/omgovich.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"patreon":"omgovich"}},"created_at":"2020-11-27T10:47:20.000Z","updated_at":"2025-05-04T08:30:16.000Z","dependencies_parsed_at":"2024-01-13T17:11:56.638Z","dependency_job_id":"374cc563-01d6-4e42-8f0c-0b693a634e16","html_url":"https://github.com/omgovich/colord","commit_stats":{"total_commits":219,"total_committers":11,"mean_commits":19.90909090909091,"dds":0.2191780821917808,"last_synced_commit":"3f859e03b0ca622eb15480f611371a0f15c9427f"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omgovich%2Fcolord","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omgovich%2Fcolord/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omgovich%2Fcolord/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omgovich%2Fcolord/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/omgovich","download_url":"https://codeload.github.com/omgovich/colord/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253303041,"owners_count":21886876,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","color","color-names","converter","css-color","hacktoberfest","hex","hsl","hsv","hwb","lab","lch","parser","rgb","tiny","xyz","zero-dependency"],"created_at":"2024-08-01T13:02:45.207Z","updated_at":"2025-05-13T21:06:12.072Z","avatar_url":"https://github.com/omgovich.png","language":"TypeScript","funding_links":["https://patreon.com/omgovich"],"categories":["TypeScript","Table of Contents","Colors"],"sub_categories":["Color Libraries","Reactive Programming"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://colord.omgovich.ru/\"\u003e\n    \u003cimg src=\"assets/logo.png\" width=\"280\" height=\"210\" alt=\"colord\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.org/package/colord\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/colord.svg?labelColor=dd3a5e\u0026color=6ead0a\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/omgovich/colord/actions\"\u003e\n    \u003cimg alt=\"build\" src=\"https://img.shields.io/github/workflow/status/omgovich/colord/Node.js%20CI/master.svg?labelColor=dd3a5e\u0026color=6ead0a\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/omgovich/colord\"\u003e\n    \u003cimg alt=\"coverage\" src=\"https://img.shields.io/codecov/c/github/omgovich/colord.svg?labelColor=dd3a5e\u0026color=6ead0a\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/colord\"\u003e\n    \u003cimg alt=\"no dependencies\" src=\"https://badgen.net/bundlephobia/dependency-count/colord?labelColor=dd3a5e\u0026color=6ead0a\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/colord\"\u003e\n    \u003cimg alt=\"types included\" src=\"https://badgen.net/npm/types/colord?labelColor=dd3a5e\u0026color=6ead0a\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003eColord\u003c/strong\u003e is a tiny yet powerful tool for high-performance color manipulations and conversions.\n\u003c/div\u003e\n\n## Features\n\n- 📦 **Small**: Just **1.7 KB** gzipped ([3x+ lighter](#benchmarks) than **color** and **tinycolor2**)\n- 🚀 **Fast**: [3x+ faster](#benchmarks) than **color** and **tinycolor2**\n- 😍 **Simple**: Chainable API and familiar patterns\n- 💪 **Immutable**: No need to worry about data mutations\n- 🛡 **Bulletproof**: Written in strict TypeScript and has 100% test coverage\n- 🗂 **Typed**: Ships with [types included](#types)\n- 🏗 **Extendable**: Built-in [plugin system](#plugins) to add new functionality\n- 📚 **CSS-compliant**: Strictly follows CSS Color Level specifications\n- 👫 **Works everywhere**: Supports all browsers and Node.js\n- 💨 **Dependency-free**\n\n\u003cdiv\u003e\u003cimg src=\"assets/divider.png\" width=\"838\" alt=\"---\" /\u003e\u003c/div\u003e\n\n## Benchmarks\n\n| Library                       | \u003cnobr\u003eOperations/sec\u003c/nobr\u003e   | Size\u003cbr /\u003e (minified)                                                                                                 | Size\u003cbr /\u003e (gzipped)                                                                                                     | Dependencies                                                                                                                         | Type declarations                                                                                                |\n| ----------------------------- | ----------------------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |\n| \u003cnobr\u003e\u003cb\u003ecolord 👑\u003c/b\u003e\u003c/nobr\u003e | \u003cnobr\u003e\u003cb\u003e3,524,989\u003c/b\u003e\u003c/nobr\u003e | [![](https://badgen.net/bundlephobia/min/colord?color=6ead0a\u0026label=)](https://bundlephobia.com/result?p=colord)       | [![](https://badgen.net/bundlephobia/minzip/colord?color=6ead0a\u0026label=)](https://bundlephobia.com/result?p=colord)       | [![](https://badgen.net/bundlephobia/dependency-count/colord?color=6ead0a\u0026label=)](https://bundlephobia.com/result?p=colord)         | [![](https://badgen.net/npm/types/colord?color=6ead0a\u0026label=)](https://bundlephobia.com/result?p=colord)         |\n| color                         | 744,263                       | [![](https://badgen.net/bundlephobia/min/color?color=red\u0026label=)](https://bundlephobia.com/result?p=color)            | [![](https://badgen.net/bundlephobia/minzip/color?color=red\u0026label=)](https://bundlephobia.com/result?p=color)            | [![](https://badgen.net/bundlephobia/dependency-count/color?color=red\u0026label=)](https://bundlephobia.com/result?p=color)              | [![](https://badgen.net/npm/types/color?color=e6591d\u0026label=)](https://bundlephobia.com/result?p=color)           |\n| tinycolor2                    | 971,312                       | [![](https://badgen.net/bundlephobia/min/tinycolor2?color=red\u0026label=)](https://bundlephobia.com/result?p=tinycolor2)  | [![](https://badgen.net/bundlephobia/minzip/tinycolor2?color=red\u0026label=)](https://bundlephobia.com/result?p=tinycolor2)  | [![](https://badgen.net/bundlephobia/dependency-count/tinycolor2?color=6ead0a\u0026label=)](https://bundlephobia.com/result?p=tinycolor2) | [![](https://badgen.net/npm/types/tinycolor2?color=e6591d\u0026label=)](https://bundlephobia.com/result?p=tinycolor2) |\n| ac-colors                     | 660,722                       | [![](https://badgen.net/bundlephobia/min/ac-colors?color=e6591d\u0026label=)](https://bundlephobia.com/result?p=ac-colors) | [![](https://badgen.net/bundlephobia/minzip/ac-colors?color=e6591d\u0026label=)](https://bundlephobia.com/result?p=ac-colors) | [![](https://badgen.net/bundlephobia/dependency-count/ac-colors?color=6ead0a\u0026label=)](https://bundlephobia.com/result?p=ac-colors)   | [![](https://badgen.net/npm/types/ac-colors?color=red\u0026label=)](https://bundlephobia.com/result?p=ac-colors)      |\n| chroma-js                     | 962,967                       | [![](https://badgen.net/bundlephobia/min/chroma-js?color=red\u0026label=)](https://bundlephobia.com/result?p=chroma-js)    | [![](https://badgen.net/bundlephobia/minzip/chroma-js?color=red\u0026label=)](https://bundlephobia.com/result?p=chroma-js)    | [![](https://badgen.net/bundlephobia/dependency-count/chroma-js?color=red\u0026label=)](https://bundlephobia.com/result?p=chroma-js)      | [![](https://badgen.net/npm/types/chroma-js?color=e6591d\u0026label=)](https://bundlephobia.com/result?p=chroma-js)   |\n\nThe performance results were generated on a MBP 2019, 2,6 GHz Intel Core i7 by running `npm run benchmark` in the library folder. See [tests/benchmark.ts](https://github.com/omgovich/colord/blob/master/tests/benchmark.ts).\n\n\u003cdiv\u003e\u003cimg src=\"assets/divider.png\" width=\"838\" alt=\"---\" /\u003e\u003c/div\u003e\n\n## Getting Started\n\n```\nnpm i colord\n```\n\n```js\nimport { colord } from \"colord\";\n\ncolord(\"#ff0000\").grayscale().alpha(0.25).toRgbString(); // \"rgba(128, 128, 128, 0.25)\"\ncolord(\"rgb(192, 192, 192)\").isLight(); // true\ncolord(\"hsl(0, 50%, 50%)\").darken(0.25).toHex(); // \"#602020\"\n```\n\n\u003cdiv\u003e\u003cimg src=\"assets/divider.png\" width=\"838\" alt=\"---\" /\u003e\u003c/div\u003e\n\n## Supported Color Models\n\n- Hexadecimal strings (including 3, 4 and 8 digit notations)\n- RGB strings and objects\n- HSL strings and objects\n- HSV objects\n- Color names ([via plugin](#plugins))\n- HWB objects and strings ([via plugin](#plugins))\n- CMYK objects and strings ([via plugin](#plugins))\n- LCH objects and strings ([via plugin](#plugins))\n- LAB objects ([via plugin](#plugins))\n- XYZ objects ([via plugin](#plugins))\n\n\u003cdiv\u003e\u003cimg src=\"assets/divider.png\" width=\"838\" alt=\"---\" /\u003e\u003c/div\u003e\n\n## API\n\n### Color parsing\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003ecolord(input)\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nParses the given input and creates a new Colord instance. String parsing strictly conforms to [CSS Color Level Specifications](https://www.w3.org/TR/css-color-4/#color-type).\n\n```js\nimport { colord } from \"colord\";\n\n// String input examples\ncolord(\"#FFF\");\ncolord(\"#ffffff\");\ncolord(\"#ffffffff\");\ncolord(\"rgb(255, 255, 255)\");\ncolord(\"rgba(255, 255, 255, 0.5)\");\ncolord(\"rgba(100% 100% 100% / 50%)\");\ncolord(\"hsl(90, 100%, 100%)\");\ncolord(\"hsla(90, 100%, 100%, 0.5)\");\ncolord(\"hsla(90deg 100% 100% / 50%)\");\ncolord(\"tomato\"); // requires \"names\" plugin\n\n// Object input examples\ncolord({ r: 255, g: 255, b: 255 });\ncolord({ r: 255, g: 255, b: 255, a: 1 });\ncolord({ h: 360, s: 100, l: 100 });\ncolord({ h: 360, s: 100, l: 100, a: 1 });\ncolord({ h: 360, s: 100, v: 100 });\ncolord({ h: 360, s: 100, v: 100, a: 1 });\n```\n\nCheck out the [\"Plugins\"](#plugins) section for more input format examples.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003egetFormat(input)\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nReturns a color model name for the input passed to the function. Uses the same parsing system as `colord` function.\n\n```js\nimport { getFormat } from \"colord\";\n\ngetFormat(\"#aabbcc\"); // \"hex\"\ngetFormat({ r: 13, g: 237, b: 162, a: 0.5 }); // \"rgb\"\ngetFormat(\"hsl(180deg, 50%, 50%)\"); // \"hsl\"\ngetFormat(\"WUT?\"); // undefined\n```\n\n\u003c/details\u003e\n\n### Color conversion\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.toHex()\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nReturns the [hexadecimal representation](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb_colors) of a color. When the alpha channel value of the color is less than 1, it outputs `#rrggbbaa` format instead of `#rrggbb`.\n\n```js\ncolord(\"rgb(0, 255, 0)\").toHex(); // \"#00ff00\"\ncolord({ h: 300, s: 100, l: 50 }).toHex(); // \"#ff00ff\"\ncolord({ r: 255, g: 255, b: 255, a: 0 }).toHex(); // \"#ffffff00\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.toRgb()\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\n```js\ncolord(\"#ff0000\").toRgb(); // { r: 255, g: 0, b: 0, a: 1 }\ncolord({ h: 180, s: 100, l: 50, a: 0.5 }).toRgb(); // { r: 0, g: 255, b: 255, a: 0.5 }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.toRgbString()\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\n```js\ncolord(\"#ff0000\").toRgbString(); // \"rgb(255, 0, 0)\"\ncolord({ h: 180, s: 100, l: 50, a: 0.5 }).toRgbString(); // \"rgba(0, 255, 255, 0.5)\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.toHsl()\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nConverts a color to [HSL color space](https://en.wikipedia.org/wiki/HSL_and_HSV) and returns an object.\n\n```js\ncolord(\"#ffff00\").toHsl(); // { h: 60, s: 100, l: 50, a: 1 }\ncolord(\"rgba(0, 0, 255, 0.5) \").toHsl(); // { h: 240, s: 100, l: 50, a: 0.5 }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.toHslString()\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nConverts a color to [HSL color space](https://en.wikipedia.org/wiki/HSL_and_HSV) and expresses it through the [functional notation](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsl_colors).\n\n```js\ncolord(\"#ffff00\").toHslString(); // \"hsl(60, 100%, 50%)\"\ncolord(\"rgba(0, 0, 255, 0.5)\").toHslString(); // \"hsla(240, 100%, 50%, 0.5)\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.toHsv()\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nConverts a color to [HSV color space](https://en.wikipedia.org/wiki/HSL_and_HSV) and returns an object.\n\n```js\ncolord(\"#ffff00\").toHsv(); // { h: 60, s: 100, v: 100, a: 1 }\ncolord(\"rgba(0, 255, 255, 0.5) \").toHsv(); // { h: 180, s: 100, v: 100, a: 1 }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.toName(options?)\u003c/code\u003e\u003c/b\u003e (\u003cb\u003enames\u003c/b\u003e plugin)\u003c/summary\u003e\n\nConverts a color to a [CSS keyword](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#color_keywords). Returns `undefined` if the color is not specified in the specs.\n\n```js\nimport { colord, extend } from \"colord\";\nimport namesPlugin from \"colord/plugins/names\";\n\nextend([namesPlugin]);\n\ncolord(\"#ff6347\").toName(); // \"tomato\"\ncolord(\"#00ffff\").toName(); // \"cyan\"\ncolord(\"rgba(0, 0, 0, 0)\").toName(); // \"transparent\"\n\ncolord(\"#fe0000\").toName(); // undefined (the color is not specified in CSS specs)\ncolord(\"#fe0000\").toName({ closest: true }); // \"red\" (closest color available)\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.toCmyk()\u003c/code\u003e\u003c/b\u003e (\u003cb\u003ecmyk\u003c/b\u003e plugin)\u003c/summary\u003e\n\nConverts a color to [CMYK](https://en.wikipedia.org/wiki/CMYK_color_model) color space.\n\n```js\nimport { colord, extend } from \"colord\";\nimport cmykPlugin from \"colord/plugins/cmyk\";\n\nextend([cmykPlugin]);\n\ncolord(\"#ffffff\").toCmyk(); // { c: 0, m: 0, y: 0, k: 0, a: 1 }\ncolord(\"#555aaa\").toCmyk(); // { c: 50, m: 47, y: 0, k: 33, a: 1 }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.toCmykString()\u003c/code\u003e\u003c/b\u003e (\u003cb\u003ecmyk\u003c/b\u003e plugin)\u003c/summary\u003e\n\nConverts a color to color space.\n\nConverts a color to [CMYK](https://en.wikipedia.org/wiki/CMYK_color_model) color space and expresses it through the [functional notation](https://www.w3.org/TR/css-color-4/#device-cmyk)\n\n```js\nimport { colord, extend } from \"colord\";\nimport cmykPlugin from \"colord/plugins/cmyk\";\n\nextend([cmykPlugin]);\n\ncolord(\"#99ffff\").toCmykString(); // \"device-cmyk(40% 0% 0% 0%)\"\ncolord(\"#00336680\").toCmykString(); // \"device-cmyk(100% 50% 0% 60% / 0.5)\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.toHwb()\u003c/code\u003e\u003c/b\u003e (\u003cb\u003ehwb\u003c/b\u003e plugin)\u003c/summary\u003e\n\nConverts a color to [HWB (Hue-Whiteness-Blackness)](https://en.wikipedia.org/wiki/HWB_color_model) color space.\n\n```js\nimport { colord, extend } from \"colord\";\nimport hwbPlugin from \"colord/plugins/hwb\";\n\nextend([hwbPlugin]);\n\ncolord(\"#ffffff\").toHwb(); // { h: 0, w: 100, b: 0, a: 1 }\ncolord(\"#555aaa\").toHwb(); // { h: 236, w: 33, b: 33, a: 1 }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.toHwbString()\u003c/code\u003e\u003c/b\u003e (\u003cb\u003ehwb\u003c/b\u003e plugin)\u003c/summary\u003e\n\nConverts a color to [HWB (Hue-Whiteness-Blackness)](https://en.wikipedia.org/wiki/HWB_color_model) color space and expresses it through the [functional notation](https://www.w3.org/TR/css-color-4/#the-hwb-notation).\n\n```js\nimport { colord, extend } from \"colord\";\nimport hwbPlugin from \"colord/plugins/hwb\";\n\nextend([hwbPlugin]);\n\ncolord(\"#999966\").toHwbString(); // \"hwb(60 40% 40%)\"\ncolord(\"#99ffff\").toHwbString(); // \"hwb(180 60% 0%)\"\ncolord(\"#003366\").alpha(0.5).toHwbString(); // \"hwb(210 0% 60% / 0.5)\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.toLab()\u003c/code\u003e\u003c/b\u003e (\u003cb\u003elab\u003c/b\u003e plugin)\u003c/summary\u003e\n\nConverts a color to [CIE LAB](https://en.wikipedia.org/wiki/CIELAB_color_space) color space. The conversion logic is ported from [CSS Color Module Level 4 Specification](https://www.w3.org/TR/css-color-4/#color-conversion-code).\n\n```js\nimport { colord, extend } from \"colord\";\nimport labPlugin from \"colord/plugins/lab\";\n\nextend([labPlugin]);\n\ncolord(\"#ffffff\").toLab(); // { l: 100, a: 0, b: 0, alpha: 1 }\ncolord(\"#33221180\").toLab(); // { l: 14.89, a: 5.77, b: 14.41, alpha: 0.5 }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.toLch()\u003c/code\u003e\u003c/b\u003e (\u003cb\u003elch\u003c/b\u003e plugin)\u003c/summary\u003e\n\nConverts a color to [CIE LCH](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/) color space. The conversion logic is ported from [CSS Color Module Level 4 Specification](https://www.w3.org/TR/css-color-4/#color-conversion-code).\n\n```js\nimport { colord, extend } from \"colord\";\nimport lchPlugin from \"colord/plugins/lch\";\n\nextend([lchPlugin]);\n\ncolord(\"#ffffff\").toLch(); // { l: 100, c: 0, h: 0, a: 1 }\ncolord(\"#213b0b\").toLch(); // { l: 21.85, c: 31.95, h: 127.77, a: 1 }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.toLchString()\u003c/code\u003e\u003c/b\u003e (\u003cb\u003elch\u003c/b\u003e plugin)\u003c/summary\u003e\n\nConverts a color to [CIE LCH](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/) color space and expresses it through the [functional notation](https://www.w3.org/TR/css-color-4/#specifying-lab-lch).\n\n```js\nimport { colord, extend } from \"colord\";\nimport lchPlugin from \"colord/plugins/lch\";\n\nextend([lchPlugin]);\n\ncolord(\"#ffffff\").toLchString(); // \"lch(100% 0 0)\"\ncolord(\"#213b0b\").alpha(0.5).toLchString(); // \"lch(21.85% 31.95 127.77 / 0.5)\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.toXyz()\u003c/code\u003e\u003c/b\u003e (\u003cb\u003exyz\u003c/b\u003e plugin)\u003c/summary\u003e\n\nConverts a color to [CIE XYZ](https://www.sttmedia.com/colormodel-xyz) color space. The conversion logic is ported from [CSS Color Module Level 4 Specification](https://www.w3.org/TR/css-color-4/#color-conversion-code).\n\n```js\nimport { colord, extend } from \"colord\";\nimport xyzPlugin from \"colord/plugins/xyz\";\n\nextend([xyzPlugin]);\n\ncolord(\"#ffffff\").toXyz(); // { x: 95.047, y: 100, z: 108.883, a: 1 }\n```\n\n\u003c/details\u003e\n\n### Color manipulation\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.alpha(value)\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nChanges the alpha channel value and returns a new `Colord` instance.\n\n```js\ncolord(\"rgb(0, 0, 0)\").alpha(0.5).toRgbString(); // \"rgba(0, 0, 0, 0.5)\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.invert()\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nCreates a new `Colord` instance containing an inverted (opposite) version of the color.\n\n```js\ncolord(\"#ffffff\").invert().toHex(); // \"#000000\"\ncolord(\"#aabbcc\").invert().toHex(); // \"#554433\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.saturate(amount = 0.1)\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nIncreases the [HSL saturation](https://en.wikipedia.org/wiki/HSL_and_HSV) of a color by the given amount.\n\n```js\ncolord(\"#bf4040\").saturate(0.25).toHex(); // \"#df2020\"\ncolord(\"hsl(0, 50%, 50%)\").saturate(0.5).toHslString(); // \"hsl(0, 100%, 50%)\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.desaturate(amount = 0.1)\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nDecreases the [HSL saturation](https://en.wikipedia.org/wiki/HSL_and_HSV) of a color by the given amount.\n\n```js\ncolord(\"#df2020\").saturate(0.25).toHex(); // \"#bf4040\"\ncolord(\"hsl(0, 100%, 50%)\").saturate(0.5).toHslString(); // \"hsl(0, 50%, 50%)\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.grayscale()\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nMakes a gray color with the same lightness as a source color. Same as calling `desaturate(1)`.\n\n```js\ncolord(\"#bf4040\").grayscale().toHex(); // \"#808080\"\ncolord(\"hsl(0, 100%, 50%)\").grayscale().toHslString(); // \"hsl(0, 0%, 50%)\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.lighten(amount = 0.1)\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nIncreases the [HSL lightness](https://en.wikipedia.org/wiki/HSL_and_HSV) of a color by the given amount.\n\n```js\ncolord(\"#000000\").lighten(0.5).toHex(); // \"#808080\"\ncolord(\"#223344\").lighten(0.3).toHex(); // \"#5580aa\"\ncolord(\"hsl(0, 50%, 50%)\").lighten(0.5).toHslString(); // \"hsl(0, 50%, 100%)\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.darken(amount = 0.1)\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nDecreases the [HSL lightness](https://en.wikipedia.org/wiki/HSL_and_HSV) of a color by the given amount.\n\n```js\ncolord(\"#ffffff\").darken(0.5).toHex(); // \"#808080\"\ncolord(\"#5580aa\").darken(0.3).toHex(); // \"#223344\"\ncolord(\"hsl(0, 50%, 100%)\").lighten(0.5).toHslString(); // \"hsl(0, 50%, 50%)\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.hue(value)\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nChanges the hue value and returns a new `Colord` instance.\n\n```js\ncolord(\"hsl(90, 50%, 50%)\").hue(180).toHslString(); // \"hsl(180, 50%, 50%)\"\ncolord(\"hsl(90, 50%, 50%)\").hue(370).toHslString(); // \"hsl(10, 50%, 50%)\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.rotate(amount = 15)\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nIncreases the [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) hue value of a color by the given amount.\n\n```js\ncolord(\"hsl(90, 50%, 50%)\").rotate(90).toHslString(); // \"hsl(180, 50%, 50%)\"\ncolord(\"hsl(90, 50%, 50%)\").rotate(-180).toHslString(); // \"hsl(270, 50%, 50%)\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.mix(color2, ratio = 0.5)\u003c/code\u003e\u003c/b\u003e (\u003cb\u003emix\u003c/b\u003e plugin)\u003c/summary\u003e\n\nProduces a mixture of two colors and returns the result of mixing them (new Colord instance).\n\nIn contrast to other libraries that perform RGB values mixing, Colord mixes colors through [LAB color space](https://en.wikipedia.org/wiki/CIELAB_color_space). This approach produces better results and doesn't have the drawbacks the legacy way has.\n\n→ [Online demo](https://3cg7o.csb.app/)\n\n```js\nimport { colord, extend } from \"colord\";\nimport mixPlugin from \"colord/plugins/mix\";\n\nextend([mixPlugin]);\n\ncolord(\"#ffffff\").mix(\"#000000\").toHex(); // \"#777777\"\ncolord(\"#800080\").mix(\"#dda0dd\").toHex(); // \"#af5cae\"\ncolord(\"#cd853f\").mix(\"#eee8aa\", 0.6).toHex(); // \"#e3c07e\"\ncolord(\"#008080\").mix(\"#808000\", 0.35).toHex(); // \"#50805d\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.tints(count = 5)\u003c/code\u003e\u003c/b\u003e (\u003cb\u003emix\u003c/b\u003e plugin)\u003c/summary\u003e\n\nProvides functionality to generate [tints](https://en.wikipedia.org/wiki/Tints_and_shades) of a color. Returns an array of `Colord` instances, including the original color.\n\n```js\nimport { colord, extend } from \"colord\";\nimport mixPlugin from \"colord/plugins/mix\";\n\nextend([mixPlugin]);\n\nconst color = colord(\"#ff0000\");\ncolor.tints(3).map((c) =\u003e c.toHex()); // [\"#ff0000\", \"#ff9f80\", \"#ffffff\"];\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.shades(count = 5)\u003c/code\u003e\u003c/b\u003e (\u003cb\u003emix\u003c/b\u003e plugin)\u003c/summary\u003e\n\nProvides functionality to generate [shades](https://en.wikipedia.org/wiki/Tints_and_shades) of a color. Returns an array of `Colord` instances, including the original color.\n\n```js\nimport { colord, extend } from \"colord\";\nimport mixPlugin from \"colord/plugins/mix\";\n\nextend([mixPlugin]);\n\nconst color = colord(\"#ff0000\");\ncolor.shades(3).map((c) =\u003e c.toHex()); // [\"#ff0000\", \"#7a1b0b\", \"#000000\"];\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.tones(count = 5)\u003c/code\u003e\u003c/b\u003e (\u003cb\u003emix\u003c/b\u003e plugin)\u003c/summary\u003e\n\nProvides functionality to generate [tones](https://en.wikipedia.org/wiki/Tints_and_shades) of a color. Returns an array of `Colord` instances, including the original color.\n\n```js\nimport { colord, extend } from \"colord\";\nimport mixPlugin from \"colord/plugins/mix\";\n\nextend([mixPlugin]);\n\nconst color = colord(\"#ff0000\");\ncolor.tones(3).map((c) =\u003e c.toHex()); // [\"#ff0000\", \"#c86147\", \"#808080\"];\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.harmonies(type = \"complementary\")\u003c/code\u003e\u003c/b\u003e (\u003cb\u003eharmonies\u003c/b\u003e plugin)\u003c/summary\u003e\n\nProvides functionality to generate [harmony colors](\u003chttps://en.wikipedia.org/wiki/Harmony_(color)\u003e). Returns an array of `Colord` instances.\n\n```js\nimport { colord, extend } from \"colord\";\nimport harmoniesPlugin from \"colord/plugins/harmonies\";\n\nextend([harmoniesPlugin]);\n\nconst color = colord(\"#ff0000\");\ncolor.harmonies(\"analogous\").map((c) =\u003e c.toHex()); // [\"#ff0080\", \"#ff0000\", \"#ff8000\"]\ncolor.harmonies(\"complementary\").map((c) =\u003e c.toHex()); // [\"#ff0000\", \"#00ffff\"]\ncolor.harmonies(\"double-split-complementary\").map((c) =\u003e c.toHex()); // [\"#ff0080\", \"#ff0000\", \"#ff8000\", \"#00ff80\", \"#0080ff\"]\ncolor.harmonies(\"rectangle\").map((c) =\u003e c.toHex()); // [\"#ff0000\", \"#ffff00\", \"#00ffff\", \"#0000ff\"]\ncolor.harmonies(\"split-complementary\").map((c) =\u003e c.toHex()); // [\"#ff0000\", \"#00ff80\", \"#0080ff\"]\ncolor.harmonies(\"tetradic\").map((c) =\u003e c.toHex()); // [\"#ff0000\", \"#80ff00\", \"#00ffff\", \"#8000ff\"]\ncolor.harmonies(\"triadic\").map((c) =\u003e c.toHex()); // [\"#ff0000\", \"#00ff00\", \"#0000ff\"]\n```\n\n\u003c/details\u003e\n\n### Color analysis\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.isValid()\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nReturns a boolean indicating whether or not an input has been parsed successfully.\nNote: If parsing is unsuccessful, Colord defaults to black (does not throws an error).\n\n```js\ncolord(\"#ffffff\").isValid(); // true\ncolord(\"#wwuutt\").isValid(); // false\ncolord(\"abracadabra\").isValid(); // false\ncolord({ r: 0, g: 0, b: 0 }).isValid(); // true\ncolord({ r: 0, g: 0, v: 0 }).isValid(); // false\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.isEqual(color2)\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nDetermines whether two values are the same color.\n\n```js\ncolord(\"#000000\").isEqual(\"rgb(0, 0, 0)\"); // true\ncolord(\"#000000\").isEqual(\"rgb(255, 255, 255)\"); // false\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.alpha()\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\n```js\ncolord(\"#ffffff\").alpha(); // 1\ncolord(\"rgba(50, 100, 150, 0.5)\").alpha(); // 0.5\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.hue()\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\n```js\ncolord(\"hsl(90, 50%, 50%)\").hue(); // 90\ncolord(\"hsl(-10, 50%, 50%)\").hue(); // 350\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.brightness()\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nReturns the brightness of a color (from 0 to 1). The calculation logic is modified from [Web Content Accessibility Guidelines](https://www.w3.org/TR/AERT/#color-contrast).\n\n```js\ncolord(\"#000000\").brightness(); // 0\ncolord(\"#808080\").brightness(); // 0.5\ncolord(\"#ffffff\").brightness(); // 1\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.isLight()\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nSame as calling `brightness() \u003e= 0.5`.\n\n```js\ncolord(\"#111111\").isLight(); // false\ncolord(\"#aabbcc\").isLight(); // true\ncolord(\"#ffffff\").isLight(); // true\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.isDark()\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nSame as calling `brightness() \u003c 0.5`.\n\n```js\ncolord(\"#111111\").isDark(); // true\ncolord(\"#aabbcc\").isDark(); // false\ncolord(\"#ffffff\").isDark(); // false\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.luminance()\u003c/code\u003e\u003c/b\u003e (\u003cb\u003ea11y\u003c/b\u003e plugin)\u003c/summary\u003e\n\nReturns the relative luminance of a color, normalized to 0 for darkest black and 1 for lightest white as defined by [WCAG 2.0](https://www.w3.org/TR/WCAG20/#relativeluminancedef).\n\n```js\ncolord(\"#000000\").luminance(); // 0\ncolord(\"#808080\").luminance(); // 0.22\ncolord(\"#ccddee\").luminance(); // 0.71\ncolord(\"#ffffff\").luminance(); // 1\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.contrast(color2 = \"#FFF\")\u003c/code\u003e\u003c/b\u003e (\u003cb\u003ea11y\u003c/b\u003e plugin)\u003c/summary\u003e\n\nCalculates a contrast ratio for a color pair. This luminance difference is expressed as a ratio ranging from 1 (e.g. white on white) to 21 (e.g., black on a white). [WCAG Accessibility Level AA requires](https://webaim.org/articles/contrast/) a ratio of at least 4.5 for normal text and 3 for large text.\n\n```js\ncolord(\"#000000\").contrast(); // 21 (black on white)\ncolord(\"#ffffff\").contrast(\"#000000\"); // 21 (white on black)\ncolord(\"#777777\").contrast(); // 4.47 (gray on white)\ncolord(\"#ff0000\").contrast(); // 3.99 (red on white)\ncolord(\"#0000ff\").contrast(\"#ff000\"); // 2.14 (blue on red)\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.isReadable(color2 = \"#FFF\", options?)\u003c/code\u003e\u003c/b\u003e (\u003cb\u003ea11y\u003c/b\u003e plugin)\u003c/summary\u003e\n\nChecks that a background and text color pair is readable according to [WCAG 2.0 Contrast and Color Requirements](https://webaim.org/articles/contrast/).\n\n```js\ncolord(\"#000000\").isReadable(); // true (normal black text on white bg conforms to WCAG AA)\ncolord(\"#777777\").isReadable(); // false (normal gray text on white bg conforms to WCAG AA)\ncolord(\"#ffffff\").isReadable(\"#000000\"); // true (normal white text on black bg conforms to WCAG AA)\ncolord(\"#e60000\").isReadable(\"#ffff47\"); // true (normal red text on yellow bg conforms to WCAG AA)\ncolord(\"#e60000\").isReadable(\"#ffff47\", { level: \"AAA\" }); // false (normal red text on yellow bg does not conform to WCAG AAA)\ncolord(\"#e60000\").isReadable(\"#ffff47\", { level: \"AAA\", size: \"large\" }); // true (large red text on yellow bg conforms to WCAG AAA)\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.delta(color2 = \"#FFF\")\u003c/code\u003e\u003c/b\u003e (\u003cb\u003elab\u003c/b\u003e plugin)\u003c/summary\u003e\n\nCalculates the perceived color difference between two colors.\nThe difference calculated according to [Delta E2000](https://en.wikipedia.org/wiki/Color_difference#CIEDE2000).\nThe return value is `0` if the colors are equal, `1` if they are entirely different.\n\n```js\ncolord(\"#3296fa\").delta(\"#197dc8\"); // 0.099\ncolord(\"#faf0c8\").delta(\"#ffffff\"); // 0.148\ncolord(\"#afafaf\").delta(\"#b4b4b4\"); // 0.014\ncolord(\"#000000\").delta(\"#ffffff\"); // 1\n```\n\n\u003c/details\u003e\n\n### Color utilities\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003erandom()\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nReturns a new Colord instance with a random color value inside.\n\n```js\nimport { random } from \"colord\";\n\nrandom().toHex(); // \"#01c8ec\"\nrandom().alpha(0.5).toRgb(); // { r: 13, g: 237, b: 162, a: 0.5 }\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003e.minify(options?)\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\nConverts a color to its shortest string representation.\n\n```js\nimport { colord, extend } from \"colord\";\nimport minifyPlugin from \"colord/plugins/minify\";\n\nextend([minifyPlugin]);\n\ncolord(\"black\").minify(); // \"#000\"\ncolord(\"#112233\").minify(); // \"#123\"\ncolord(\"darkgray\").minify(); // \"#a9a9a9\"\ncolord(\"rgba(170,170,170,0.4)\").minify(); // \"hsla(0,0%,67%,.4)\"\ncolord(\"rgba(170,170,170,0.4)\").minify({ alphaHex: true }); // \"#aaa6\"\n```\n\n| Option        | Default | Description                                                  |\n| ------------- | ------- | ------------------------------------------------------------ |\n| `hex`         | `true`  | Enable `#rrggbb` and `#rgb` notations                        |\n| `alphaHex`    | `false` | Enable `#rrggbbaa` and `#rgba` notations                     |\n| `rgb`         | `true`  | Enable `rgb()` and `rgba()` functional notations             |\n| `hsl`         | `true`  | Enable `hsl()` and `hsla()` functional notations             |\n| `name`        | `false` | Enable CSS color keywords. Requires `names` plugin installed |\n| `transparent` | `false` | Enable `\"transparent\"` color keyword                         |\n\n\u003c/details\u003e\n\n\u003cdiv\u003e\u003cimg src=\"assets/divider.png\" width=\"838\" alt=\"---\" /\u003e\u003c/div\u003e\n\n## Plugins\n\n**Colord** has a built-in plugin system that allows new features and functionality to be easily added.\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003ea11y\u003c/code\u003e (Accessibility)\u003c/b\u003e \u003ci\u003e0.38 KB\u003c/i\u003e\u003c/summary\u003e\n\nAdds accessibility and color contrast utilities working according to [Web Content Accessibility Guidelines 2.0](https://www.w3.org/TR/WCAG20/).\n\n```js\nimport { colord, extend } from \"colord\";\nimport a11yPlugin from \"colord/plugins/a11y\";\n\nextend([a11yPlugin]);\n\ncolord(\"#000000\").luminance(); // 0\ncolord(\"#ccddee\").luminance(); // 0.71\ncolord(\"#ffffff\").luminance(); // 1\n\ncolord(\"#000000\").contrast(); // 21 (black on white)\ncolord(\"#ffffff\").contrast(\"#000000\"); // 21 (white on black)\ncolord(\"#0000ff\").contrast(\"#ff000\"); // 2.14 (blue on red)\n\ncolord(\"#000000\").isReadable(); // true (black on white)\ncolord(\"#ffffff\").isReadable(\"#000000\"); // true (white on black)\ncolord(\"#777777\").isReadable(); // false (gray on white)\ncolord(\"#e60000\").isReadable(\"#ffff47\"); // true (normal red text on yellow bg conforms to WCAG AA)\ncolord(\"#e60000\").isReadable(\"#ffff47\", { level: \"AAA\" }); // false (normal red text on yellow bg does not conform to WCAG AAA)\ncolord(\"#e60000\").isReadable(\"#ffff47\", { level: \"AAA\", size: \"large\" }); // true (large red text on yellow bg conforms to WCAG AAA)\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003ecmyk\u003c/code\u003e (CMYK color space)\u003c/b\u003e \u003ci\u003e0.6 KB\u003c/i\u003e\u003c/summary\u003e\n\nAdds support of [CMYK](https://www.sttmedia.com/colormodel-cmyk) color model.\n\n```js\nimport { colord, extend } from \"colord\";\nimport cmykPlugin from \"colord/plugins/cmyk\";\n\nextend([cmykPlugin]);\n\ncolord(\"#ffffff\").toCmyk(); // { c: 0, m: 0, y: 0, k: 0, a: 1 }\ncolord(\"#999966\").toCmykString(); // \"device-cmyk(0% 0% 33% 40%)\"\ncolord({ c: 0, m: 0, y: 0, k: 100, a: 1 }).toHex(); // \"#000000\"\ncolord(\"device-cmyk(0% 61% 72% 0% / 50%)\").toHex(); // \"#ff634780\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003eharmonies\u003c/code\u003e (Color harmonies)\u003c/b\u003e \u003ci\u003e0.15 KB\u003c/i\u003e\u003c/summary\u003e\n\nProvides functionality to generate [harmony colors](\u003chttps://en.wikipedia.org/wiki/Harmony_(color)\u003e).\n\n```js\nimport { colord, extend } from \"colord\";\nimport harmonies from \"colord/plugins/harmonies\";\n\nextend([harmonies]);\n\nconst color = colord(\"#ff0000\");\ncolor.harmonies(\"analogous\").map((c) =\u003e c.toHex()); // [\"#ff0080\", \"#ff0000\", \"#ff8000\"]\ncolor.harmonies(\"complementary\").map((c) =\u003e c.toHex()); // [\"#ff0000\", \"#00ffff\"]\ncolor.harmonies(\"double-split-complementary\").map((c) =\u003e c.toHex()); // [\"#ff0080\", \"#ff0000\", \"#ff8000\", \"#00ff80\", \"#0080ff\"]\ncolor.harmonies(\"rectangle\").map((c) =\u003e c.toHex()); // [\"#ff0000\", \"#ffff00\", \"#00ffff\", \"#0000ff\"]\ncolor.harmonies(\"split-complementary\").map((c) =\u003e c.toHex()); // [\"#ff0000\", \"#00ff80\", \"#0080ff\"]\ncolor.harmonies(\"tetradic\").map((c) =\u003e c.toHex()); // [\"#ff0000\", \"#80ff00\", \"#00ffff\", \"#8000ff\"]\ncolor.harmonies(\"triadic\").map((c) =\u003e c.toHex()); // [\"#ff0000\", \"#00ff00\", \"#0000ff\"]\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003ehwb\u003c/code\u003e (HWB color model)\u003c/b\u003e \u003ci\u003e0.8 KB\u003c/i\u003e\u003c/summary\u003e\n\nAdds support of [Hue-Whiteness-Blackness](https://en.wikipedia.org/wiki/HWB_color_model) color model.\n\n```js\nimport { colord, extend } from \"colord\";\nimport hwbPlugin from \"colord/plugins/hwb\";\n\nextend([hwbPlugin]);\n\ncolord(\"#999966\").toHwb(); // { h: 60, w: 40, b: 40, a: 1 }\ncolord(\"#003366\").toHwbString(); // \"hwb(210 0% 60%)\"\n\ncolord({ h: 60, w: 40, b: 40 }).toHex(); // \"#999966\"\ncolord(\"hwb(210 0% 60% / 50%)\").toHex(); // \"#00336680\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003elab\u003c/code\u003e (CIE LAB color space)\u003c/b\u003e \u003ci\u003e1.4 KB\u003c/i\u003e\u003c/summary\u003e\n\nAdds support of [CIE LAB](https://en.wikipedia.org/wiki/CIELAB_color_space) color model. The conversion logic is ported from [CSS Color Module Level 4 Specification](https://www.w3.org/TR/css-color-4/#color-conversion-code).\n\nAlso plugin provides `.delta` method for [perceived color difference calculations](https://en.wikipedia.org/wiki/Color_difference#CIEDE2000).\n\n```js\nimport { colord, extend } from \"colord\";\nimport labPlugin from \"colord/plugins/lab\";\n\nextend([labPlugin]);\n\ncolord({ l: 53.24, a: 80.09, b: 67.2 }).toHex(); // \"#ff0000\"\ncolord(\"#ffffff\").toLab(); // { l: 100, a: 0, b: 0, alpha: 1 }\n\ncolord(\"#afafaf\").delta(\"#b4b4b4\"); // 0.014\ncolord(\"#000000\").delta(\"#ffffff\"); // 1\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003elch\u003c/code\u003e (CIE LCH color space)\u003c/b\u003e \u003ci\u003e1.3 KB\u003c/i\u003e\u003c/summary\u003e\n\nAdds support of [CIE LCH](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/) color space. The conversion logic is ported from [CSS Color Module Level 4 Specification](https://www.w3.org/TR/css-color-4/#color-conversion-code).\n\n```js\nimport { colord, extend } from \"colord\";\nimport lchPlugin from \"colord/plugins/lch\";\n\nextend([lchPlugin]);\n\ncolord({ l: 100, c: 0, h: 0 }).toHex(); // \"#ffffff\"\ncolord(\"lch(48.25% 30.07 196.38)\").toHex(); // \"#008080\"\n\ncolord(\"#646464\").toLch(); // { l: 42.37, c: 0, h: 0, a: 1 }\ncolord(\"#646464\").alpha(0.5).toLchString(); // \"lch(42.37% 0 0 / 0.5)\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003eminify\u003c/code\u003e (Color string minification)\u003c/b\u003e \u003ci\u003e0.5 KB\u003c/i\u003e\u003c/summary\u003e\n\nA plugin adding color string minification utilities.\n\n```js\nimport { colord, extend } from \"colord\";\nimport minifyPlugin from \"colord/plugins/minify\";\n\nextend([minifyPlugin]);\n\ncolord(\"black\").minify(); // \"#000\"\ncolord(\"#112233\").minify(); // \"#123\"\ncolord(\"darkgray\").minify(); // \"#a9a9a9\"\ncolord(\"rgba(170,170,170,0.4)\").minify(); // \"hsla(0,0%,67%,.4)\"\ncolord(\"rgba(170,170,170,0.4)\").minify({ alphaHex: true }); // \"#aaa6\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003emix\u003c/code\u003e (Color mixing)\u003c/b\u003e \u003ci\u003e0.96 KB\u003c/i\u003e\u003c/summary\u003e\n\nA plugin adding color mixing utilities.\n\nIn contrast to other libraries that perform RGB values mixing, Colord mixes colors through [LAB color space](https://en.wikipedia.org/wiki/CIELAB_color_space). This approach produces better results and doesn't have the drawbacks the legacy way has.\n\n→ [Online demo](https://3cg7o.csb.app/)\n\n```js\nimport { colord, extend } from \"colord\";\nimport mixPlugin from \"colord/plugins/mix\";\n\nextend([mixPlugin]);\n\ncolord(\"#ffffff\").mix(\"#000000\").toHex(); // \"#777777\"\ncolord(\"#800080\").mix(\"#dda0dd\").toHex(); // \"#af5cae\"\ncolord(\"#cd853f\").mix(\"#eee8aa\", 0.6).toHex(); // \"#e3c07e\"\ncolord(\"#008080\").mix(\"#808000\", 0.35).toHex(); // \"#50805d\"\n```\n\nAlso, the plugin provides special mixtures such as [tints, shades, and tones](https://en.wikipedia.org/wiki/Tints_and_shades):\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Tint-tone-shade.svg/320px-Tint-tone-shade.svg.png\" alt=\"tints, shades, and tones mixtures\" /\u003e\n\u003c/div\u003e\n\n```js\nconst color = colord(\"#ff0000\");\ncolor.tints(3).map((c) =\u003e c.toHex()); // [\"#ff0000\", \"#ff9f80\", \"#ffffff\"];\ncolor.shades(3).map((c) =\u003e c.toHex()); // [\"#ff0000\", \"#7a1b0b\", \"#000000\"];\ncolor.tones(3).map((c) =\u003e c.toHex()); // [\"#ff0000\", \"#c86147\", \"#808080\"];\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003enames\u003c/code\u003e (CSS color keywords)\u003c/b\u003e \u003ci\u003e1.45 KB\u003c/i\u003e\u003c/summary\u003e\n\nProvides options to convert a color into a [CSS color keyword](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#color_keywords) and vice versa.\n\n```js\nimport { colord, extend } from \"colord\";\nimport namesPlugin from \"colord/plugins/names\";\n\nextend([namesPlugin]);\n\ncolord(\"tomato\").toHex(); // \"#ff6347\"\ncolord(\"#00ffff\").toName(); // \"cyan\"\ncolord(\"rgba(0, 0, 0, 0)\").toName(); // \"transparent\"\ncolord(\"#fe0000\").toName(); // undefined (the color is not specified in CSS specs)\ncolord(\"#fe0000\").toName({ closest: true }); // \"red\" (closest color)\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ccode\u003exyz\u003c/code\u003e (CIE XYZ color space)\u003c/b\u003e \u003ci\u003e0.7 KB\u003c/i\u003e\u003c/summary\u003e\n\nAdds support of [CIE XYZ](https://www.sttmedia.com/colormodel-xyz) color model. The conversion logic is ported from [CSS Color Module Level 4 Specification](https://www.w3.org/TR/css-color-4/#color-conversion-code).\n\n```js\nimport { colord, extend } from \"colord\";\nimport xyzPlugin from \"colord/plugins/xyz\";\n\nextend([xyzPlugin]);\n\ncolord(\"#ffffff\").toXyz(); // { x: 95.047, y: 100, z: 108.883, a: 1 }\ncolord({ x: 0, y: 0, z: 0 }).toHex(); // \"#000000\"\n```\n\n\u003c/details\u003e\n\n\u003cdiv\u003e\u003cimg src=\"assets/divider.png\" width=\"838\" alt=\"---\" /\u003e\u003c/div\u003e\n\n## Types\n\n**Colord** is written in strict TypeScript and ships with types in the library itself — no need for any other install. We provide everything you need in one tiny package.\n\nWhile not only typing its own functions and variables, **Colord** can also help you type yours. Depending on the color space you are using, you can also import and use the type that is associated with it.\n\n```ts\nimport { RgbColor, RgbaColor, HslColor, HslaColor, HsvColor, HsvaColor } from \"colord\";\n\nconst foo: HslColor = { h: 0, s: 0, l: 0 };\nconst bar: RgbColor = { r: 0, g: 0, v: 0 }; // ERROR\n```\n\n\u003cdiv\u003e\u003cimg src=\"assets/divider.png\" width=\"838\" alt=\"---\" /\u003e\u003c/div\u003e\n\n## Projects using Colord\n\n- [cssnano](https://github.com/cssnano/cssnano) — the most popular CSS minification tool\n- [Resume.io](https://resume.io/) — online resume builder with over 12,000,000 users worldwide\n- [Leva](https://github.com/pmndrs/leva) — open source extensible GUI panel made for React\n- [Qui Max](https://github.com/Qvant-lab/qui-max) — Vue.js design system and component library\n- and [thousands more](https://github.com/omgovich/colord/network/dependents)...\n\n\u003cdiv\u003e\u003cimg src=\"assets/divider.png\" width=\"838\" alt=\"---\" /\u003e\u003c/div\u003e\n\n## Roadmap\n\n- [x] Parse and convert Hex, RGB(A), HSL(A), HSV(A)\n- [x] Saturate, desaturate, grayscale\n- [x] Trim an input value\n- [x] Clamp input numbers to resolve edge cases (e.g. `rgb(256, -1, 999, 2)`)\n- [x] `brightness`, `isDark`, `isLight`\n- [x] Set and get `alpha`\n- [x] Plugin API\n- [x] 4 and 8 digit Hex\n- [x] `lighten`, `darken`\n- [x] `invert`\n- [x] CSS color names (via plugin)\n- [x] A11y and contrast utils (via plugin)\n- [x] XYZ color space (via plugin)\n- [x] [HWB](https://drafts.csswg.org/css-color/#the-hwb-notation) color space (via plugin)\n- [x] [LAB](https://www.w3.org/TR/css-color-4/#resolving-lab-lch-values) color space (via plugin)\n- [x] [LCH](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/) color space (via plugin)\n- [x] Mix colors (via plugin)\n- [x] CMYK color space (via plugin)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomgovich%2Fcolord","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fomgovich%2Fcolord","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomgovich%2Fcolord/lists"}