OKLCH Color Tools

The Problem I Kept Running Into

As a web developer, I spent way too much time fighting with colors. You know the drill - you pick a blue, then try to make a lighter version for hover states. HSL says "just increase the lightness by 20%," but the result looks off. Sometimes barely different, sometimes way too bright.

The math worked, but my eyes disagreed.

Discovering OKLCH

Then I found OKLCH. It's a color space that actually matches human perception. When you increase lightness by 20%, it looks 20% lighter. When you set two colors to the same chroma value, they feel equally vibrant.

Finally, a color system where the numbers made sense.

The Missing Tools Problem

Here's where it got frustrating. OKLCH is now part of CSS Color Level 4 and works in modern browsers. But most color tools still focus on HEX, RGB, and HSL. I found myself:

• Manually converting values between formats

• Googling "OKLCH browser support" constantly

• Building palettes by trial and error

• Double-checking contrast ratios in separate tools

I needed simple, practical tools that didn't exist yet.

Building What I Needed

So I built them:

OKLCH Color Picker - A straightforward picker that shows you the actual OKLCH values and handles conversions.

Palette Generator - Create color schemes that are actually perceptually balanced, not just mathematically balanced.

Contrast Checker - Make sure your colors meet WCAG accessibility standards before shipping.

Compatibility Checker - Know exactly which browsers support OKLCH and what fallbacks you need.

Why Share This?

I made these tools free and open because better tools lead to better websites. As OKLCH support grows, I want designers and developers to adopt it confidently without the friction I experienced.

Color is fundamental to web design. If we can work with it more intuitively, we build better, more accessible experiences for everyone.

That's why OKLCH Color Tools exists.

Try it here if you’re curious: https://www.oklch.click/