Convert RGB colors to OKLCH — the modern perceptual space behind new CSS color work, where equal lightness numbers actually look equally light. Get the oklch() value browsers understand, computed with Björn Ottosson’s reference matrices as adopted by CSS Color Level 4.
Settings
Generated locally in your browser — your settings and results never leave this page.
The upgrade path for color thinking
RGB tells displays what to emit; OKLCH tells humans what they will see: L for honest lightness, C for real colorfulness, H for hue. Converting existing colors into OKLCH is usually the first step of modernizing a palette — once tokens live there, every derived state (hover, disabled, dark-mode) becomes a predictable arithmetic tweak.
Worked example: rgb(65, 105, 225)
Royal blue:
linear sRGB → LMS (cone-ish response) → cube root → OKLab (0.5598, -0.0118, -0.1879) → polar rgb(65, 105, 225) = oklch(0.5598 0.1882 266.4)
Now the practical magic: a hover state is oklch(0.4998 0.1882 266.4) — same C and H, L nudged down 0.06 — and it will look exactly “one step darker”, which the equivalent RGB edit never guarantees. Tints, disabled states and dark-theme flips follow the same single-axis pattern.
Reading OKLCH values fluently
Calibration points worth memorizing: L 0.6–0.75 is the UI sweet zone; C under 0.04 reads as neutral, 0.1–0.2 as clearly colorful, 0.25+ as neon (and often out of gamut); hue families — ~29° red, ~90° yellow, ~145° green, ~264° blue. Ten minutes with this converter and a few brand colors builds the fluency.
Continue the workflow
Equal-lightness system palettes: OKLCH Palette Generator. Single-color exploration on sliders: the OKLCH Color Generator. Bulk stylesheet migration: the batch HEX to OKLCH converter alongside this single-color page.
Reference values, computed live
A small reference set makes OKLCH fluency arrive faster. The exact coordinates of seven everyday CSS colors, computed with the reference matrices:
| Color | RGB | OKLCH |
|---|---|---|
| orchid | rgb(218, 112, 214) | oklch(0.702 0.181 328.7) |
| tomato | rgb(255, 99, 71) | oklch(0.696 0.196 32.3) |
| mediumseagreen | rgb(60, 179, 113) | oklch(0.684 0.144 155) |
| mediumpurple | rgb(147, 112, 219) | oklch(0.627 0.158 296.7) |
| goldenrod | rgb(218, 165, 32) | oklch(0.752 0.147 84) |
| crimson | rgb(220, 20, 60) | oklch(0.571 0.222 20.1) |
| olivedrab | rgb(107, 142, 35) | oklch(0.599 0.137 126.3) |
Two patterns worth extracting: chroma peaks for the saturated mid-lightness colors and collapses for anything pale or deep, and hue numbers cluster into family bands (reds near 25°, greens near 140°, blues past 250°). Recognizing the bands turns oklch() values in a code review into colors in your head.
Migrating a legacy palette, step by step
The standard modernization walk: convert each existing token here, round L to two decimals and C/H sensibly, and record the triples. Immediately, patterns surface that hex never showed — five grays with five slightly different hue casts, two “different” blues within ΔE 2, an accent whose chroma dwarfs everything else. Normalize deliberately (one hue for all grays, shared L bands across categories), regenerate the hex fallbacks, and the palette emerges smaller, more consistent and finally editable on axes that mean something. Teams report the audit findings alone justify the exercise.
How to use the RGB to OKLCH Converter
- Enter the RGB color.
- The result updates live as you type – no convert button needed.
- Copy the oklch() value – the most future-proof CSS notation for it.
- Share the exact result: the page URL updates with your input, so the link reproduces it.
Frequently asked questions
What OKLCH value does rgb(30, 144, 255) have?
oklch(0.652 0.1901 253.2) – lightness 0.65, healthy chroma, hue 253.2° in OKLCH's blue region. The conversion uses Björn Ottosson's reference matrices exactly as CSS Color Level 4 adopted them.
What are the three OKLCH components?
L: perceptual lightness 0-1, honest across hues. C: chroma from 0 (gray) upward – no fixed top, the gamut decides. H: hue angle in degrees. Together they form the polar version of OKLab.
Why is OKLCH called perceptually uniform?
Because equal numeric steps were tuned to look like equal visual steps – both in lightness and around the hue wheel. It is markedly better than Lab in hue linearity (especially blues) and dramatically better than HSL in everything.
Is converting RGB to OKLCH lossless?
Yes – the pipeline is smooth and invertible, and this site's tests round-trip a grid of colors to the exact 8-bit values. Only formatting precision (4 decimals shown) introduces sub-visible rounding.
Where should I actually use oklch() in CSS?
Design tokens and anywhere you derive variants: hover states via L offsets, tints via C reduction. Browsers have shipped it across the board, and it future-proofs colors for wider-gamut displays – keep hex fallbacks only for legacy support.
How does chroma relate to HSL saturation?
Loosely: both mean "colorfulness", but chroma is absolute while saturation is relative to the maximum at that lightness. A pastel and a neon can both be S=100% in HSL; their chromas differ several-fold.
What tools continue the OKLCH workflow here?
The OKLCH Palette Generator builds equal-lightness palettes, the existing OKLCH Color Generator mixes single colors with sliders, and the Gamut tools police the sRGB boundary.
