OKLCH Color Picker & Converter

OKLCH Color Picker & Converter logo

OKLCH, by Björn Ottosson, is a new way of encoding colors (like hex, RGBA, or HSL) with native browser support. OKLCH was created to solve a critical problem in hsl() and Sass’s darken(): the human eye sees different colors for different hues, but HSL and RGB deform the complex shape of color space to a cube (or cylinder, in HSL).

This is very cool: a nice little OKLCH Color Picker & Converter that also shows you which colors are not available for your device and the fallback color your will obtain. — Twitter.

During color transformation, hue changes could lead to brightness changes and different visual results. OKLCH provides a “true” color space where colors are shown as they really are. Therefore, you’ll get predictable results, e.g., a predictable contrast after a color transformation, which is critical for implementing proper a11y. Further, due to HSL’s issue, supporting a design system with HSL could be hard, and could lead to a11y issues.

Designed for modern screens

Modern, cutting-edge monitors promise to render a new world of colors, including P3. OKLCH makes sure we aren’t limited to just sRGB colors and the OKLCH Color Picker can encode P3, Rec. 2020, and beyond.

OKLCH Color Picker & Converter

Good for CSS

We think that OKLCH is the best color system for CSS. You could wait for CSS Colors 5, (which will bring native color transformations to CSS) or for all browsers to offer CSS Colors 4 support, but with OKLCH Color Picker and a PostCSS polyfill you can use OKLCH right now.

Authors

Further reading

In the same orbit

Explore more open source projects

Schedule call

Irina Nazarova CEO at Evil Martians

Evil Martians transform growth-stage startups into unicorns, build developer tools, and create open source products. Hire us to design and build your product