{
  "manifest": {
    "name": "colord",
    "version": "2.9.3",
    "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": "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": {
      ".": {
        "types": "./index.d.ts",
        "import": "./index.mjs",
        "require": "./index.js",
        "default": "./index.mjs"
      },
      "./plugins/a11y": {
        "types": "./plugins/a11y.d.ts",
        "import": "./plugins/a11y.mjs",
        "require": "./plugins/a11y.js",
        "default": "./plugins/a11y.mjs"
      },
      "./plugins/cmyk": {
        "types": "./plugins/cmyk.d.ts",
        "import": "./plugins/cmyk.mjs",
        "require": "./plugins/cmyk.js",
        "default": "./plugins/cmyk.mjs"
      },
      "./plugins/harmonies": {
        "types": "./plugins/harmonies.d.ts",
        "import": "./plugins/harmonies.mjs",
        "require": "./plugins/harmonies.js",
        "default": "./plugins/harmonies.mjs"
      },
      "./plugins/hwb": {
        "types": "./plugins/hwb.d.ts",
        "import": "./plugins/hwb.mjs",
        "require": "./plugins/hwb.js",
        "default": "./plugins/hwb.mjs"
      },
      "./plugins/lab": {
        "types": "./plugins/lab.d.ts",
        "import": "./plugins/lab.mjs",
        "require": "./plugins/lab.js",
        "default": "./plugins/lab.mjs"
      },
      "./plugins/lch": {
        "types": "./plugins/lch.d.ts",
        "import": "./plugins/lch.mjs",
        "require": "./plugins/lch.js",
        "default": "./plugins/lch.mjs"
      },
      "./plugins/minify": {
        "types": "./plugins/minify.d.ts",
        "import": "./plugins/minify.mjs",
        "require": "./plugins/minify.js",
        "default": "./plugins/minify.mjs"
      },
      "./plugins/mix": {
        "types": "./plugins/mix.d.ts",
        "import": "./plugins/mix.mjs",
        "require": "./plugins/mix.js",
        "default": "./plugins/mix.mjs"
      },
      "./plugins/names": {
        "types": "./plugins/names.d.ts",
        "import": "./plugins/names.mjs",
        "require": "./plugins/names.js",
        "default": "./plugins/names.mjs"
      },
      "./plugins/xyz": {
        "types": "./plugins/xyz.d.ts",
        "import": "./plugins/xyz.mjs",
        "require": "./plugins/xyz.js",
        "default": "./plugins/xyz.mjs"
      },
      "./package.json": "./package.json"
    },
    "files": [
      "*.{js,mjs,ts,map}",
      "plugins/*.{js,mjs,ts,map}"
    ],
    "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",
      "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.1.0",
      "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"
      }
    ],
    "_registry": "npm",
    "_loc": "/homez.1033/heliovt/.cache/yarn/v6/npm-colord-2.9.3-4f8ce919de456f1d5c1c368c307fe20f3e59fb43-integrity/node_modules/colord/package.json",
    "readmeFilename": "README.md",
    "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",
    "licenseText": "MIT License\n\nCopyright (c) 2020 Vlad Shilov omgovich@ya.ru\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  "artifacts": [],
  "remote": {
    "resolved": "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43",
    "type": "tarball",
    "reference": "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz",
    "hash": "4f8ce919de456f1d5c1c368c307fe20f3e59fb43",
    "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
    "registry": "npm",
    "packageName": "colord",
    "cacheIntegrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw== sha1-T4zpGd5Fbx1cHDaMMH/iDz5Z+0M="
  },
  "registry": "npm",
  "hash": "4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
}