# postcss-color-function > PostCSS plugin to transform W3C CSS color function to more compatible CSS. Latest version **4.1.0** (published 2019-04-01) · MIT license · 0 weekly downloads ## Install ```sh npm install postcss-color-function pnpm add postcss-color-function yarn add postcss-color-function bun add postcss-color-function ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 4.1.0 | | Published | 2019-04-01 | | First published | 2014-10-04 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 4 | | Unpacked size | 9 KB | | Known vulnerabilities | 0 (+6 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 323 | | Author | Maxime Thirouin | | Maintainers | jonathantneal, moox, semigradsky | | Keywords | css, postcss, postcss-plugin, color, colour, function | ## Links - npm: https://www.npmjs.com/package/postcss-color-function - Repository: https://github.com/postcss/postcss-color-function - Homepage: https://github.com/postcss/postcss-color-function#readme - Issues: https://github.com/postcss/postcss-color-function/issues - npm.io page: https://npm.io/package/postcss-color-function ## Dependencies (4) - [postcss](https://npm.io/package/postcss.md) ^6.0.23 - [css-color-function](https://npm.io/package/css-color-function.md) ~1.3.3 - [postcss-value-parser](https://npm.io/package/postcss-value-parser.md) ^3.3.1 - [postcss-message-helpers](https://npm.io/package/postcss-message-helpers.md) ^2.0.0 ## 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 - 4.1.0 (latest) — 2019-04-01 - 4.0.1 — 2017-11-03 - 4.0.0 — 2017-05-15 - 3.0.0 — 2017-02-01 - 2.0.1 — 2016-03-15 - 2.0.0 — 2015-09-07 - 1.3.2 — 2015-07-08 - 1.3.0 — 2015-06-15 - 1.2.0 — 2015-03-12 - 1.1.0 — 2014-11-25 - 1.0.0 — 2014-10-04 ## README # postcss-color-function [![Build Status](https://travis-ci.org/postcss/postcss-color-function.svg)](https://travis-ci.org/postcss/postcss-color-function) [PostCSS](https://github.com/postcss/postcss) plugin to transform CSS color function from editor draft of 'Color Module Level 4' specification to more compatible CSS. ## Deprecated **⚠️ `color()` was changed to `color-mod()`. See [postcss-color-mod-function](https://github.com/jonathantneal/postcss-color-mod-function).** > There is a [`color-mod`](https://github.com/jonathantneal/postcss-color-mod-function) implementation. **⚠️ `color-mod()` has been removed from [Color Module Level 4 specification](https://www.w3.org/TR/css-color-4/#changes-from-20160705).** ## Installation ```console npm install postcss-color-function ``` ## Usage ```js // dependencies var fs = require("fs") var postcss = require("postcss") var colorFunction = require("postcss-color-function") // css to be processed var css = fs.readFileSync("input.css", "utf8") // process css // set preserveCustomProps to `false` by default `true` //for delete declarations with custom properties var output = postcss() .use(colorFunction({preserveCustomProps: true})) .process(css) .css ``` Using this `input.css`: ```css body { background: color(red a(90%)) } ``` you will get: ```css body { background: rgba(255, 0, 0, 0.9) } ``` Checkout [tests](test) for examples. ## Interface (according to CSS specs) ``` color( [ | ] * ) ``` ### List of `color-adjuster` - `[red( | green( | blue( | alpha( | a(] ['+' | '-']? [ | ] )` - `[red( | green( | blue( | alpha( | a(] '*' )` - ~~`rgb( ['+' | '-'] [ | ]{3} )`~~ @todo - ~~`rgb( ['+' | '-'] )`~~ @todo - ~~`rgb( '*' ) |`~~ @todo - `[hue( | h(] ['+' | '-' | '*']? )` - `[saturation( | s(] ['+' | '-' | '*']? )` - `[lightness( | l(] ['+' | '-' | '*']? )` - `[whiteness( | w(] ['+' | '-' | '*']? )` - `[blackness( | b(] ['+' | '-' | '*']? )` - `tint( )` - `shade( )` - `blend( [rgb | hsl | hwb]? )` - ~~`blenda( [rgb | hsl | hwb]? )`~~ @todo - `contrast( ? )` Notes: - some adjusts have shortcuts, - can be used on every value on any property, - some values can use add/subtract/scale modifiers or a direct value. ### Examples ```css whatever { color: color(red a(10%)); background-color: color(red lightness(50%)); /* == color(red l(50%)); */ border-color: color(hsla(125, 50%, 50%, .4) saturation(+ 10%) w(- 20%)); } ``` ## FAQ ### Can you support `currentcolor` so we can do `color(currentcolor adjuster())`? No we cannot do that. `currentcolor` depends on the cascade (so the DOM) and we can't handle that in a simple preprocessing step. You need to handle that with polyfills. ### Can we use CSS custom properties so we can do `color(var(--mainColor) adjuster())`? By using [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties) before this plugin, you can do that (sort of). You have some examples in [cssnext playground](http://cssnext.io/playground/). ## Notes for former Sass users `lighten` and `darken` are Sass specific methods and not supported by native CSS specs. The same functionality can be achieved with the [tint and shade adjusters](https://drafts.csswg.org/css-color/#tint-shade-adjusters): ```css $lighten(red, 20%) /* is equivalent to */ color(red tint(20%)) $darken(red, 20%) /* is equivalent to */ color(red shade(20%)) ``` --- ## [Changelog](CHANGELOG.md) ## [License](LICENSE) --- _Source: https://npm.io/package/postcss-color-function · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._