HEX/RGB → OKLCH conversion + slider editing. Visualize CSS Color 4's perceptually uniform color space.
Preview
Code
Hue rotation (H 0°–360°)

How to use

  1. Enter a HEX code or use the color picker.
  2. Adjust L (Lightness), C (Chroma), H (Hue) sliders for fine-tuning.
  3. Preview updates live with all converted codes (HEX, RGB, OKLCH).
  4. Click 📋 Copy to get the CSS oklch() function.

Key features

  • Accurate sRGB ↔ OKLab ↔ OKLCH bi-directional conversion (D65 white point)
  • L·C·H sliders for perceptually uniform editing
  • Hue rotation bar at the same L·C for visual comparison
  • Instant CSS oklch() function copy
  • Automatic sRGB gamut clamping

Use cases

  • Design systems — generate shades with the exact same perceived tone
  • Accessibility — use L value as an intuitive contrast adjustment
  • Better gradients — avoid the grey band in RGB-interpolated gradients
  • Tailwind v4 / Open Props — feed values directly into modern CSS variables
  • Dark mode — invert L only to preserve chroma

What is OKLCH? Why does it matter?

OKLCH is the cylindrical form (L=Lightness, C=Chroma, H=Hue) of the OKLab color space published by Björn Ottosson in 2020. Unlike HSL, OKLCH is perceptually uniform — colors with the same L value appear equally bright regardless of hue. The problem of yellow looking much brighter than blue at the same HSL lightness disappears. It's standardized in CSS Color Module Level 4 with native oklch() support in all modern browsers (Chrome 111+, Safari 15.4+, Firefox 113+). Tailwind v4 adopted it as its base color system.

FAQ

How is OKLCH different from HSL?

HSL is a direct RGB transformation so the same L value gives different perceived brightness across hues (yellow bright, blue dark). OKLCH uses a human vision model so same L = same perceived brightness across all hues.

Are all OKLCH values displayable?

No. High C (chroma) values can exceed the sRGB gamut (P3 / Rec.2020 wide colors). The tool auto-clamps to the nearest sRGB color.

What about older browsers?

Browsers from before 2023 don't support oklch(). We provide HEX codes as a fallback. PostCSS plugins can also transpile at build time.

Is it free?

Yes, all conversion happens in your browser, unlimited use, no sign-up.