Exploring the OKLCH ecosystem and its tools

Before we grab our toolkit: why OKLCH?

First, why should anyone care about OKLCH? Well, because we have a problem. And we believe OKLCH is part of the solution to that problem.

Color is one of the most powerful tools in visual communication. It’s capable of conveying emotion, hierarchy, and intent in an instant. Yet, we’re seeing a loss of color in everyday use, a trend into a sea of gray and blue shades, and all of this is very noticeable across the web. This is happening despite our screens being more capable than ever of rendering rich, vivid hues. But why?

One reason might be our tools themselves: most color workflows still rely on HEX. However, this is a notation that offers no safety net, no perceptual guarantees, and no intuitive grasp of how colors behave.

To illustrate, you can’t tell the color from the code (can you really guess what #E89317 is?), and further, you also can’t reliably modify it without a color picker. Or make it 5% lighter. Or select the exact same green as your blue. It’s too easy to make a mess here because HEX was made for humans and how we think about color.

So, what if we had better tools—tools that made color feel predictable, expressive, and safe to use? That’s OKLCH.

Consistent, cohesive, accessible, and perceptually uniform. OKLCH is all of these, and it’s bridging the gap between programming and design. OKLCH is not just a new color model, it’s also a new way of describing color. While OKLCH and the benefits it brings have been around for some time, graphic editors, color inspectors, web practices, and the minds and hearts of designers and developers are still somewhat conservative. We’re on a mission to change this.

Besides watching the talk above, the best intro for newcomers is to read our post on why we made the switch (and why OKLCH is better than RGB and HSL) or watch this talk on 3 reasons to make the switch!

Without further ado, let’s jump in and take a look at some of the tools in the OKLCH ecosystem!

The OKLCH color picker and converter

The first tool we’ll talk about is OKLCH.com, which is an interactive color tool designed by Evil Martians help to designers and developers explore, learn, and use the OKLCH color space.

Perceptual color spaces have been around for ages, but the average designer may not actually know much about them. So, when we set out to build our UI for the OKLCH Color Picker & Converter, we had education in mind as the core principle to guide our work. You can read more about how we made it here.

Using the color picker is not only practical and simple, it’s also a great way to see exactly how OKLCH offers predictable and accessible color manipulations vs. traditional models like RGB or HSL.

Harmonizer

Another new tool from the Evil Martians team, Harmonizer generates accessible, consistent color palettes for user interfaces. Using the OKLCH color model and APCA contrast formula, Harmonizer helps you create color palettes with consistent chroma and contrast across all levels and hues, and you can also quickly share color palettes with your fellow developers!

It’s available as a standalone tool or as the Harmonizer Figma plugin.

Using OKLCH in Figma today

Figma doesn’t support OKLCH in its color picker just yet, but you can use third party color pickers, such as the OkColor Figma plugin from Doko Zero. It’s a custom color picker that takes allows yout to use OKLCH right inside Figma.

Generating OKLCH color palettes for projects

From OKLCH color picker co-creator Roman Shamin: this UI color palette generator allows you to launch your project with an OKLCH color palette for your brand quick. Just choose the closest color to your brand color and then it generates variables for all your basic primitive colors, text, borders, and surfaces. It will even generate a dark mode!

More precise color assessibility with OKLCH

apach

apcach is a JavaScript library that helps developers and designers generate accessible color combinations with consistent contrast ratios. Built on the OKLCH color space, it gives us precise control over color attributes like hue, chroma, and lightness while supporting both the APCA (Advanced Perceptual Contrast Algorithm) and WCAG contrast models.

apcach also provides features for adjusting contrast dynamically, converting colors to common CSS formats (like OKLCH, HEX, RGB, and Display-P3), and even calculating the most saturated color possible within a given contrast requirement. apcach is open-source and designed to integrate seamlessly into modern design workflows—including Figma—making it a practical tool for anyone focused on building inclusive and visually coherent interfaces.

Polychrom

Moving on to our next tool in this category, Polychrom is a free Figma plugin by Evil Martians that analyzes the contrast between text and background elements in your Figma designs. It provides real-time feedback and recommendations to help you adjust colors and text sizes for optimal legibility.

It’s also one of the few color pickers that uses the APCA (Accessible Perceptual Contrast Algorithm), which is a new method of calculating color accessibility, far more accurate than current WCAG implementation. (Check our Arthur Objartel’s analysis in this quick post for more info.)

When Polychrom evaluates or suggests text/background combinations, it uses OKLCH to calculate and suggest adjustments that preserve appearance while improving accessibility.

If you’re manually adjusting colors, Polychrom shows and allows adjustments in OKLCH so you can (for example) increase lightness without changing hue.

It also converts colors to the OKLCH color model, making it easy to copy the corresponding CSS codes as needed!

Dynamic themes with OKLCH in CSS

The core challenge of designing and implementing dynamic themes is that teams often have to invent their own color math to ensure some level of perceptual consistency. This is where OKLCH comes into play. With OKLCH, you can slide the hue around and achieve consistent visual results—maintaining consistent lightness and chroma—with no more need for any DIY formulas.

Want to know more? Check our complete guide to implementing dynamic themes with OKLCH in Tailwind CSS here:

More resources and talks on OKLCH!

Let’s cap this post off with some bonus goodies.

• Mastering dynamic UI theming for designers: Roman Shamin explains an essential new principle for generating dynamic UI themes on the fly. The key is the color transformations made possible by the new OKLCH color space.
• Why OKLCH is the future of colors in CSS: PostCSS creator Andrey Sitnik teaches us about native color transformations in CSS and a new function called oklch() to define colors in CSS.
• 3 reasons to switch to OKLCH: This talk from Anton Lovchikov will introduce you to the cutting-edge OKLCH color format and, naturally, three reasons to make the switch.
• OKLCH color theme generator