OKLCH to HEX converter
Paste a OKLCH color to get its HEX value, or pick a color. Every other CSS format updates as you type, and any value copies in one click.
Common colors in OKLCH and HEX
| Color | OKLCH | HEX |
|---|---|---|
| Blue | oklch(62.31% 0.188 259.81) | #3B82F6 |
| Red | oklch(63.69% 0.208 25.33) | #EF4444 |
| Green | oklch(72.27% 0.192 149.58) | #22C55E |
| Amber | oklch(76.86% 0.165 70.07) | #F59E0B |
| Violet | oklch(60.56% 0.219 292.73) | #8B5CF6 |
| Slate | oklch(55.44% 0.041 257.42) | #64748B |
| White | oklch(100% 0 0) | #FFFFFF |
| Black | oklch(0% 0 0) | #000000 |
Why convert to HEX?
HEX is the most compact and widely supported way to write a color, from CSS and SVG to Figma and design handoff.
Color formats explained
- HEX
- Six hexadecimal digits for red, green and blue, like #3B82F6. Add two more digits for opacity (#3B82F680 is 50%). The most common way to write a color in CSS and design tools.
- RGB and RGBA
- Red, green and blue channels from 0 to 255, like rgb(59, 130, 246). RGBA adds an alpha channel from 0 (transparent) to 1 (opaque): rgba(59, 130, 246, 0.5).
- HSL and HSLA
- Hue in degrees, then saturation and lightness as percentages, like hsl(217, 91%, 60%). Easier to tweak by hand than RGB: change the hue to get a new color with the same feel.
- OKLCH
- Perceptual lightness, chroma and hue, like oklch(62.31% 0.188 259.81). Equal steps in lightness look equal to the eye, which makes OKLCH the best format for building shade scales and themes. Supported in every modern browser and used by Tailwind CSS v4.
- LAB
- CIE Lab: lightness plus two color axes, a (green to red) and b (blue to yellow), like lab(54.62% 8.77 -65.79). Device-independent and used for color matching and print workflows.
Color converters
- HEX to RGB
- HEX to HSL
- HEX to OKLCH
- HEX to LAB
- RGB to HEX
- RGB to HSL
- RGB to OKLCH
- RGB to LAB
- HSL to HEX
- HSL to RGB
- HSL to OKLCH
- HSL to LAB
- OKLCH to HEX
- OKLCH to RGB
- OKLCH to HSL
- OKLCH to LAB
- LAB to HEX
- LAB to RGB
- LAB to HSL
- LAB to OKLCH
Need every format at once? Use the color picker. To turn one color into a full scale, try the shades generator.