OKLCH Color Converter

Convert between modern CSS OKLCH/LCH and HEX/RGB/HSL/LAB.

Base Color

Pick or type a color to convert.

Modern Spaces

Edit OKLCH or LCH directly.

L
C
H
L
C
H
Hue229°
Saturation76%
Lightness66%

Examples

Convert a brand color to OKLCH

Input
HEX: #667eea
Output
RGB: rgb(102, 126, 234)
HSL: hsl(229, 76%, 66%)
LAB: lab(56, 12, -56)
LCH: lch(56% 57 282)
OKLCH: oklch(0.620 0.172 277)

All six representations of the same color. OKLCH's L=0.62 and C=0.172 give you direct perceptual handles for tweaking lightness or saturation.

Out-of-gamut OKLCH warning

Input
OKLCH: oklch(0.7 0.4 30)
Output
Mapped to: #ff5002 (clamped from out-of-sRGB)
⚠ Warning: the current OKLCH value maps outside the sRGB gamut.

C=0.4 at hue 30° exceeds what sRGB can encode, so the visible color is clamped to the nearest in-gamut value. The warning flags this so you know the OKLCH input was lossy.

About this tool

The OKLCH Color Converter translates any sRGB color between modern perceptual color spaces and the familiar HEX / RGB / HSL / LAB triples. OKLCH is the polar form of OKLab — Björn Ottosson's 2020 perceptual space — and is the basis of the new `oklch()` and `lch()` CSS color functions defined in CSS Color Module Level 4.

Unlike HSL, OKLCH is designed so that equal numerical changes in L, C, or H produce roughly equal perceptual changes. That makes it the recommended space for hand-tweaking a color's lightness, designing perceptually even ramps, and predicting how a color will appear on screen. The tool lets you drive the color from any of the supported spaces (HEX, RGB, HSL, OKLCH, LCH, LAB); when you type into OKLCH or LCH, the result is mapped back through OKLab to sRGB and gamut-clamped — and the tool surfaces a warning when the current OKLCH value cannot be represented faithfully inside sRGB.

How to use

  1. Pick a starting color

    Use the Color picker (or paste a hex) to set the base color. The right card immediately shows its OKLCH, LCH, LAB, HSL and RGB values.

  2. Read the modern spaces

    OKLCH is reported as `L` (0–1 lightness), `C` (≥0 chroma) and `H` (0–360 hue). LCH is the CIELCh equivalent with L on a 0–100 scale.

  3. Edit OKLCH or LCH directly

    Type into any of the OKLCH / LCH number inputs. The base color and all derived values update instantly. A warning appears when the value falls outside the sRGB gamut.

  4. Copy any format

    Every field has a Copy button. Use the OKLCH button to copy a `oklch(L C H)` snippet you can paste into CSS variables or design tokens.

Use cases

Migrating a design system to OKLCH

Convert every token from HEX to OKLCH so future tweaks can be made in a perceptual space. Browsers without OKLCH support fall back gracefully via the standard CSS color fallback chain.

Designing perceptually even ramps

Use OKLCH L and C values to build color scales that look evenly stepped to the eye — far better than RGB interpolation for hero gradients, depth levels, and chart series.

Exploring out-of-gamut colors

Push OKLCH C up until the warning appears to find the maximum chroma a hue can carry in sRGB, then back off slightly for a still-vivid but fully reproducible color.

Common mistakes

Mistake:Assuming OKLCH L behaves like HSL L.

Fix:OKLCH L is a perceptually calibrated lightness (0 = black, 1 = white). A 0.5 in OKLCH is much darker than 50% in HSL — the scales are not interchangeable.

Mistake:Ignoring gamut warnings.

Fix:If OKLCH warns the value is out of sRGB, the rendered color has been gamut-mapped — your OKLCH input no longer matches the displayed hex.

Mistake:Rounding OKLCH values too aggressively.

Fix:OKLCH C is small (typically 0–0.4) and L is 0–1. Rounding to two decimals can shift the rendered color visibly. Use three decimals in production CSS.

Frequently asked questions

References & standards

Related tools

Box Shadow Generator

Visual CSS box-shadow generator. Create beautiful shadows with live preview and copy the CSS code.

Color Blindness Simulator

Simulate color blindness on palettes and images. Compare protanopia, deuteranopia, tritanopia, and more side-by-side.

Color Contrast Checker

Advanced WCAG accessibility compliance checker with color blindness simulation, multiple text sizes, and comprehensive analysis features.

Color Converter

Convert colors between multiple formats (HEX, RGB, HSL, HSV, CMYK, LAB) with color blindness simulation, named colors, and batch processing

Color Extractor

Extract colors from uploaded images by hovering over pixels to get precise color values.

Color Generator

Generate color palettes, analyze colors, and create gradients with this comprehensive color tool.