Convert OKLab color values to RGB, HEX, and HSL instantly — with gamut warnings for colors outside standard displays. Free, no signup.
Step 1 — Nonlinear OKLab to LMS
l_ = L + 0.3963377774·a + 0.2158037573·b
m_ = L - 0.1055613458·a - 0.0638541728·b
s_ = L - 0.0894841775·a - 1.2914855480·b
Step 2 — Cube to get linear LMS
l = l_³ m = m_³ s = s_³
Step 3 — LMS to linear sRGB
R = 4.0767416621·l - 3.3077115913·m + 0.2309699292·s
G = -1.2684380046·l + 2.6097574011·m - 0.3413193965·s
B = -0.0041960863·l - 0.7034186147·m + 1.7076147010·s
Step 4 — Gamma-encode to sRGB
c ≤ 0.0031308 → 12.92·c
c > 0.0031308 → 1.055·c^(1/2.4) - 0.055
then multiply by 255 and round
What Is OKLab to RGB Conversion?
OKLab to RGB conversion takes a color defined in the OKLab perceptual color space — using lightness (L), green-red (a), and blue-yellow (b) values — and translates it into the RGB values (0–255 per channel) that screens and browsers actually render. The conversion runs through linear sRGB as an intermediate step, then applies gamma correction to produce the final display-ready RGB output.
This conversion matters because OKLab was designed for color manipulation — building palettes, blending colors, adjusting lightness — while RGB is the format every screen, image file, and CSS color property ultimately needs. A tool or design system that computes colors in OKLab still has to convert to RGB (or a CSS-recognized format) before that color reaches a browser.
OKLab vs RGB: What’s the Difference?
| OKLab | RGB | |
|---|---|---|
| Purpose | Perceptually uniform color manipulation | Device/display color representation |
| Structure | Lightness (L) + two opponent axes (a, b) | Red, Green, Blue channel intensities |
| Uniform lightness steps | Yes — equal L changes look equally different to the eye | No — equal RGB changes don’t look equally different |
| Gamut | Can represent colors outside sRGB | Limited to the sRGB display gamut |
| Where it’s used | Color science, palette generation, CSS oklab()/oklch() | Screens, image formats, most CSS colors historically |
| Human-readable at a glance | Not really — values aren’t intuitive | Somewhat — most people can picture “255,0,0” as red |
The core distinction: OKLab is built for doing math on colors — mixing two colors, generating a lightness scale, checking contrast — because moving the same distance in OKLab space produces a consistent perceived change. RGB is built for displaying colors, but equal RGB steps don’t correspond to equal perceived brightness or hue shifts, which is exactly the problem OKLab was designed to fix.
In practice, a modern color workflow often computes or adjusts a color in OKLab, then converts to RGB or OKLCH for the final CSS output — which is exactly what this tool does.
How the OKLab to RGB Formula Works
Converting OKLab to RGB is a four-step matrix transformation, developed by Björn Ottosson as part of the OKLab color space specification:
Step 1 — OKLab to nonlinear LMS. The L, a, b values are combined through a fixed matrix to produce three intermediate values (l′, m′, s′), representing a nonlinear approximation of long, medium, and short-wavelength cone response.
Step 2 — Cube to linear LMS. Each of l′, m′, s′ is cubed to remove the nonlinearity, producing linear LMS values (l, m, s).
Step 3 — LMS to linear sRGB. A second fixed matrix converts linear LMS into linear sRGB — red, green, and blue values that are physically proportional to light intensity but not yet gamma-corrected.
Step 4 — Gamma encoding. Linear sRGB isn’t what browsers or screens expect directly — it needs gamma encoding. Values at or below 0.0031308 are scaled linearly (×12.92); values above that threshold go through the sRGB power curve. The result, multiplied by 255 and rounded, is the final RGB output.
If any channel falls outside the 0–1 range after Step 3, the color lies outside the sRGB gamut — OKLab can represent colors no standard screen can display, so those values get clamped to the nearest displayable RGB, which this tool flags automatically.
When You’d Use This Conversion
- Design systems and color tokens — if a design system defines colors in OKLab for perceptually consistent lightness scales, you need RGB or HEX to actually apply them in CSS, image assets, or brand guidelines that expect standard color formats.
- Debugging CSS
oklab()values — modern CSS supportsoklab()andoklch()directly, but for older browser fallbacks, email templates, or tools that only accept HEX/RGB, converting first is necessary. - Color science and palette generation workflows — when colors are computed or interpolated in OKLab (common for generating perceptually even gradients or accessible color scales), converting the final values to RGB is the last step before shipping them.
Frequently Asked Questions
What is OKLab vs RGB?
OKLab is a perceptually uniform color space designed for color calculations, while RGB is the channel-based format screens use to display color. OKLab makes operations like blending or generating lightness scales behave more predictably to the human eye; RGB is what ultimately gets rendered.
What’s the formula to convert OKLab to RGB?
The conversion runs OKLab through a matrix transform to nonlinear LMS, cubes those values to get linear LMS, applies a second matrix to reach linear sRGB, then gamma-encodes the result into standard 0–255 RGB. The full step-by-step math is shown in the “Show the math” panel above.
Can OKLab represent colors that RGB can’t display?
Yes. OKLab’s coordinate space extends beyond the sRGB gamut, so some valid OKLab values correspond to colors no standard screen can show. When that happens, this tool clamps the result to the nearest displayable RGB and flags it with a gamut warning.
Is OKLab supported in CSS today?
Yes — oklab() and oklch() are part of the CSS Color Module Level 4 specification and are supported in current versions of major browsers. Older browsers need a fallback color (like the RGB or HEX value this tool generates) declared alongside the OKLab value.