PostCSS OKLab Function
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);
}
Usage
Add PostCSS OKLab Function to your project:
npm install postcss @csstools/postcss-oklab-function --save-dev
Use 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 | Create React App | Gulp | Grunt |
---|
Options
preserve
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);
}
enableProgressiveCustomProperties
The enableProgressiveCustomProperties
option determines whether the original notation
is wrapped with @supports
when used in Custom Properties. By default, it is enabled.
⚠️ 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);
}
subFeatures
displayP3
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);
}
Out of gamut colors
Depending on the browser implementation out of gamut colors may be clipped, resulting in a different color.
Fallback values generated by PostCSS OKLab Function are always mapped to a close alternative in sRGB.
When setting preserve
to true
the original values will be used by some browsers and these may be clipped.
Certain browsers will have an incorrect color if this occurs.
If the plugin detects out of gamut colors it will emit a warning :
"oklab(40% 0.234 0.39)" is out of gamut for "display-p3". When "preserve: true" is set this will lead to unexpected results in some browsers.
To resolve this warning you can use a color that is in gamut for display-p3
.
Copyright : color conversions
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).