Color Converter (HEX, RGB, HSL)
A color converter that reads hex, CSS names, rgb(), hsl() and oklch(), and writes each one back with CMYK and the nearest named color.
The colour
hex, a CSS name, rgb(), hsl() or oklch()
How to use
- Put your color in the Any CSS colour field. #2563eb, 2563eb, #FFF, tomato, rgb(37, 99, 235) and oklch(54.61% 0.21521 262.88) are all accepted.
- Nothing to paste? Click the swatch beside the field for your system's color picker, or the pipette, where the browser offers one, to lift a color from anywhere on your screen.
- Check the big swatch against the nearest CSS name drawn next to it, then read the six cards: HEX, RGB, HSL, OKLCH, CMYK and Nearest name.
- Press the copy button for the notation you need. The amber one copies the hex; the others hand over the complete value, brackets included, so rgb(37, 99, 235) lands in the clipboard ready to paste.
What the six cards mean
A color converter earns its keep on the days when one color has to be written five different ways. Paste #2563eb into the field and six cards fill in under a swatch of it: the normalized hex, rgb(37, 99, 235), hsl(221.2, 83.2%, 53.3%), oklch(54.61% 0.21521 262.88), a CMYK breakdown, and the nearest CSS color name. The field reads back everything it writes, so the rgb() from one file and the oklch() from another land on the same six cards. Names work too, tomato and rebeccapurple included, as do both spellings of grey, a missing hash, and shouting in capitals.
The decimals are there on purpose. At whole numbers, hsl(221, 83%, 53%) comes back as #2463eb, one step off the blue you started with; at one decimal every HSL value lands exactly on its own hex, and OKLCH needs two decimals of lightness and five of chroma to do the same. OKLCH is worth learning if you tune colors by eye, because its lightness is perceptual: two colors at 60% look equally light even when one is yellow and one is blue, which HSL cannot promise. CMYK sits there for print work and is only an estimate, since a real press profile depends on ink and paper.
Tailwind's blue-600, taken apart
The field loads with #2563eb already in it, which is Tailwind's blue-600. Leave it alone and read down the cards. RGB comes back as rgb(37, 99, 235). HSL is hsl(221.2, 83.2%, 53.3%). OKLCH is oklch(54.61% 0.21521 262.88). CMYK is cmyk(84%, 58%, 0%, 8%). Nearest name says ≈ royalblue.
That ≈ is doing real work. royalblue is #4169e1, close to blue-600 but not the same color, and the swatch drawn beside yours shows the gap. Type royalblue into the field and the hex card switches to #4169e1 with the ≈ gone.
Good to know
- Alpha is refused, not dropped. An eight-digit hex like #2563eb80, or an rgb() with a slash and an alpha after it, gets a message saying it has an alpha channel, so composite a translucent color against its background before you convert it.
- The CMYK figures are a screen-space estimate. Real print output depends on the press profile and the stock, so treat them as a starting point for a conversation with your printer rather than as a spec.
- Colors are handled as sRGB throughout. An oklch() value outside sRGB is clipped channel by channel, the way browsers paint it, and a display-P3 value from a design file has already been squeezed into sRGB by the time it reaches you as a hex code.
Frequently asked questions
Can I type a color name like tomato instead of a hex code?
All 148 CSS named colors are recognized, the seven British grey spellings among them, so tomato, rebeccapurple and darkslategrey resolve to their hex value and convert from there. Case and surrounding spaces make no difference.
How do I convert a hex code to RGB and HSL at the same time?
Typing the hex is the whole job. Every card recalculates on each keystroke, so #2563eb gives you rgb(37, 99, 235) and hsl(221.2, 83.2%, 53.3%) side by side, with the OKLCH value next to them and no button to press.
Why does the nearest name show a ≈ symbol in front of it?
The ≈ marks an approximation: the name is the closest of the 148 by distance in OKLab, a color space built so that equal distances look equally different. When your color lands exactly on a named one the symbol goes and you get the bare name, with both spellings where CSS has two, as in gray or grey.
Can I paste an rgb() value in and get the hex back?
The field reads hex, CSS names, rgb(), hsl() and oklch(), in the older comma form or the newer space-separated one. Anything a card shows can be pasted straight back and lands on the same hex, which is why HSL and OKLCH carry their decimals.
How do I grab a color off my screen?
The small pipette beside the field calls the browser's EyeDropper API. Chrome and Edge implement it, so the button appears there and stays hidden in Firefox and Safari. Where it does appear you can click any pixel on the desktop, including pixels belonging to another application.
What happens if I type something that is not a color?
The field says what is wrong and names the five notations it reads. The cards stay on the last color that parsed, dimmed, and every copy button is disabled until the field holds a color again, so a copy never hands over a value for a color you have since typed over.
Which of these formats should I put in my stylesheet?
Hex is the most compact and the one design handoffs tend to use. rgb() reads better when values are generated in code, hsl() suits someone adjusting a color by hand later, and oklch() is the one for building a scale, since its lightness steps look even. Every current browser has understood all four since 2023.
Missing something in Color Converter (HEX, RGB, HSL)? Suggest a feature →
Tell someone who needs this.