Color converter
OKLab to OKLCH and OKLCH to OKLab
Type an OKLab value or an OKLCH value, and the other one appears as you type. Every other notation of the same color is listed below, with each step of the maths.
Try
The converter needs JavaScript. The values shown are for #D3AF37, and the worked examples below read without it.
Result
Inside sRGB
Showing the last color that converted.
- OKLab
oklab(76.55% -0.00375 0.13842)- OKLCH
oklch(76.55% 0.13847 91.55)- HEX
#D3AF37- RGB
rgb(211 175 55)- HSL
hsl(46.2 63.9% 52.2%)
Color converters
Every format at once
The same color in every notation the converters know. Each name opens its own converter.
| Format | Value | Copy |
|---|---|---|
| Web and CSS | ||
| HEX CSS | #D3AF37 | |
| RGB CSS | rgb(211 175 55) | |
| sRGB (0 to 1) CSS | color(srgb 0.8275 0.6863 0.2157) | |
| Linear sRGB CSS | color(srgb-linear 0.65141 0.42869 0.0382) | |
| HSL CSS | hsl(46.2 63.9% 52.2%) | |
| HSV (HSB) Notation | hsv(46.2 73.9% 82.7%) | |
| HWB CSS | hwb(46.2 21.6% 17.3%) | |
| CSS color name CSS | goldenrodNearest ΔE00 5.00 | |
| Perceptual and CIE | ||
| OKLCH CSS | oklch(76.55% 0.13847 91.55) | |
| OKLab CSS | oklab(76.55% -0.00375 0.13842) | |
| CIELAB CSS | lab(73.19 4.7 62.68) | |
| CIE LCH CSS | lch(73.19 62.86 85.71) | |
| CIE XYZ (D65) CSS | color(xyz-d65 0.42882 0.44786 0.1) | |
| CIE XYZ (D50) CSS | color(xyz-d50 0.45463 0.45457 0.07797) | |
| CIE xyY Notation | xyY(0.43906 0.45855 0.44786) | |
| CIELUV Notation | luv(72.75 30.75 69) | |
| Wide gamut | ||
| Display P3 CSS | color(display-p3 0.80472 0.69157 0.30739) | |
| Rec. 2020 CSS | color(rec2020 0.74174 0.66017 0.25864) | |
| Adobe RGB (1998) CSS | color(a98-rgb 0.78545 0.68035 0.26584) | |
| ProPhoto RGB CSS | color(prophoto-rgb 0.67408 0.63343 0.26964) | |
| Print and paint | ||
| CMYK Notation | cmyk(0% 17.1% 73.9% 17.3%) | |
| RAL Classic Notation | RAL 1032 Broom yellowNearest ΔE00 3.02 | |
| Video | ||
| YCbCr (JPEG, BT.601) Notation | ycbcr(172.08 61.93 155.76) | |
| YCbCr (HD video, BT.709) Notation | ycbcr709(165.43 71.67 148.64) | |
| Code and platforms | ||
| Decimal integer Notation | 13872951 | |
| Android and Flutter ARGB Notation | 0xFFD3AF37 | |
| Android color int Notation | -2904265 | |
| SwiftUI and UIKit Notation | Color(red: 0.8275, green: 0.6863, blue: 0.2157) | |
| GLSL vec3 / vec4 Notation | vec3(0.8275, 0.6863, 0.2157) | |
| Embedded and terminal | ||
| RGB565 Notation | 0xD567Lossy | |
| ANSI 256 (xterm) Notation | 38;5;178Nearest ΔE00 3.11 | |
Every step of the maths
How OKLab becomes OKLCH
Each step shows the values for the color above, as the converter computes them.
- Start OKLab
oklab(76.55% -0.00375 0.13842) - Then OKLCH
C = √(a² + b²); h = atan2(b, a)oklch(76.55% 0.13847 91.55)
OKLCH
About OKLCH
OKLCH gives lightness, chroma and hue in OKLab, a space designed so that equal steps look equal. It can describe colors outside sRGB, which wide-gamut screens can show.
How this page writes it
- Lightness is written as a percentage to two decimal places, chroma to five and hue to two; at that rounding every 8-bit color comes back unchanged.
- When the chroma rounds to 0 the hue is written as none.
Watch for
- An OKLCH color outside sRGB has no exact hex; the hex shown keeps its lightness and hue and lowers its chroma.
Worked examples
OKLab to OKLCH
Each row is the converter's own output, and a test re-runs every row.
| Color | OKLab | OKLCH |
|---|---|---|
| White | oklab(100% 0 0) | oklch(100% 0 none) |
| Black | oklab(0% 0 0) | oklch(0% 0 none) |
| Middle gray | oklab(59.99% 0 0) | oklch(59.99% 0 none) |
| Red | oklab(62.8% 0.22486 0.12585) | oklch(62.8% 0.25768 29.23) |
| Green | oklab(86.64% -0.23389 0.1795) | oklch(86.64% 0.29483 142.5) |
| Blue | oklab(45.2% -0.03246 -0.31153) | oklch(45.2% 0.31321 264.05) |
| Royal blue | oklab(54.61% -0.02667 -0.21355) | oklch(54.61% 0.21521 262.88) |
| Gold | oklab(76.55% -0.00375 0.13842) | oklch(76.55% 0.13847 91.55) |
Next
Related converters
- HEX and RGBHex codes, rgb() and alpha
- HEX and OKLCHPerceptual color and gamut
- HEX and OKLabPerceptual lightness and two opponent axes
- HEX and LabCIELAB in D50, as CSS lab()
- HEX and LCHCIELAB as lightness, chroma and hue
- HEX and XYZCIE XYZ, D65, as color(xyz-d65)
- All color convertersPaste a color in any notation the converters read, and see it in all of them.
Method
Sources and testing
- CSS Color Module Level 4, 9.4: the oklab() and oklch() functions w3.org
- Björn Ottosson, A perceptual color space for image processing (2020) bottosson.github.io
- Conversions run in your browser with the site's shared color code; nothing you type is sent anywhere.
- An automated test recomputes every value on this page and reads every format back.
- Checked with a keyboard, the axe engine and Playwright in Chromium, in light and dark themes at phone and desktop widths. It has not yet been checked with a screen reader.
Found a mistake? Tell us and we will correct it.