Color Space Converter
Convert colors between HEX, RGB, HSL, OKLCH, OKLAB, LCH, LAB, and Display P3. See gamut boundaries and copy CSS code for any format.
How to Use the Color Space Converter
1
Enter a Color
Type any CSS color value — HEX, RGB, HSL, OKLCH, LCH, OKLAB, or Display P3 — or use the color picker. The tool parses it automatically.
2
View All Conversions
See the color translated into every major color format. Each result shows the exact CSS code you can copy.
3
Check Gamut Boundaries
If a color can't be displayed in a given space, a gamut warning appears. Use the warning to decide when to provide fallback colors.
CSS Color Space Reference
| Color Space | CSS Function | Components | Best For |
|---|---|---|---|
| sRGB | rgb() / #hex | R 0-255, G 0-255, B 0-255 | Universal browser support |
| HSL | hsl() | H 0-360, S 0-100%, L 0-100% | Intuitive color picking |
| OKLCH | oklch() | L 0-1, C 0-0.4, H 0-360 | Gradients, palettes, contrast |
| OKLAB | oklab() | L 0-1, a -0.4-0.4, b -0.4-0.4 | Color science |
| LCH | lch() | L 0-100, C 0-230, H 0-360 | Print / legacy color work |
| Display P3 | color(display-p3) | R 0-1, G 0-1, B 0-1 | Wide-gamut displays (Apple) |
Frequently Asked Questions
OKLCH is a newer, more perceptually uniform color space than LCH. Equal changes in OKLCH values correspond to equal perceived color differences, making it better for gradients, color palettes, and accessible design. LCH (CIE LCH) was standardized in 1976 and has known issues with blue/purple hue distortion.
Display P3 is a wide-gamut color space used by Apple devices. It covers about 45% more visible colors than sRGB, with especially vivid reds and greens. Use it via the CSS color() function for displays that support it, with an sRGB fallback.
OKLCH is the default interpolation space for CSS color-mix() because it produces smooth, perceptually uniform gradient transitions without the gray dead zones or unexpected hue shifts that occur in sRGB or LCH interpolation.
A color is out of gamut when its components fall outside a color space's valid range. For sRGB, this means any linear RGB component below 0 or above 1. This tool shows gamut warnings when you convert a color that cannot be accurately displayed in a given color space.
The CSS color() function lets you specify colors in any supported color space, including Display P3, Rec.2020, and others. For example, color(display-p3 1 0 0) specifies pure red in the Display P3 gamut. It requires modern browser support.
Ad