Color Converter
Convert any colour between HEX, RGB, HSL, HSV, CMYK and OKLCH, with contrast checks.
#2563eb
Nearest named colour: royalblue (#4169e1)
In every format
| Format | Value | Copy |
|---|---|---|
| HEX | #2563eb | |
| RGB | rgb(37 99 235) | |
| HSL | hsl(221.2 83.2% 53.3%) | |
| HWB | hwb(221.2 14.5% 7.8%) | |
| Lab | lab(44.79 21.05 -75.6) | |
| OKLab | oklab(0.546 -0.027 -0.214) | |
| OKLCH | oklch(0.546 0.215 262.9) | |
| HSV / HSB | 221.2°, 84.3%, 92.2% | |
| CMYK | 84%, 58%, 0%, 8% |
HSV and CMYK have no CSS syntax. CMYK is a naive conversion — for print, use your printer’s ICC profile.
Contrast (WCAG 2.2)
| With | Ratio | Normal text | Large text |
|---|---|---|---|
| White text | 5.17:1 | AA | AAA |
| Black text | 4.06:1 | Fails | AA |
Converts a colour written in any CSS syntax — HEX, RGB, HSL, HWB, Lab, LCH, OKLab, OKLCH, color() or one of the 148 named colours — into every other format, with HSV and CMYK for design and print tools. It names the nearest CSS colour, warns when a colour lies outside what an ordinary screen shows, and checks its contrast against white and black text.
Which format to use
HEX and RGB describe the same sRGB colour and work everywhere on the web. HSL and HWB describe it by hue, which makes lighter or greyer variants easy to write by hand. HSV (also called HSB) is the model behind most design-tool pickers; CSS has no syntax for it.
OKLCH gives lightness, chroma and hue in a space built so that equal steps look equal. Two colours with the same OKLCH lightness look about equally light, which HSL does not manage: yellow and blue at 50% HSL lightness look nothing alike. That makes OKLCH the format for building palettes and tints. OKLab is OKLCH in rectangular coordinates, and Lab the older CIE space it improves on.
CMYK here is the naive formula, a starting point only. What ink produces depends on the press, the paper and their ICC profile, so a print job should be converted in software that has that profile.
How to use it
Type or paste a colour into Colour, or click either swatch, in the field or beside the result, to pick one. HEX works with or without its #, and bare numbers such as 255, 87, 51 are read as RGB. Picking a colour keeps the alpha of the one it replaces. currentColor, var() and system colours such as Canvas depend on the page they are used in, so they have no value here; color-mix() and relative colours belong to CSS Color 5 and are not read.
Modern and Legacy, beside the formats, switch the RGB and HSL rows between the modern space-separated form, rgb(37 99 235 / 0.5), and the legacy comma form, rgba(37, 99, 235, 0.5), for older code. Every other row has one syntax. While the text is not a colour, the last result stays on screen, dimmed. The address bar keeps the colour and the syntax, so a copied link opens the same result. Everything runs in your browser.
How the conversions work
Conversions follow CSS Color Module Level 4, through the colorjs.io library by that specification’s editors. HEX, RGB, HSL, HWB, HSV and CMYK can only hold sRGB colours. A colour outside sRGB — a vivid OKLCH, Lab or display-p3 value — is mapped the way CSS maps it: its OKLCH chroma is reduced, keeping lightness and hue, until the colour fits. Lab, OKLab and OKLCH still show the original colour. Values in rgb(), hsl() and hwb() outside their range are clamped, as CSS does.
RGB is rounded to whole numbers; HSL, HWB and HSV to one decimal; Lab to two decimals; OKLab and OKLCH lightness and chroma to three, and OKLCH hue to one; alpha to three. A grey has no hue, so CSS formats write none, while legacy HSL and HSV write 0. The nearest named colour is the one closest in OKLab.
Contrast is the WCAG 2.2 ratio of relative luminances, from 1:1 to 21:1. AA asks for 4.5:1 for normal text and 3:1 for large text (24 px, or about 18.7 px bold); AAA asks for 7:1 and 4.5:1. A ratio is shown to two decimals, but never rounded up across a threshold. A translucent colour is first blended over the background it is measured with: over white for the white-text ratio, over black for the black-text ratio. The text colour advised on the swatch is the one with more contrast on the colour at full opacity.
K = 1 − max(R, G, B); C = (1 − R − K) ÷ (1 − K), likewise M from G and Y from B
Contrast = (L₁ + 0.05) ÷ (L₂ + 0.05), L₁ the lighter relative luminance
Examples
A brand blue
- Input
- #2563eb
- RGB
- rgb(37 99 235)
- HSL
- hsl(221.2 83.2% 53.3%)
- OKLCH
- oklch(0.546 0.215 262.9)
- CMYK
- 84%, 58%, 0%, 8%
White text on it reaches 5.17:1, enough for AA at any size; black text reaches 4.06:1. Its nearest named colour is royalblue.
An OKLCH green beyond sRGB
- Input
- oklch(0.7 0.4 150)
- HEX
- #00c248
- RGB
- rgb(0 194 72)
- OKLCH
- oklch(0.7 0.4 150)
A chroma of 0.4 is more than an sRGB screen can show at this lightness and hue. HEX and RGB give the mapped colour, with its lightness and hue kept and its chroma reduced, while OKLCH keeps the value as written.
The same blue at 50% opacity
- Input
- rgb(37 99 235 / 0.5)
- HEX
- #2563eb80
- HSL
- hsl(221.2 83.2% 53.3% / 0.5)
The alpha becomes the last two HEX digits, rounded to a byte. Over white the blend is pale, and white text on it reaches only 2.14:1; over black it is dark, and black text reaches 1.73:1.
Standards
Parsing, conversion and gamut mapping follow CSS Color Module Level 4. Contrast follows WCAG 2.2, success criteria 1.4.3 (AA) and 1.4.6 (AAA). APCA, the method proposed for WCAG 3, is not used.
Sources
Reviewed
See also
- Number Base Converter — to read a HEX pair as a decimal number.