Color Converter: HEX, RGB, HSL, HSV, HWB, CMYK, LAB and OKLCH
Convert any color between HEX, RGB, HSL, HSV, HWB, CMYK, CIELAB and OKLCH, see its CSS name and WCAG contrast on white and black. Free, in your browser.
Accepts HEX (#rgb, #rrggbb, #rrggbbaa), rgb()/rgba(), hsl()/hsla(), hsv(), hwb(), cmyk(), lab(), oklch() and the 148 CSS color names.
dodgerblue#1e90ffrgb(30, 144, 255)hsl(209.6, 100%, 55.9%)hsv(209.6, 88.2%, 100%)hwb(209.6 11.8% 0%)cmyk(88.2%, 43.5%, 0%, 0%)lab(58.36% 0.89 -64.78)oklch(65.2% 0.1901 253.21)CIELAB uses the D50 white point as in CSS Color 4. Values are rounded for display only; conversions use full precision. Alpha is ignored for CMYK, HSV and contrast.
What is Color Converter?
Paste a color in any common notation and get it in eight color models at once: HEX, RGB(A), HSL(A), HSV, HWB, CMYK, CIELAB and OKLCH. The tool also shows the matching CSS color name (if there is an exact one) and the WCAG contrast ratio of the color on white and on black.
How to use Color Converter
- Type or paste a color into Color (any format), for example
#1e90ff,rgb(30 144 255),hsl(210 100% 56%),oklch(65% 0.19 253)ortomato, or pick one with the color picker. - Read the converted values in the result list; every row has its own Copy button.
- Check CSS name for an exact named-color match and the Contrast on white / black cards for WCAG AA and AAA results.
- If a LAB or OKLCH value is outside sRGB, a warning tells you it was clipped to the nearest displayable color.
Example
#ff0000
rgb(255, 0, 0) · hsl(0, 100%, 50%) · hsv(0, 100%, 100%) · hwb(0 0% 0%) · cmyk(0%, 100%, 100%, 0%) · lab(54.29% 80.8 69.89) · oklch(62.8% 0.2577 29.23) · CSS name: red
Contrast on white is 3.99:1, so pure red fails WCAG AA for normal text.
When to use Color Converter
Use it when moving colors between design tools and CSS, when you need a perceptual model like OKLCH to build palettes, or to check text contrast quickly. Do not use the CMYK output for professional print proofs: real printing needs an ICC color profile, which this simple formula ignores.
How Color Converter works
Every input is parsed into gamma-encoded sRGB channels plus alpha. HSL, HSV and HWB are the standard cylindrical transforms of sRGB; CMYK is the simple device-independent formula K = 1 − max(R,G,B). For LAB the sRGB values are linearized, converted to CIE XYZ (D65), chromatically adapted to D50 with the Bradford matrix and turned into CIELAB, exactly as in CSS Color 4. OKLCH uses Björn Ottosson's OKLab matrices on linear sRGB. Values are rounded only for display (integers for RGB, one decimal for HSL/HSV/HWB/CMYK, two for LAB). Contrast follows WCAG 2.x relative luminance: (L1 + 0.05) / (L2 + 0.05).
Common Use Cases
- Turn a brand HEX code from a style guide into
hsl()oroklch()for CSS variables - Convert an
rgba()value from DevTools into an 8-digit HEX with alpha - Check whether a text color passes WCAG AA (4.5:1) on a white background
- Find the CSS keyword for a HEX value such as
#663399(rebeccapurple) - Get approximate CMYK percentages for an office printout
FAQs
Why does the LAB value differ from Photoshop?
This tool follows CSS Color 4, which uses the D50 white point with Bradford adaptation. Some apps show LAB relative to D65, which gives slightly different numbers.
What does "outside the sRGB gamut" mean?
LAB and OKLCH can describe colors a normal sRGB screen cannot show. Such inputs are clipped channel by channel to the nearest displayable color, and the warning tells you that the HEX/RGB values are approximations.
How is the contrast ratio rounded?
It is truncated, not rounded up, to two decimals so that a ratio of 4.499 is never shown as passing 4.5:1.
Is alpha kept in every format?
Alpha is kept in HEX (8 digits), rgba(), hsla(), HWB, LAB and OKLCH. HSV and CMYK have no alpha channel, and contrast is computed for the opaque color.