HEX to OKLCH Converter

About the HEX to OKLCH Converter

What is HEX to OKLCH conversion?

A HEX code like #3B82F6 describes a color by its red, green, and blue components in hexadecimal — compact, but it tells you nothing about how the color looks. OKLCH describes the same color perceptually: Lightness (how bright it appears to the eye), Chroma (how colorful), and Hue (the angle on the color wheel). This converter takes any HEX code and returns the matching oklch() value, along with RGB, HSL, LCH, LAB, HWB and CMYK.

OKLCH is the headline feature of modern CSS color — it's what Tailwind CSS v4 uses for its entire default palette — because equal steps in its numbers produce equal-looking steps on screen. Change only the hue and two OKLCH colors keep the same apparent brightness, which HEX and HSL famously can't promise. Everything runs in your browser, so nothing you enter is uploaded.

How to Use This Tool

1. Enter a HEX code. Type it, paste it, pick with the color swatch, or grab a color from your screen with the eyedropper.
2. Read the OKLCH value. The matching oklch() sits at the top of the results, formatted exactly as CSS expects.
3. Fine-tune with the sliders. The R, G and B sliders update every format live as you drag.
4. Copy and explore. One-click copy on every format, plus shades, tints, harmonies and WCAG contrast for the same color.

Common Use Cases

• Modernizing a palette: Translate brand HEX codes into oklch() for a CSS Color 4 design system.
• Working with Tailwind v4: Convert your custom HEX colors into the same format the framework's palette uses.
• Building consistent scales: Once in OKLCH, vary only Lightness to get steps that genuinely look evenly spaced.
• Comparing brightness: The L value tells you which of two hex colors truly reads lighter.
• Checking accessibility: The contrast panel scores the color as text on white and black.

Need the reverse? Use the OKLCH to HEX converter, start from RGB, or browse all our free color tools.

Frequently Asked Questions

What is OKLCH?

OKLCH is a perceptual color format from CSS Color 4 built on the OKLab color space. L is lightness from 0 to 100%, C is chroma (0 for gray, about 0.37 at the most vivid sRGB colors), and H is the hue angle in degrees. Its superpower is that equal numeric changes look like equal visual changes.

Can I use the OKLCH value directly in CSS?

Yes. Something like oklch(62.8% 0.258 29.2) is valid modern CSS and is supported in all major browsers since 2023. You can also add opacity, written as oklch(62.8% 0.258 29.2 / 0.5).

Why does Tailwind CSS use OKLCH?

Tailwind v4 rebuilt its entire default palette in OKLCH so that each shade step, 50 through 950, changes lightness by a perceptually even amount across every hue. Converting your own HEX brand colors to OKLCH lets you extend that palette consistently.

Is the conversion exact?

Yes, every HEX code has one exact OKLCH equivalent. The displayed values are rounded for readability (lightness and hue to one decimal, chroma to three), which is more than enough precision for identical on-screen rendering.

Is this tool free and private?

Completely. The conversion runs entirely in your browser with JavaScript, nothing you enter is uploaded or logged, and the page keeps working offline once loaded.