@csstools/postcss-hwb-function

What is @csstools/postcss-hwb-function?

@csstools/postcss-hwb-function is a PostCSS plugin that allows you to use the HWB (Hue, Whiteness, Blackness) color function in your CSS. This function is part of the CSS Color Module Level 4 specification and provides an alternative way to define colors, which can be more intuitive for certain use cases.

What are @csstools/postcss-hwb-function's main functionalities?

Using HWB color function

This feature allows you to use the HWB color function in your CSS. The plugin will transform the HWB function into an equivalent RGB value.

/* Input CSS */
.example {
  color: hwb(90 0% 0%);
}

/* Output CSS */
.example {
  color: rgb(128, 255, 0);
}

Custom properties with HWB

You can define custom properties using the HWB function, and the plugin will convert these to RGB values, allowing you to use them throughout your CSS.

/* Input CSS */
:root {
  --main-color: hwb(200 30% 40%);
}
.example {
  color: var(--main-color);
}

/* Output CSS */
:root {
  --main-color: rgb(77, 102, 153);
}
.example {
  color: var(--main-color);
}

Other packages similar to @csstools/postcss-hwb-function

postcss-color-function

postcss-color-function is a PostCSS plugin that allows you to use color-modifying functions in your CSS, such as color(), which can adjust colors by lightness, saturation, and more. It provides broader functionality for color manipulation compared to @csstools/postcss-hwb-function, which focuses specifically on the HWB color function.

postcss-preset-env

postcss-preset-env is a PostCSS plugin that allows you to use modern CSS features, including color functions like hwb(), today. It includes a wide range of CSS features and polyfills, making it a more comprehensive solution for modern CSS development compared to the more focused @csstools/postcss-hwb-function.

README

PostCSS HWB Function

npm install @csstools/postcss-hwb-function --save-dev

PostCSS HWB Function lets you use the hwb() color function in CSS, following CSS Color Module 4.

a {
	color: hwb(194 0% 0%);
}

b {
	color: hwb(194 0% 0% / .5);
}

/* becomes */

a {
	color: rgb(0, 196, 255);
}

b {
	color: rgba(0, 196, 255, 0.5);
}

Usage

Add PostCSS HWB Function to your project:

npm install postcss @csstools/postcss-hwb-function --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssHWBFunction = require('@csstools/postcss-hwb-function');

postcss([
	postcssHWBFunction(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

Options

preserve

The preserve option determines whether the original notation is preserved. By default, it is not preserved.

postcssHWBFunction({ preserve: true })

a {
	color: hwb(194 0% 0%);
}

b {
	color: hwb(194 0% 0% / .5);
}

/* becomes */

a {
	color: rgb(0, 196, 255);
	color: hwb(194 0% 0%);
}

b {
	color: rgba(0, 196, 255, 0.5);
	color: hwb(194 0% 0% / .5);
}