How to Convert Colors Between HEX, RGB, HSL, and Other Formats
Convert a color between HEX, RGB, HSL, CMYK, and other formats, see which conversions are exact, and learn which format to use where.
2 min read
To convert a color, paste it into the color converter. Pick the format you need under Target, and copy the result. The tool detects the input format by itself, so #ff6600, rgb(255, 102, 0), orangered, and even 255, 102, 0 all work. The result appears while you type. A color swatch under the result shows you that the tool read the right color.
The same color in four formats
HEX, RGB, HSL, and CMYK are different ways to write the same color. Here is one orange in all four:
| Format | Value | What the numbers mean |
|---|---|---|
| HEX | #ff6600 |
Red, green, and blue as two hex digits each |
| RGB | rgb(255, 102, 0) |
Red, green, and blue from 0 to 255 |
| HSL | hsl(24, 100%, 50%) |
Hue on the color wheel, saturation, lightness |
| CMYK | cmyk(0%, 60%, 100%, 0%) |
Cyan, magenta, yellow, and black ink |
HEX and RGB use the same three numbers, only written differently. Converting between them is exact. HSL is easier to adjust by hand: raise the lightness value, and the color gets lighter.
Why CMYK is different
CMYK is for print, and the exact values depend on the printer, the paper, and the ink. The converter uses the standard formula without a printer profile, so a print shop may give you slightly different values for the same color. Use the CMYK result for mockups, and ask the print shop for a test print before the real print.
Which format to use
- CSS and HTML: use HEX. It is short, and every browser reads it.
- A color theme: use HSL. You get lighter and darker shades by changing one number.
- Transparency in code: use RGB with an alpha value, or an eight digit HEX.
rgba(37, 99, 235, 0.5)becomes#2563eb80, and the last two digits are the opacity. - Print mockups: use CMYK, and remember the note above.
Color names are not exact
The converter supports 17 formats, including OKLCH, LAB, HSV, CSS color names, and terminal ANSI codes. A color name result is the closest CSS color name, not an exact match. #ff6600 gives orangered, but orangered is really #ff4500. Use names for quick labels, and use exact values for brand colors.
Paste the color, check the swatch, and copy the result. That is the whole process.
Ready to try it yourself?
Farb-Konverter
Konvertieren Sie Farben zwischen HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH, OKLab, OKLCH, XYZ, CSS-Farbnamen, ANSI-Terminalcodes und mehr, mit automatischer Formaterkennung und Live-Vorschau.