# postcss-color-functional-notation > Use space and slash separated color notation in CSS Latest version **8.0.12** (published 2026-09-13) · MIT-0 license · 0 weekly downloads ## Install ```sh npm install postcss-color-functional-notation pnpm add postcss-color-functional-notation yarn add postcss-color-functional-notation bun add postcss-color-functional-notation ``` ## Health **Score 60/100 (C)** — status: active. Positive: esm support; no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; no types. ## Facts | | | |---|---| | Version | 8.0.12 | | Published | 2026-09-13 | | First published | 2018-05-08 | | Weekly downloads | 0 | | License | MIT-0 | | TypeScript types | none | | Module format | ESM | | Node | >=20.19.0 | | Dependencies | 5 | | Unpacked size | 8.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1053 | | Author | Jonathan Neal | | Maintainers | jonathantneal, alaguna, romainmenke | | Keywords | color, comma, css, design, functional, hsl, hsla, hwb, notation, postcss, postcss-plugin, rgb, rgba, space, syntax | ## Links - npm: https://www.npmjs.com/package/postcss-color-functional-notation - Repository: https://github.com/csstools/postcss-plugins - Homepage: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation#readme - Issues: https://github.com/csstools/postcss-plugins/issues - Funding: https://github.com/sponsors/csstools - npm.io page: https://npm.io/package/postcss-color-functional-notation ## Dependencies (5) - [@csstools/utilities](https://npm.io/package/@csstools/utilities.md) ^3.0.0 - [@csstools/css-tokenizer](https://npm.io/package/@csstools/css-tokenizer.md) ^4.0.0 - [@csstools/css-color-parser](https://npm.io/package/@csstools/css-color-parser.md) ^4.2.3 - [@csstools/css-parser-algorithms](https://npm.io/package/@csstools/css-parser-algorithms.md) ^4.0.0 - [@csstools/postcss-progressive-custom-properties](https://npm.io/package/@csstools/postcss-progressive-custom-properties.md) ^5.1.3 ## Alternatives - [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads - [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads - [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads - [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads - [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads ## Recent versions - 8.0.12 (latest) — 2026-09-13 - 8.0.11 — 2026-09-06 - 8.0.10 — 2026-08-31 - 8.0.9 — 2026-08-25 - 8.0.8 — 2026-08-15 - 8.0.7 — 2026-07-22 - 8.0.6 — 2026-06-28 - 8.0.5 — 2026-06-14 - 8.0.4 — 2026-05-13 - 8.0.3 — 2026-04-12 - 8.0.2 — 2026-02-21 - 8.0.1 — 2026-01-25 - 8.0.0 — 2026-01-14 - 7.0.12 — 2025-09-21 - 7.0.11 — 2025-08-22 - … 47 more at https://npm.io/package/postcss-color-functional-notation/versions ## README # PostCSS Color Functional Notation [PostCSS Logo][PostCSS] `npm install postcss-color-functional-notation --save-dev` [PostCSS Color Functional Notation] lets you use space and slash separated color notation in CSS, following the [CSS Color] specification. ```css :root { --firebrick: rgb(178 34 34); --firebrick-a50: rgb(70% 13.5% 13.5% / 50%); --firebrick-hsl: hsla(0 68% 42%); --firebrick-hsl-a50: hsl(0 68% 42% / 50%); } /* becomes */ :root { --firebrick: rgb(178, 34, 34); --firebrick-a50: rgba(179, 34, 34, 0.5); --firebrick-hsl: hsl(0, 68%, 42%); --firebrick-hsl-a50: hsla(0, 68%, 42%, 0.5); } ``` ## Usage Add [PostCSS Color Functional Notation] to your project: ```bash npm install postcss postcss-color-functional-notation --save-dev ``` Use it as a [PostCSS] plugin: ```js const postcss = require('postcss'); const postcssColorFunctionalNotation = require('postcss-color-functional-notation'); postcss([ postcssColorFunctionalNotation(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` ## Options ### preserve The `preserve` option determines whether the original notation is preserved. By default, it is not preserved. ```js postcssColorFunctionalNotation({ preserve: true }) ``` ```css :root { --firebrick: rgb(178 34 34); --firebrick-a50: rgb(70% 13.5% 13.5% / 50%); --firebrick-hsl: hsla(0 68% 42%); --firebrick-hsl-a50: hsl(0 68% 42% / 50%); } /* becomes */ :root { --firebrick: rgb(178, 34, 34); --firebrick-a50: rgba(179, 34, 34, 0.5); --firebrick-hsl: hsl(0, 68%, 42%); --firebrick-hsl: hsla(0 68% 42%); --firebrick-hsl-a50: hsla(0, 68%, 42%, 0.5); } @supports (color: rgb(0 0 0 / 0)) { :root { --firebrick: rgb(178 34 34); --firebrick-a50: rgb(70% 13.5% 13.5% / 50%); } } @supports (color: hsl(0 0% 0% / 0)) { :root { --firebrick-hsl-a50: hsl(0 68% 42% / 50%); } } ``` ### enableProgressiveCustomProperties The `enableProgressiveCustomProperties` option determines whether the original notation is wrapped with `@supports` when used in Custom Properties. By default, it is enabled. > [!NOTE] > We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. > See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme). ```js postcssColorFunctionalNotation({ enableProgressiveCustomProperties: false }) ``` ```css :root { --firebrick: rgb(178 34 34); --firebrick-a50: rgb(70% 13.5% 13.5% / 50%); --firebrick-hsl: hsla(0 68% 42%); --firebrick-hsl-a50: hsl(0 68% 42% / 50%); } /* becomes */ :root { --firebrick: rgb(178, 34, 34); --firebrick: rgb(178 34 34); --firebrick-a50: rgba(179, 34, 34, 0.5); --firebrick-a50: rgb(70% 13.5% 13.5% / 50%); --firebrick-hsl: hsl(0, 68%, 42%); --firebrick-hsl: hsla(0 68% 42%); --firebrick-hsl-a50: hsla(0, 68%, 42%, 0.5); --firebrick-hsl-a50: hsl(0 68% 42% / 50%); } ``` _Custom properties do not fallback to the previous declaration_ [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test [css-url]: https://cssdb.org/#color-functional-notation [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/postcss-color-functional-notation [PostCSS]: https://github.com/postcss/postcss [PostCSS Color Functional Notation]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation [CSS Color]: https://www.w3.org/TR/css-color-4/#funcdef-rgb --- _Source: https://npm.io/package/postcss-color-functional-notation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._