Colors Browser-only processing Updated March 19, 2026

OKLCH Converter

Convert colors to and from OKLCH, the modern perceptually uniform color space. Get gamut warnings for colors outside sRGB.

Enter color (HEX, RGB, HSL)

#6366F1

HEX

#6366F1

RGB

rgb(99, 102, 241)

OKLCH

oklch(0.585 0.204 277.1)

About OKLCH

OKLCH is a perceptually uniform color space. Unlike HSL, adjusting lightness in OKLCH produces visually consistent results across hues, making it ideal for accessible color palettes.

How to Use

Choose conversion direction: HEX → OKLCH or OKLCH → HEX
Enter your color or adjust OKLCH sliders
L = Lightness (0-1), C = Chroma (0-0.4), H = Hue (0-360°)
Watch for gamut warnings when creating OKLCH colors
Copy the generated values

Use Cases

For dashboards and data-heavy UI

Build clear hierarchy with dependable contrast, semantic tokens, and readable data colors.

For brand palettes and design systems

Create reusable color scales and exports for CSS variables, Tailwind, and documentation handoff.

Glossary Terms

WCAG

Understand contrast levels and accessibility requirements.

OKLCH

Learn perceptual color controls for modern UI systems.

Color Spaces

Compare HEX, RGB, HSL, and OKLCH usage in practice.

Frequently Asked Questions

What is OKLCH? ▼

OKLCH is a perceptually uniform color space with Lightness, Chroma (saturation), and Hue. Unlike HSL, equal steps in lightness appear visually equal across all hues.

Why use OKLCH over HSL? ▼

OKLCH produces more predictable and accessible color palettes. When you lighten blue and yellow by the same amount in OKLCH, they appear equally lighter, which isn't true in HSL.

What does "out of gamut" mean? ▼

sRGB (the color space of monitors) can't display all OKLCH colors. Out-of-gamut colors are clamped to the nearest displayable color, which may not match exactly.

Can I use OKLCH in CSS? ▼

Yes! Modern browsers support oklch() in CSS. Example: color: oklch(0.7 0.15 250);