{"_id":"@pixi/colord","_rev":"3810905","name":"@pixi/colord","description":"👑 A tiny yet powerful tool for high-performance color manipulations and conversions","dist-tags":{"latest":"2.9.6"},"maintainers":[{"name":"bigtimebuddy","email":"matt@mattkarl.com"},{"name":"zyie","email":""}],"time":{"modified":"2025-06-05T11:13:01.000Z","created":"2023-09-22T08:34:18.005Z","2.9.6":"2023-09-23T08:56:25.681Z","2.9.5":"2023-09-23T00:57:43.747Z","2.9.4":"2023-09-22T08:34:18.005Z"},"users":{},"author":{"name":"Vlad Shilov","email":"omgovich@ya.ru"},"repository":{"type":"git","url":"git+https://github.com/omgovich/colord.git"},"versions":{"2.9.6":{"name":"@pixi/colord","version":"2.9.6","description":"👑 A tiny yet powerful tool for high-performance color manipulations and conversions","keywords":["color","parser","convert","tiny","hex","rgb","hsl","hsv","hwb","lab","lch","xyz","css","color-names","a11y","cmyk","mix","minify","harmonies"],"repository":{"type":"git","url":"git+https://github.com/omgovich/colord.git"},"author":{"name":"Vlad Shilov","email":"omgovich@ya.ru"},"license":"MIT","sideEffects":false,"main":"./index.js","module":"./index.mjs","exports":{".":{"import":{"types":"./index.d.ts","default":"./index.mjs"},"require":{"types":"./index.d.ts","default":"./index.js"}},"./plugins/a11y":{"import":{"types":"./plugins/a11y.d.ts","default":"./plugins/a11y.mjs"},"require":{"types":"./plugins/a11y.d.ts","default":"./plugins/a11y.js"}},"./plugins/cmyk":{"import":{"types":"./plugins/cmyk.d.ts","default":"./plugins/cmyk.mjs"},"require":{"types":"./plugins/cmyk.d.ts","default":"./plugins/cmyk.js"}},"./plugins/harmonies":{"import":{"types":"./plugins/harmonies.d.ts","default":"./plugins/harmonies.mjs"},"require":{"types":"./plugins/harmonies.d.ts","default":"./plugins/harmonies.js"}},"./plugins/hwb":{"import":{"types":"./plugins/hwb.d.ts","default":"./plugins/hwb.mjs"},"require":{"types":"./plugins/hwb.d.ts","default":"./plugins/hwb.js"}},"./plugins/lab":{"import":{"types":"./plugins/lab.d.ts","default":"./plugins/lab.mjs"},"require":{"types":"./plugins/lab.d.ts","default":"./plugins/lab.js"}},"./plugins/lch":{"import":{"types":"./plugins/lch.d.ts","default":"./plugins/lch.mjs"},"require":{"types":"./plugins/lch.d.ts","default":"./plugins/lch.js"}},"./plugins/minify":{"import":{"types":"./plugins/minify.d.ts","default":"./plugins/minify.mjs"},"require":{"types":"./plugins/minify.d.ts","default":"./plugins/minify.js"}},"./plugins/mix":{"import":{"types":"./plugins/mix.d.ts","default":"./plugins/mix.mjs"},"require":{"types":"./plugins/mix.d.ts","default":"./plugins/mix.js"}},"./plugins/names":{"import":{"types":"./plugins/names.d.ts","default":"./plugins/names.mjs"},"require":{"types":"./plugins/names.d.ts","default":"./plugins/names.js"}},"./plugins/xyz":{"import":{"types":"./plugins/xyz.d.ts","default":"./plugins/xyz.mjs"},"require":{"types":"./plugins/xyz.d.ts","default":"./plugins/xyz.js"}},"./package.json":"./package.json"},"types":"index.d.ts","scripts":{"lint":"eslint src/**/*.ts","size":"npm run build && size-limit","check-types":"tsc --noEmit true","test":"jest tests --coverage","benchmark":"tsc --outDir bench --skipLibCheck --esModuleInterop ./tests/benchmark.ts && node ./bench/tests/benchmark.js && rm -rf ./bench","build":"rollup --config","release":"npm run build && cp *.json dist && cp *.md dist && npm publish dist","check-release":"npm run release -- --dry-run"},"dependencies":{},"devDependencies":{"@size-limit/preset-small-lib":"^4.10.1","@types/jest":"^26.0.22","@typescript-eslint/eslint-plugin":"^4.19.0","@typescript-eslint/parser":"^4.19.0","ac-colors":"^1.4.2","benny":"^3.6.15","chroma-js":"^2.1.1","color":"^3.1.3","eslint":"^7.14.0","eslint-config-prettier":"^6.15.0","eslint-plugin-prettier":"^3.1.4","glob":"^7.1.6","jest":"^26.6.3","prettier":"^2.2.0","rollup":"^2.43.1","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","size-limit":"^4.10.1","tinycolor2":"^1.4.2","ts-jest":"^26.5.4","ts-node":"^9.1.1","tslib":"^2.6.2","typescript":"^4.2.3"},"jest":{"verbose":true,"transform":{"^.+\\.ts$":"ts-jest"}},"eslintConfig":{"plugins":["prettier"],"extends":["eslint:recommended","plugin:@typescript-eslint/eslint-recommended","plugin:@typescript-eslint/recommended","plugin:prettier/recommended","prettier/@typescript-eslint"]},"prettier":{"printWidth":100},"size-limit":[{"path":"dist/index.mjs","import":"{ colord }","limit":"2 KB"},{"path":"dist/plugins/a11y.mjs","limit":"0.5 KB"},{"path":"dist/plugins/cmyk.mjs","limit":"1 KB"},{"path":"dist/plugins/harmonies.mjs","limit":"0.5 KB"},{"path":"dist/plugins/hwb.mjs","limit":"1 KB"},{"path":"dist/plugins/lab.mjs","limit":"1.5 KB"},{"path":"dist/plugins/lch.mjs","limit":"1.5 KB"},{"path":"dist/plugins/minify.mjs","limit":"0.6 KB"},{"path":"dist/plugins/mix.mjs","limit":"1 KB"},{"path":"dist/plugins/names.mjs","limit":"1.5 KB"},{"path":"dist/plugins/xyz.mjs","limit":"1 KB"}],"gitHead":"5344fbf77b736f81cd33c21050021bc09bc9dd1d","bugs":{"url":"https://github.com/omgovich/colord/issues"},"homepage":"https://github.com/omgovich/colord#readme","_id":"@pixi/colord@2.9.6","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"shasum":"7e4e7851480da6fd3cef4e331f008d60be7e1204","size":30553,"noattachment":false,"key":"/@pixi/colord/-/@pixi/colord-2.9.6.tgz","tarball":"http://registry.cnpm.dingdandao.com/@pixi/colord/download/@pixi/colord-2.9.6.tgz"},"_npmUser":{"name":"zyie","email":"sean-burns@outlook.com"},"directories":{},"maintainers":[{"name":"bigtimebuddy","email":"matt@mattkarl.com"},{"name":"zyie","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/colord_2.9.6_1695459385518_0.9219957901913123"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2023-09-23T08:56:25.681Z","publish_time":1695459385681,"_source_registry_name":"default","_cnpm_publish_time":1695459385681},"2.9.5":{"name":"@pixi/colord","version":"2.9.5","description":"👑 A tiny yet powerful tool for high-performance color manipulations and conversions","keywords":["color","parser","convert","tiny","hex","rgb","hsl","hsv","hwb","lab","lch","xyz","css","color-names","a11y","cmyk","mix","minify","harmonies"],"repository":{"type":"git","url":"git+https://github.com/omgovich/colord.git"},"author":{"name":"Vlad Shilov","email":"omgovich@ya.ru"},"license":"MIT","sideEffects":false,"main":"./index.js","module":"./index.mjs","exports":{".":{"import":{"default":"./index.mjs","types":"./index.d.ts"},"require":{"default":"./index.js","types":"./index.d.ts"}},"./plugins/a11y":{"import":{"types":"./plugins/a11y.d.ts","default":"./plugins/a11y.mjs"},"require":{"types":"./plugins/a11y.d.ts","default":"./plugins/a11y.js"}},"./plugins/cmyk":{"import":{"types":"./plugins/cmyk.d.ts","default":"./plugins/cmyk.mjs"},"require":{"types":"./plugins/cmyk.d.ts","default":"./plugins/cmyk.js"}},"./plugins/harmonies":{"import":{"types":"./plugins/harmonies.d.ts","default":"./plugins/harmonies.mjs"},"require":{"types":"./plugins/harmonies.d.ts","default":"./plugins/harmonies.js"}},"./plugins/hwb":{"import":{"types":"./plugins/hwb.d.ts","default":"./plugins/hwb.mjs"},"require":{"types":"./plugins/hwb.d.ts","default":"./plugins/hwb.js"}},"./plugins/lab":{"import":{"types":"./plugins/lab.d.ts","default":"./plugins/lab.mjs"},"require":{"types":"./plugins/lab.d.ts","default":"./plugins/lab.js"}},"./plugins/lch":{"import":{"types":"./plugins/lch.d.ts","default":"./plugins/lch.mjs"},"require":{"types":"./plugins/lch.d.ts","default":"./plugins/lch.js"}},"./plugins/minify":{"import":{"types":"./plugins/minify.d.ts","default":"./plugins/minify.mjs"},"require":{"types":"./plugins/minify.d.ts","default":"./plugins/minify.js"}},"./plugins/mix":{"import":{"types":"./plugins/mix.d.ts","default":"./plugins/mix.mjs"},"require":{"types":"./plugins/mix.d.ts","default":"./plugins/mix.js"}},"./plugins/names":{"import":{"types":"./plugins/names.d.ts","default":"./plugins/names.mjs"},"require":{"types":"./plugins/names.d.ts","default":"./plugins/names.js"}},"./plugins/xyz":{"import":{"types":"./plugins/xyz.d.ts","default":"./plugins/xyz.mjs"},"require":{"types":"./plugins/xyz.d.ts","default":"./plugins/xyz.js"}},"./package.json":"./package.json"},"types":"index.d.ts","scripts":{"lint":"eslint src/**/*.ts","size":"npm run build && size-limit","check-types":"tsc --noEmit true","test":"jest tests --coverage","benchmark":"tsc --outDir bench --skipLibCheck --esModuleInterop ./tests/benchmark.ts && node ./bench/tests/benchmark.js && rm -rf ./bench","build":"rollup --config","release":"npm run build && cp *.json dist && cp *.md dist && npm publish dist","check-release":"npm run release -- --dry-run"},"dependencies":{},"devDependencies":{"@size-limit/preset-small-lib":"^4.10.1","@types/jest":"^26.0.22","@typescript-eslint/eslint-plugin":"^4.19.0","@typescript-eslint/parser":"^4.19.0","ac-colors":"^1.4.2","benny":"^3.6.15","chroma-js":"^2.1.1","color":"^3.1.3","eslint":"^7.14.0","eslint-config-prettier":"^6.15.0","eslint-plugin-prettier":"^3.1.4","glob":"^7.1.6","jest":"^26.6.3","prettier":"^2.2.0","rollup":"^2.43.1","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","size-limit":"^4.10.1","tinycolor2":"^1.4.2","ts-jest":"^26.5.4","ts-node":"^9.1.1","tslib":"^2.6.2","typescript":"^4.2.3"},"jest":{"verbose":true,"transform":{"^.+\\.ts$":"ts-jest"}},"eslintConfig":{"plugins":["prettier"],"extends":["eslint:recommended","plugin:@typescript-eslint/eslint-recommended","plugin:@typescript-eslint/recommended","plugin:prettier/recommended","prettier/@typescript-eslint"]},"prettier":{"printWidth":100},"size-limit":[{"path":"dist/index.mjs","import":"{ colord }","limit":"2 KB"},{"path":"dist/plugins/a11y.mjs","limit":"0.5 KB"},{"path":"dist/plugins/cmyk.mjs","limit":"1 KB"},{"path":"dist/plugins/harmonies.mjs","limit":"0.5 KB"},{"path":"dist/plugins/hwb.mjs","limit":"1 KB"},{"path":"dist/plugins/lab.mjs","limit":"1.5 KB"},{"path":"dist/plugins/lch.mjs","limit":"1.5 KB"},{"path":"dist/plugins/minify.mjs","limit":"0.6 KB"},{"path":"dist/plugins/mix.mjs","limit":"1 KB"},{"path":"dist/plugins/names.mjs","limit":"1.5 KB"},{"path":"dist/plugins/xyz.mjs","limit":"1 KB"}],"gitHead":"400a40e956230c802044c916d39463e66edaf70a","bugs":{"url":"https://github.com/omgovich/colord/issues"},"homepage":"https://github.com/omgovich/colord#readme","_id":"@pixi/colord@2.9.5","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"shasum":"303303cfb38245ca86deb236af2282a001f9effd","size":30558,"noattachment":false,"key":"/@pixi/colord/-/@pixi/colord-2.9.5.tgz","tarball":"http://registry.cnpm.dingdandao.com/@pixi/colord/download/@pixi/colord-2.9.5.tgz"},"_npmUser":{"name":"zyie","email":"sean-burns@outlook.com"},"directories":{},"maintainers":[{"name":"bigtimebuddy","email":"matt@mattkarl.com"},{"name":"zyie","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/colord_2.9.5_1695430663571_0.9440388982373702"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2023-09-23T00:57:43.747Z","publish_time":1695430663747,"_source_registry_name":"default","_cnpm_publish_time":1695430663747},"2.9.4":{"name":"@pixi/colord","version":"2.9.4","description":"👑 A tiny yet powerful tool for high-performance color manipulations and conversions","keywords":["color","parser","convert","tiny","hex","rgb","hsl","hsv","hwb","lab","lch","xyz","css","color-names","a11y","cmyk","mix","minify","harmonies"],"repository":{"type":"git","url":"git+https://github.com/omgovich/colord.git"},"author":{"name":"Vlad Shilov","email":"omgovich@ya.ru"},"license":"MIT","sideEffects":false,"main":"./index.js","module":"./index.mjs","exports":{".":{"import":{"default":"./index.mjs","types":"./index.d.ts"},"require":{"default":"./index.js","types":"./index.d.ts"}},"./plugins/a11y":{"import":{"default":"./plugins/a11y.mjs","types":"./plugins/a11y.d.ts"},"require":{"default":"./plugins/a11y.js","types":"./plugins/a11y.d.ts"}},"./plugins/cmyk":{"import":{"default":"./plugins/cmyk.mjs","types":"./plugins/cmyk.d.ts"},"require":{"default":"./plugins/cmyk.js","types":"./plugins/cmyk.d.ts"}},"./plugins/harmonies":{"import":{"default":"./plugins/harmonies.mjs","types":"./plugins/harmonies.d.ts"},"require":{"default":"./plugins/harmonies.js","types":"./plugins/harmonies.d.ts"}},"./plugins/hwb":{"import":{"default":"./plugins/hwb.mjs","types":"./plugins/hwb.d.ts"},"require":{"default":"./plugins/hwb.js","types":"./plugins/hwb.d.ts"}},"./plugins/lab":{"import":{"default":"./plugins/lab.mjs","types":"./plugins/lab.d.ts"},"require":{"default":"./plugins/lab.js","types":"./plugins/lab.d.ts"}},"./plugins/lch":{"import":{"default":"./plugins/lch.mjs","types":"./plugins/lch.d.ts"},"require":{"default":"./plugins/lch.js","types":"./plugins/lch.d.ts"}},"./plugins/minify":{"import":{"default":"./plugins/minify.mjs","types":"./plugins/minify.d.ts"},"require":{"default":"./plugins/minify.js","types":"./plugins/minify.d.ts"}},"./plugins/mix":{"import":{"default":"./plugins/mix.mjs","types":"./plugins/mix.d.ts"},"require":{"default":"./plugins/mix.js","types":"./plugins/mix.d.ts"}},"./plugins/names":{"import":{"default":"./plugins/names.mjs","types":"./plugins/names.d.ts"},"require":{"default":"./plugins/names.js","types":"./plugins/names.d.ts"}},"./plugins/xyz":{"import":{"default":"./plugins/xyz.mjs","types":"./plugins/xyz.d.ts"},"require":{"default":"./plugins/xyz.js","types":"./plugins/xyz.d.ts"}},"./package.json":"./package.json"},"types":"index.d.ts","scripts":{"lint":"eslint src/**/*.ts","size":"npm run build && size-limit","check-types":"tsc --noEmit true","test":"jest tests --coverage","benchmark":"tsc --outDir bench --skipLibCheck --esModuleInterop ./tests/benchmark.ts && node ./bench/tests/benchmark.js && rm -rf ./bench","build":"rm -rf ./dist/* && rollup --config","release":"npm run build && cp *.json dist && cp *.md dist && npm publish dist --access public","check-release":"npm run release -- --dry-run"},"dependencies":{},"devDependencies":{"@size-limit/preset-small-lib":"^4.10.1","@types/jest":"^26.0.22","@typescript-eslint/eslint-plugin":"^4.19.0","@typescript-eslint/parser":"^4.19.0","ac-colors":"^1.4.2","benny":"^3.6.15","chroma-js":"^2.1.1","color":"^3.1.3","eslint":"^7.14.0","eslint-config-prettier":"^6.15.0","eslint-plugin-prettier":"^3.1.4","glob":"^7.1.6","jest":"^26.6.3","prettier":"^2.2.0","rollup":"^2.43.1","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","size-limit":"^4.10.1","tinycolor2":"^1.4.2","ts-jest":"^26.5.4","ts-node":"^9.1.1","tslib":"^2.6.2","typescript":"^4.2.3"},"jest":{"verbose":true,"transform":{"^.+\\.ts$":"ts-jest"}},"eslintConfig":{"plugins":["prettier"],"extends":["eslint:recommended","plugin:@typescript-eslint/eslint-recommended","plugin:@typescript-eslint/recommended","plugin:prettier/recommended","prettier/@typescript-eslint"]},"prettier":{"printWidth":100},"size-limit":[{"path":"dist/index.mjs","import":"{ colord }","limit":"2 KB"},{"path":"dist/plugins/a11y.mjs","limit":"0.5 KB"},{"path":"dist/plugins/cmyk.mjs","limit":"1 KB"},{"path":"dist/plugins/harmonies.mjs","limit":"0.5 KB"},{"path":"dist/plugins/hwb.mjs","limit":"1 KB"},{"path":"dist/plugins/lab.mjs","limit":"1.5 KB"},{"path":"dist/plugins/lch.mjs","limit":"1.5 KB"},{"path":"dist/plugins/minify.mjs","limit":"0.6 KB"},{"path":"dist/plugins/mix.mjs","limit":"1 KB"},{"path":"dist/plugins/names.mjs","limit":"1.5 KB"},{"path":"dist/plugins/xyz.mjs","limit":"1 KB"}],"gitHead":"f5e9dcd8a42cd97e95745b8368f76a4de214b398","bugs":{"url":"https://github.com/omgovich/colord/issues"},"homepage":"https://github.com/omgovich/colord#readme","_id":"@pixi/colord@2.9.4","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"shasum":"3004e17b9f05e0572bb7c7bd252e07c61962a28e","size":31310,"noattachment":false,"key":"/@pixi/colord/-/@pixi/colord-2.9.4.tgz","tarball":"http://registry.cnpm.dingdandao.com/@pixi/colord/download/@pixi/colord-2.9.4.tgz"},"_npmUser":{"name":"zyie","email":"sean-burns@outlook.com"},"directories":{},"maintainers":[{"name":"bigtimebuddy","email":"matt@mattkarl.com"},{"name":"zyie","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/colord_2.9.4_1695371657815_0.21737874521890443"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2023-09-22T08:34:18.005Z","publish_time":1695371658005,"_source_registry_name":"default","_cnpm_publish_time":1695371658005}},"readme":"<div align=\"center\">\n  <a href=\"https://colord.omgovich.ru/\">\n    <img src=\"assets/logo.png\" width=\"280\" height=\"210\" alt=\"colord\" />\n  </a>\n</div>\n\n<div align=\"center\">\n  <a href=\"https://npmjs.org/package/colord\">\n    <img alt=\"npm\" src=\"https://img.shields.io/npm/v/colord.svg?labelColor=dd3a5e&color=6ead0a\" />\n  </a>\n  <a href=\"https://github.com/omgovich/colord/actions\">\n    <img alt=\"build\" src=\"https://img.shields.io/github/workflow/status/omgovich/colord/Node.js%20CI/master.svg?labelColor=dd3a5e&color=6ead0a\" />\n  </a>\n  <a href=\"https://codecov.io/gh/omgovich/colord\">\n    <img alt=\"coverage\" src=\"https://img.shields.io/codecov/c/github/omgovich/colord.svg?labelColor=dd3a5e&color=6ead0a\" />\n  </a>\n  <a href=\"https://npmjs.org/package/colord\">\n    <img alt=\"no dependencies\" src=\"https://badgen.net/bundlephobia/dependency-count/colord?labelColor=dd3a5e&color=6ead0a\" />\n  </a>\n  <a href=\"https://npmjs.org/package/colord\">\n    <img alt=\"types included\" src=\"https://badgen.net/npm/types/colord?labelColor=dd3a5e&color=6ead0a\" />\n  </a>\n</div>\n\n<div align=\"center\">\n  <strong>Colord</strong> is a tiny yet powerful tool for high-performance color manipulations and conversions.\n</div>\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<div><img src=\"assets/divider.png\" width=\"838\" alt=\"---\" /></div>\n\n## Benchmarks\n\n| Library                       | <nobr>Operations/sec</nobr>   | Size<br /> (minified)                                                                                                 | Size<br /> (gzipped)                                                                                                     | Dependencies                                                                                                                         | Type declarations                                                                                                |\n| ----------------------------- | ----------------------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |\n| <nobr><b>colord ????</b></nobr> | <nobr><b>3,524,989</b></nobr> | [![](https://badgen.net/bundlephobia/min/colord?color=6ead0a&label=)](https://bundlephobia.com/result?p=colord)       | [![](https://badgen.net/bundlephobia/minzip/colord?color=6ead0a&label=)](https://bundlephobia.com/result?p=colord)       | [![](https://badgen.net/bundlephobia/dependency-count/colord?color=6ead0a&label=)](https://bundlephobia.com/result?p=colord)         | [![](https://badgen.net/npm/types/colord?color=6ead0a&label=)](https://bundlephobia.com/result?p=colord)         |\n| color                         | 744,263                       | [![](https://badgen.net/bundlephobia/min/color?color=red&label=)](https://bundlephobia.com/result?p=color)            | [![](https://badgen.net/bundlephobia/minzip/color?color=red&label=)](https://bundlephobia.com/result?p=color)            | [![](https://badgen.net/bundlephobia/dependency-count/color?color=red&label=)](https://bundlephobia.com/result?p=color)              | [![](https://badgen.net/npm/types/color?color=e6591d&label=)](https://bundlephobia.com/result?p=color)           |\n| tinycolor2                    | 971,312                       | [![](https://badgen.net/bundlephobia/min/tinycolor2?color=red&label=)](https://bundlephobia.com/result?p=tinycolor2)  | [![](https://badgen.net/bundlephobia/minzip/tinycolor2?color=red&label=)](https://bundlephobia.com/result?p=tinycolor2)  | [![](https://badgen.net/bundlephobia/dependency-count/tinycolor2?color=6ead0a&label=)](https://bundlephobia.com/result?p=tinycolor2) | [![](https://badgen.net/npm/types/tinycolor2?color=e6591d&label=)](https://bundlephobia.com/result?p=tinycolor2) |\n| ac-colors                     | 660,722                       | [![](https://badgen.net/bundlephobia/min/ac-colors?color=e6591d&label=)](https://bundlephobia.com/result?p=ac-colors) | [![](https://badgen.net/bundlephobia/minzip/ac-colors?color=e6591d&label=)](https://bundlephobia.com/result?p=ac-colors) | [![](https://badgen.net/bundlephobia/dependency-count/ac-colors?color=6ead0a&label=)](https://bundlephobia.com/result?p=ac-colors)   | [![](https://badgen.net/npm/types/ac-colors?color=red&label=)](https://bundlephobia.com/result?p=ac-colors)      |\n| chroma-js                     | 962,967                       | [![](https://badgen.net/bundlephobia/min/chroma-js?color=red&label=)](https://bundlephobia.com/result?p=chroma-js)    | [![](https://badgen.net/bundlephobia/minzip/chroma-js?color=red&label=)](https://bundlephobia.com/result?p=chroma-js)    | [![](https://badgen.net/bundlephobia/dependency-count/chroma-js?color=red&label=)](https://bundlephobia.com/result?p=chroma-js)      | [![](https://badgen.net/npm/types/chroma-js?color=e6591d&label=)](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<div><img src=\"assets/divider.png\" width=\"838\" alt=\"---\" /></div>\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<div><img src=\"assets/divider.png\" width=\"838\" alt=\"---\" /></div>\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<div><img src=\"assets/divider.png\" width=\"838\" alt=\"---\" /></div>\n\n## API\n\n### Color parsing\n\n<details>\n  <summary><b><code>colord(input)</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>getFormat(input)</code></b></summary>\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</details>\n\n### Color conversion\n\n<details>\n  <summary><b><code>.toHex()</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.toRgb()</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.toRgbString()</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.toHsl()</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.toHslString()</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.toHsv()</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.toName(options?)</code></b> (<b>names</b> plugin)</summary>\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</details>\n\n<details>\n  <summary><b><code>.toCmyk()</code></b> (<b>cmyk</b> plugin)</summary>\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</details>\n\n<details>\n  <summary><b><code>.toCmykString()</code></b> (<b>cmyk</b> plugin)</summary>\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</details>\n\n<details>\n  <summary><b><code>.toHwb()</code></b> (<b>hwb</b> plugin)</summary>\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</details>\n\n<details>\n  <summary><b><code>.toHwbString()</code></b> (<b>hwb</b> plugin)</summary>\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</details>\n\n<details>\n  <summary><b><code>.toLab()</code></b> (<b>lab</b> plugin)</summary>\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</details>\n\n<details>\n  <summary><b><code>.toLch()</code></b> (<b>lch</b> plugin)</summary>\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</details>\n\n<details>\n  <summary><b><code>.toLchString()</code></b> (<b>lch</b> plugin)</summary>\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</details>\n\n<details>\n  <summary><b><code>.toXyz()</code></b> (<b>xyz</b> plugin)</summary>\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</details>\n\n### Color manipulation\n\n<details>\n  <summary><b><code>.alpha(value)</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.invert()</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.saturate(amount = 0.1)</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.desaturate(amount = 0.1)</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.grayscale()</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.lighten(amount = 0.1)</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.darken(amount = 0.1)</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.hue(value)</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.rotate(amount = 15)</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.mix(color2, ratio = 0.5)</code></b> (<b>mix</b> plugin)</summary>\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</details>\n\n<details>\n  <summary><b><code>.tints(count = 5)</code></b> (<b>mix</b> plugin)</summary>\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) => c.toHex()); // [\"#ff0000\", \"#ff9f80\", \"#ffffff\"];\n```\n\n</details>\n\n<details>\n  <summary><b><code>.shades(count = 5)</code></b> (<b>mix</b> plugin)</summary>\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) => c.toHex()); // [\"#ff0000\", \"#7a1b0b\", \"#000000\"];\n```\n\n</details>\n\n<details>\n  <summary><b><code>.tones(count = 5)</code></b> (<b>mix</b> plugin)</summary>\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) => c.toHex()); // [\"#ff0000\", \"#c86147\", \"#808080\"];\n```\n\n</details>\n\n<details>\n  <summary><b><code>.harmonies(type = \"complementary\")</code></b> (<b>harmonies</b> plugin)</summary>\n\nProvides functionality to generate [harmony colors](<https://en.wikipedia.org/wiki/Harmony_(color)>). 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) => c.toHex()); // [\"#ff0080\", \"#ff0000\", \"#ff8000\"]\ncolor.harmonies(\"complementary\").map((c) => c.toHex()); // [\"#ff0000\", \"#00ffff\"]\ncolor.harmonies(\"double-split-complementary\").map((c) => c.toHex()); // [\"#ff0080\", \"#ff0000\", \"#ff8000\", \"#00ff80\", \"#0080ff\"]\ncolor.harmonies(\"rectangle\").map((c) => c.toHex()); // [\"#ff0000\", \"#ffff00\", \"#00ffff\", \"#0000ff\"]\ncolor.harmonies(\"split-complementary\").map((c) => c.toHex()); // [\"#ff0000\", \"#00ff80\", \"#0080ff\"]\ncolor.harmonies(\"tetradic\").map((c) => c.toHex()); // [\"#ff0000\", \"#80ff00\", \"#00ffff\", \"#8000ff\"]\ncolor.harmonies(\"triadic\").map((c) => c.toHex()); // [\"#ff0000\", \"#00ff00\", \"#0000ff\"]\n```\n\n</details>\n\n### Color analysis\n\n<details>\n  <summary><b><code>.isValid()</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.isEqual(color2)</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.alpha()</code></b></summary>\n\n```js\ncolord(\"#ffffff\").alpha(); // 1\ncolord(\"rgba(50, 100, 150, 0.5)\").alpha(); // 0.5\n```\n\n</details>\n\n<details>\n  <summary><b><code>.hue()</code></b></summary>\n\n```js\ncolord(\"hsl(90, 50%, 50%)\").hue(); // 90\ncolord(\"hsl(-10, 50%, 50%)\").hue(); // 350\n```\n\n</details>\n\n<details>\n  <summary><b><code>.brightness()</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.isLight()</code></b></summary>\n\nSame as calling `brightness() >= 0.5`.\n\n```js\ncolord(\"#111111\").isLight(); // false\ncolord(\"#aabbcc\").isLight(); // true\ncolord(\"#ffffff\").isLight(); // true\n```\n\n</details>\n\n<details>\n  <summary><b><code>.isDark()</code></b></summary>\n\nSame as calling `brightness() < 0.5`.\n\n```js\ncolord(\"#111111\").isDark(); // true\ncolord(\"#aabbcc\").isDark(); // false\ncolord(\"#ffffff\").isDark(); // false\n```\n\n</details>\n\n<details>\n  <summary><b><code>.luminance()</code></b> (<b>a11y</b> plugin)</summary>\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</details>\n\n<details>\n  <summary><b><code>.contrast(color2 = \"#FFF\")</code></b> (<b>a11y</b> plugin)</summary>\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</details>\n\n<details>\n  <summary><b><code>.isReadable(color2 = \"#FFF\", options?)</code></b> (<b>a11y</b> plugin)</summary>\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</details>\n\n<details>\n  <summary><b><code>.delta(color2 = \"#FFF\")</code></b> (<b>lab</b> plugin)</summary>\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</details>\n\n### Color utilities\n\n<details>\n  <summary><b><code>random()</code></b></summary>\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</details>\n\n<details>\n  <summary><b><code>.minify(options?)</code></b></summary>\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</details>\n\n<div><img src=\"assets/divider.png\" width=\"838\" alt=\"---\" /></div>\n\n## Plugins\n\n**Colord** has a built-in plugin system that allows new features and functionality to be easily added.\n\n<details>\n  <summary><b><code>a11y</code> (Accessibility)</b> <i>0.38 KB</i></summary>\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</details>\n\n<details>\n  <summary><b><code>cmyk</code> (CMYK color space)</b> <i>0.6 KB</i></summary>\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</details>\n\n<details>\n  <summary><b><code>harmonies</code> (Color harmonies)</b> <i>0.15 KB</i></summary>\n\nProvides functionality to generate [harmony colors](<https://en.wikipedia.org/wiki/Harmony_(color)>).\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) => c.toHex()); // [\"#ff0080\", \"#ff0000\", \"#ff8000\"]\ncolor.harmonies(\"complementary\").map((c) => c.toHex()); // [\"#ff0000\", \"#00ffff\"]\ncolor.harmonies(\"double-split-complementary\").map((c) => c.toHex()); // [\"#ff0080\", \"#ff0000\", \"#ff8000\", \"#00ff80\", \"#0080ff\"]\ncolor.harmonies(\"rectangle\").map((c) => c.toHex()); // [\"#ff0000\", \"#ffff00\", \"#00ffff\", \"#0000ff\"]\ncolor.harmonies(\"split-complementary\").map((c) => c.toHex()); // [\"#ff0000\", \"#00ff80\", \"#0080ff\"]\ncolor.harmonies(\"tetradic\").map((c) => c.toHex()); // [\"#ff0000\", \"#80ff00\", \"#00ffff\", \"#8000ff\"]\ncolor.harmonies(\"triadic\").map((c) => c.toHex()); // [\"#ff0000\", \"#00ff00\", \"#0000ff\"]\n```\n\n</details>\n\n<details>\n  <summary><b><code>hwb</code> (HWB color model)</b> <i>0.8 KB</i></summary>\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</details>\n\n<details>\n  <summary><b><code>lab</code> (CIE LAB color space)</b> <i>1.4 KB</i></summary>\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</details>\n\n<details>\n  <summary><b><code>lch</code> (CIE LCH color space)</b> <i>1.3 KB</i></summary>\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</details>\n\n<details>\n  <summary><b><code>minify</code> (Color string minification)</b> <i>0.5 KB</i></summary>\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</details>\n\n<details>\n  <summary><b><code>mix</code> (Color mixing)</b> <i>0.96 KB</i></summary>\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<div align=\"center\">\n<img 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\" />\n</div>\n\n```js\nconst color = colord(\"#ff0000\");\ncolor.tints(3).map((c) => c.toHex()); // [\"#ff0000\", \"#ff9f80\", \"#ffffff\"];\ncolor.shades(3).map((c) => c.toHex()); // [\"#ff0000\", \"#7a1b0b\", \"#000000\"];\ncolor.tones(3).map((c) => c.toHex()); // [\"#ff0000\", \"#c86147\", \"#808080\"];\n```\n\n</details>\n\n<details>\n  <summary><b><code>names</code> (CSS color keywords)</b> <i>1.45 KB</i></summary>\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</details>\n\n<details>\n  <summary><b><code>xyz</code> (CIE XYZ color space)</b> <i>0.7 KB</i></summary>\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</details>\n\n<div><img src=\"assets/divider.png\" width=\"838\" alt=\"---\" /></div>\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<div><img src=\"assets/divider.png\" width=\"838\" alt=\"---\" /></div>\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<div><img src=\"assets/divider.png\" width=\"838\" alt=\"---\" /></div>\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","_attachments":{},"homepage":"https://github.com/omgovich/colord#readme","bugs":{"url":"https://github.com/omgovich/colord/issues"},"license":"MIT"}