PostCSS OKLab Function lets you use oklab and oklch color functions in
CSS, following the CSS Color specification.
.test-oklab {
color: oklab(40% 0.001236 0.0039);
}
.test-oklch {
color: oklch(40% 0.268735435 34.568626);
}
/* becomes */
.test-oklab {
color: rgb(73, 71, 69);
color: color(display-p3 0.28515 0.27983 0.27246);
}
.test-oklch {
color: rgb(131, 28, 0);
color: color(display-p3 0.49163 0.11178 0.00000);
}Add PostCSS OKLab Function to your project:
npm install postcss @csstools/postcss-oklab-function --save-devUse it as a PostCSS plugin:
const postcss = require('postcss');
const postcssOKLabFunction = require('@csstools/postcss-oklab-function');
postcss([
postcssOKLabFunction(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);PostCSS OKLab Function runs in all Node environments, with special instructions for:
| Node | PostCSS CLI | Webpack | Gulp | Grunt |
|---|
The preserve option determines whether the original notation
is preserved. By default, it is not preserved.
postcssOKLabFunction({ preserve: true }).test-oklab {
color: oklab(40% 0.001236 0.0039);
}
.test-oklch {
color: oklch(40% 0.268735435 34.568626);
}
/* becomes */
.test-oklab {
color: rgb(73, 71, 69);
color: color(display-p3 0.28515 0.27983 0.27246);
color: oklab(40% 0.001236 0.0039);
}
.test-oklch {
color: rgb(131, 28, 0);
color: color(display-p3 0.49163 0.11178 0.00000);
color: oklch(40% 0.268735435 34.568626);
}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.
postcssOKLabFunction({ enableProgressiveCustomProperties: false }):root {
--firebrick: oklab(40% 0.234 0.39);
}
/* becomes */
:root {
--firebrick: rgb(133, 0, 67); /* will never be used, not even in older browser */
--firebrick: color(display-p3 0.49890 0.00000 0.25954); /* will never be used, not even in older browser */
--firebrick: oklab(40% 0.234 0.39);
}The subFeatures.displayP3 option determines if color(display-p3 ...) is used as a fallback.
By default, it is enabled.
display-p3 can display wider gamut colors than rgb on some devices.
postcssOKLabFunction({
subFeatures: {
displayP3: false
}
}).test-oklab {
color: oklab(40% 0.001236 0.0039);
}
.test-oklch {
color: oklch(40% 0.268735435 34.568626);
}
/* becomes */
.test-oklab {
color: rgb(73, 71, 69);
}
.test-oklch {
color: rgb(131, 28, 0);
}This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/tree/main/css-color-4. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
