PostCSS HWB Function lets you use hwb color functions in
CSS, following the CSS Color specification.
```pcss a { color: hwb(194 0% 0%); color: hwb(194 0% 0% / .5); }
/ becomes /
a { color: rgb(0, 195, 255); color: rgba(0, 195, 255, .5); } ```
Add PostCSS HWB Function to your project:
bash
npm install postcss @csstools/postcss-hwb-function --save-dev
Use it as a PostCSS plugin:
```js const postcss = require('postcss'); const postcssHWBFunction = require('@csstools/postcss-hwb-function');
postcss([ postcssHWBFunction(/ pluginOptions /) ]).process(YOUR_CSS /, processOptions /); ```
PostCSS HWB Function runs in all Node environments, with special instructions for:
| Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt | | --- | --- | --- | --- | --- | --- |
The preserve option determines whether the original functional color notation
is preserved. By default, it is not preserved.
js
postcssHWBFunction({ preserve: true })
```pcss a { color: hwb(194 0% 0%); color: hwb(194 0% 0% / .5); }
/ becomes /
a { color: rgb(0, 195, 255); color: hwb(194 0% 0%); color: rgba(0, 195, 255, .5); color: hwb(194 0% 0% / .5); } ```