OKLCH Color Picker

OKLCH Color Picker logo

OKLCH by Björn Ottosson is a new way to encode 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 (cylinder for HSL).

During color transformation, hue changes could lead to brightness changes which lead to a different visual result. 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 color transformation—critical for implementing proper a11y.

Designed for modern screens

Modern, cutting-edge monitors promise to render a new world of colors, including P3. OKLCH helps us to not be limited to just sRGB colors and Picker can encode P3, Rec. 2020, and beyond.

OKLCH color picker

Good for CSS

We think that OKLCH is the best color system for CSS. Due to the HSL problem, supporting design system could be hard and could lead to a11y issues. 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.


Further reading

In the same orbit

Explore more OSS projects

Contact us

We’d love to hear from you! We’re not really all that evil, and we love discussing potential projects, intriguing ideas, and new opportunities. Complete the form below or drop us a line at surrender@evilmartians.com.

Martians at a glance
years in business

A product development consultancy that works with startups and established businesses, while also creating open source-based products and services