CLI tool that converts rgb(), rgba(), hex, hsl() and hsla() colors to oklch() in specified CSS files.
npm install convert-to-oklchCLI tool that converts rgb(), rgba(), hex, hsl() and hsla() colors to oklch() in specified CSS files.
``sh`
npx convert-to-oklch ./src/*/.css
`diff`
.header {
- background: rgb(102, 173, 221);
+ background: oklch(72% 0.1 239.8);
}
oklch() provides better readability since it uses lightness, chroma, and hue components (closer to how people think and work with colors) instead of “magic tokens” like #4287f5. In contrast with hsl(), OKLCH has no issues with contrast and a11y.
Don’t forget to add postcss-preset-env to PostCSS to have oklch() polyfill.
After conversion, the value of each color component is rounded:
`diff
- oklch(60.66305848755579% 0.11082513148527705 250.4762110872339 / 0.4)
+ oklch(60.7% 0.11 250 / 0.4)
// l - up to 1 digit after the decimal point
// c - up to 3 digits after the decimal point
// h - up to 1 digit after the decimal point
`
You can also specify precision of color conversion by using -p or --precision option. Available values are 1-21 inclusive.
Conversion is done with colorjs package by Lea Verou.
`bash`
npx convert-to-oklch ./src/*.css -p 2
Colors that contain custom properties inside are ignored:
`css``
a {
color: rgb(102, 173, 221, var(--opacity));
}
In this case the color will not be converted.
Read more about color spaces in css:
- OKLCH in CSS: why we moved from RGB and HSL
- LCH colors in CSS: what, why, and how?
- A Guide To Modern CSS Colors