{"id":19652976,"url":"https://github.com/csstools/postcss-color-mod-function","last_synced_at":"2026-03-12T23:31:03.561Z","repository":{"id":45950106,"uuid":"117700677","full_name":"csstools/postcss-color-mod-function","owner":"csstools","description":"Modify colors using the color-mod() function in CSS","archived":false,"fork":false,"pushed_at":"2026-02-26T16:14:12.000Z","size":153,"stargazers_count":95,"open_issues_count":3,"forks_count":14,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-03-03T09:16:21.421Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/csstools.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-16T15:20:24.000Z","updated_at":"2025-12-28T04:10:12.000Z","dependencies_parsed_at":"2024-11-09T06:27:59.788Z","dependency_job_id":"9a3dedf3-9183-471a-b632-8a8b915f0766","html_url":"https://github.com/csstools/postcss-color-mod-function","commit_stats":{"total_commits":34,"total_committers":9,"mean_commits":"3.7777777777777777","dds":0.3529411764705882,"last_synced_commit":"e442090f9f8d74b4791283431d989b63ddb67380"},"previous_names":["jonathantneal/postcss-color-mod-function"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/csstools/postcss-color-mod-function","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-color-mod-function","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-color-mod-function/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-color-mod-function/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-color-mod-function/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csstools","download_url":"https://codeload.github.com/csstools/postcss-color-mod-function/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-color-mod-function/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30415117,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-12T00:40:14.898Z","status":"online","status_checked_at":"2026-03-12T02:00:07.260Z","response_time":114,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T15:12:49.289Z","updated_at":"2026-03-12T23:31:03.544Z","avatar_url":"https://github.com/csstools.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS color-mod() Function [\u003cimg src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS Logo\" width=\"90\" height=\"90\" align=\"right\"\u003e][postcss]\n\n[![NPM Version][npm-img]][npm-url]\n[![Test](https://github.com/csstools/postcss-color-mod-function/actions/workflows/test.yml/badge.svg)](https://github.com/csstools/postcss-color-mod-function/actions/workflows/test.yml)\n\n[PostCSS color-mod() Function] lets you modify colors using the `color-mod()`\nfunction in CSS, following the outdated version of [CSS Color Module Level 4] specification (05 July 2016).\n\n**⚠️ `color-mod()` has been removed from [Color Module Level 4 specification](https://www.w3.org/TR/css-color-4/#changes-from-20160705). ([Here's why](https://github.com/w3c/csswg-drafts/commit/034b063697c3dadf144504f52e0858a79cd84414))**\n\n```pcss\n:root {\n  --brand-red:      color-mod(yellow blend(red 50%));\n  --brand-red-hsl:  color-mod(yellow blend(red 50% hsl));\n  --brand-red-hwb:  color-mod(yellow blend(red 50% hwb));\n  --brand-red-dark: color-mod(red blackness(20%));\n}\n\n/* becomes */\n\n:root {\n  --brand-red:      rgb(255, 127.5, 0);\n  --brand-red-hsl:  rgb(255, 127.5, 255);\n  --brand-red-hwb:  rgb(255, 127.5, 0);\n  --brand-red-dark: rgb(204, 0, 0);\n}\n\n/* or, using stringifier(color) { return color.toString() } */\n\n:root {\n  --brand-red:      rgb(100% 50% 0% / 100%);\n  --brand-red-hsl:  hsl(30 100% 50% / 100%);\n  --brand-red-hwb:  hwb(30 0% 0% / 100%);\n  --brand-red-dark: hwb(0 0% 20% / 100%);\n}\n```\n\n### Supported Colors\n\nThe `color-mod()` function accepts `rgb()`, legacy comma-separated `rgb()`,\n`rgba()`, `hsl()`, legacy comma-separated `hsl()`, `hsla()`, `hwb()`, and\n`color-mod()` colors, as well as 3, 4, 6, and 8 digit hex colors, and named\ncolors without the need for additional plugins.\n\nImplemention details are available in\n[the specification](https://www.w3.org/TR/2016/WD-css-color-4-20160705/#funcdef-color-mod).\n\n### Supported Color Adjusters\n\nThe `color-mod()` function accepts `red()`, `green()`, `blue()`, `a()` /\n`alpha()`, `rgb()`, `h()` / `hue()`, `s()` / `saturation()`, `l()` /\n`lightness()`, `w()` / `whiteness()`, `b()` / `blackness()`, `tint()`,\n`shade()`, `blend()`, `blenda()`, and `contrast()` color adjusters.\n\nImplemention details are available in\n[the specification](https://www.w3.org/TR/css-color-4/#typedef-color-adjuster).\n\n### Supported Variables\n\nBy default, `var()` variables will be used if their corresponding Custom\nProperties are found in a `:root` rule, or if a fallback value is specified.\n\n## Usage\n\nAdd [PostCSS color-mod() Function] to your project:\n\n```bash\nnpm install postcss postcss-color-mod-function --save-dev\n```\n\nUse [PostCSS color-mod() Function] to process your CSS:\n\n```js\nconst postcssColorMod = require('postcss-color-mod-function');\n\npostcssColorMod.process(YOUR_CSS /*, processOptions, pluginOptions */);\n```\n\nOr use it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssColorMod = require('postcss-color-mod-function');\n\npostcss([\n  postcssColorMod(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n[PostCSS color-mod() Function] runs in all Node environments, with special instructions for:\n\n| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |\n| --- | --- | --- | --- | --- | --- |\n\n## Options\n\n### stringifier\n\nThe `stringifier` option defines how transformed colors will be produced in CSS.\nBy default, legacy `rgb()` and `rgba()` colors are produced, but this can be\neasily updated to support [CSS Color Module Level 4 colors] colors.\n\n```js\nimport postcssColorMod from 'postcss-color-mod-function';\n\npostcssColorMod({\n  stringifier(color) {\n    return color.toString(); // use CSS Color Module Level 4 colors (rgb, hsl, hwb)\n  }\n});\n```\n\nFuture major releases of [PostCSS color-mod() Function] may reverse this\nfunctionality so that CSS Color Module Level 4 colors are produced by default.\n\n### unresolved\n\nThe `unresolved` option defines how unresolved functions and arguments should\nbe handled. The available options are `throw`, `warn`, and `ignore`. The\ndefault option is to `throw`.\n\nIf `ignore` is used, the `color-mod()` function will remain unchanged.\n\n```js\nimport postcssColorMod from 'postcss-color-mod-function';\n\npostcssColorMod({\n  unresolved: 'ignore' // ignore unresolved color-mod() functions\n});\n```\n\n### transformVars\n\nThe `transformVars` option defines whether `var()` variables used within\n`color-mod()` should be transformed into their corresponding Custom Properties\navailable in `:root`, or their fallback value if it is specified. By default,\n`var()` variables will be transformed.\n\nHowever, because these transformations occur at build time, they cannot be\nconsidered accurate. Accurately resolving cascading variables relies on\nknowledge of the living DOM tree.\n\n### importFrom\n\nThe `importFrom` option allows you to import variables from other sources,\nwhich might be CSS, JS, and JSON files, and directly passed objects.\n\n```js\npostcssColorMod({\n  importFrom: 'path/to/file.css' // :root { --brand-dark: blue; --brand-main: var(--brand-dark); }\n});\n```\n\n```pcss\n.brand-faded {\n  color: color-mod(var(--brand-main) a(50%));\n}\n\n/* becomes */\n\n.brand-faded {\n  color: rgba(0, 0, 255, .5);\n}\n```\n\nMultiple files can be passed into this option, and they will be parsed in the\norder they were received. JavaScript files, JSON files, and objects will need\nto namespace custom properties under a `customProperties` or\n`custom-properties` key.\n\n```js\npostcssColorMod({\n  importFrom: [\n    'path/to/file.css',   // :root { --brand-dark: blue; --brand-main: var(--brand-dark); }\n    'and/then/this.js',   // module.exports = { customProperties: { '--brand-dark': 'blue', '--brand-main': 'var(--brand-dark)' } }\n    'and/then/that.json', // { \"custom-properties\": { \"--brand-dark\": \"blue\", \"--brand-main\": \"var(--brand-dark)\" } }\n    {\n      customProperties: {\n        '--brand-dark': 'blue',\n        '--brand-main': 'var(--brand-dark)'\n      }\n    }\n  ]\n});\n```\n\nVariables may reference other variables, and this plugin will attempt to\nresolve them. If `transformVars` is set to `false` then `importFrom` will not\nbe used.\n\n[npm-img]: https://img.shields.io/npm/v/postcss-color-mod-function.svg\n[npm-url]: https://www.npmjs.com/package/postcss-color-mod-function\n\n[CSS Color Module Level 4]: https://www.w3.org/TR/2016/WD-css-color-4-20160705/#funcdef-color-mod\n[Gulp PostCSS]: https://github.com/postcss/gulp-postcss\n[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS color-mod() Function]: https://github.com/csstools/postcss-color-mod-function\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fpostcss-color-mod-function","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsstools%2Fpostcss-color-mod-function","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fpostcss-color-mod-function/lists"}