Use the RGB to OKLCH Converter to turn any RGB, hex, or HSL color into its OKLCH equivalent instantly — no signup required.
Input Color
All Formats
How It Works
RGB to OKLCH conversion runs through four color spaces: sRGB, linear RGB, OKLab, and finally OKLCH. This converter follows the same math the CSS Color Module 4 spec is built on, so the OKLCH value you copy is production-accurate.
Step 1 — sRGB to linear RGB. Each R, G, and B channel (0–255) is normalized to 0–1, then gamma-decoded. Browsers store RGB in gamma-compressed form for display, but color math needs the linear (physically accurate) version first.
Step 2 — Linear RGB to OKLab. The linear R, G, B values are multiplied through a fixed 3×3 matrix to get LMS cone response values, then cube-rooted and multiplied through a second matrix to produce L (lightness), a (green–red axis), and b (blue–yellow axis). This is the OKLab step — the perceptually uniform space OKLCH is built on.
Step 3 — OKLab to OKLCH. OKLab’s a/b coordinates are converted to polar form: C (chroma) is the distance from the center, calculated as √(a² + b²), and H (hue) is the angle, calculated as atan2(b, a) in degrees.
Step 4 — Format as CSS. The result is written as oklch(L% C H) — for example, oklch(62.3% 0.188 259.8) for a mid-tone blue. This is valid, spec-compliant CSS Color 4 syntax you can drop directly into a stylesheet.
OKLCH vs RGB
OKLCH and RGB solve different problems: RGB describes how a screen mixes light, while OKLCH describes how a color actually looks to the human eye.
| RGB | OKLCH | |
|---|---|---|
| What it measures | Red/green/blue light intensity | Perceived lightness, chroma, and hue |
| Perceptual uniformity | No — equal numeric steps don’t look like equal visual steps | Yes — a +5% lightness change looks the same across any hue |
| Color gamut | Limited to sRGB | Covers wider gamuts, including Display P3 |
| Editing a shade | Requires recalculating R, G, and B together | Change one value (L, C, or H) independently |
| Browser support | Universal | Supported in all major browsers since 2023 |
| Best for | Legacy code, raw pixel/image data | Design systems, color scales, accessible palettes |
The practical difference shows up when building a color scale. Lightening an RGB blue by tweaking its channels often shifts the hue toward gray or purple. Increasing the L value in OKLCH keeps the hue locked, because lightness and hue are independent axes — this is why CSS Color 4 and tools like Tailwind CSS v4 moved to OKLCH as the default color model.
Use Cases
- Building a design system in WordPress theme.json — OKLCH lets you define a base brand color once and generate accessible, perceptually consistent tints and shades for buttons, hover states, and text, instead of eyeballing hex variations.
- Migrating a Tailwind or component library to CSS Color 4 — convert existing RGB/hex design tokens to OKLCH in bulk without guessing at equivalent values.
- Fixing inconsistent color scales — if a client’s brand palette “feels” uneven (some shades pop, others look muddy), converting to OKLCH exposes the actual lightness/chroma values so the scale can be corrected mathematically rather than by eye.
FAQ
What is OKLCH color format?
OKLCH is a CSS color format that defines color using perceptual Lightness, Chroma, and Hue instead of red, green, and blue values, making it easier to predict how a color change will actually look.
How do I convert RGB to OKLCH?
Enter an RGB value, hex code, or pick a color above — the converter calculates the linear RGB, OKLab, and OKLCH values automatically and displays the ready-to-use oklch() CSS string.
What’s the formula for converting RGB to OKLCH?
RGB is first gamma-decoded to linear RGB, transformed into LMS cone values, cube-rooted, then transformed into OKLab’s L/a/b coordinates; OKLCH’s chroma is √(a² + b²) and hue is atan2(b, a) converted to degrees.
Is OKLCH better than RGB?
Neither is “better” universally — RGB is simpler for raw pixel data, but OKLCH is more predictable for design work because equal numeric changes produce visually equal changes, which RGB cannot guarantee.
Can I use OKLCH in production CSS today?
Yes — OKLCH has been supported in all major browsers (Chrome, Firefox, Safari, Edge) since 2023, and is part of the official CSS Color Module 4 specification.