HEX / RGB / HSL Converter
Convert between color formats instantly
- Contrast on white:
- 4.47:1 (AA large text only)
- Contrast on black:
- 4.70:1 (AA)
About HEX / RGB / HSL Converter
Converts a color between HEX, RGB, HSL, HSV, HWB, CMYK, LAB and OKLCH, and shows the nearest CSS color name, since different design tools and code contexts expect different color formats.
Enter a color in any supported format (HEX, rgb(), hsl(), oklch() or a name), and its equivalent values in the other formats are displayed automatically. If what you type isn't a color, the last good result stays on screen with a message. If a value was out of range, such as rgb(300, 0, 0), a note says what it was clamped to.
HSL is often the easiest format to work with when you want to tweak a color's lightness or saturation without changing its underlying hue — adjust one HSL value and convert back to hex when you're happy with it.
Watch: HEX / RGB / HSL Converter in Action
- Why would I need HSL instead of just hex?
- HSL is often the easiest format to work with when you want to tweak a color's lightness or saturation without changing its underlying hue — adjust one HSL value and convert back to hex once you're happy with it.
- Which input formats does it understand?
- HEX with 3, 4, 6 or 8 digits (the hash is optional), rgb() and rgba(), hsl() and hsla(), hwb(), plain comma or space separated triples of numbers, and CSS color names such as tomato or rebeccapurple.
- Why is the CMYK value marked as a screen estimate?
- It is calculated directly from the RGB numbers with a simple formula. Real printing involves inks, paper and color profiles, so a press may reproduce the color differently. Use the CMYK row as a rough guide, not a print specification.
- What happens if my color has transparency?
- If you enter a value with alpha, such as an 8-digit hex or rgba(), the RGB and HSL rows are written as rgba() and hsla() with the alpha figure, and the HEX row includes the extra pair of digits.
- What does Nearest CSS name mean?
- The tool compares your color with the list of named CSS colors and shows the closest one. If your color is not on the list, the name is only an approximation, so do not assume it matches exactly.
- Why do I get a red error under the box?
- The text could not be read as a color. Check for typos, a stray character in the hex code, or an unsupported notation. The message gives working examples like #ff6600, rgb(255, 102, 0) and orange.
How to use HEX / RGB / HSL Converter
Type or paste a color into the box labeled Color. HEX works with or without the hash and in 3, 4, 6 or 8 digits. You can also enter rgb(255, 102, 0), hsl(24, 100%, 50%), a bare triple like 255 102 0, or a CSS name such as tomato. The small square beside the box opens your system color picker if you would rather click.
Below it, the page lists HEX, RGB, HSL, HSV / HSB, HWB, CMYK (screen estimate), Nearest CSS name and a ready-made CSS line. Each row has its own Copy link. A large swatch on the right shows the color. If the text cannot be read, a red message suggests valid examples.
When to use it
Reach for this when a brand guide gives a HEX code but a design tool or stylesheet wants HSL, or when a client sends rgb values and you need a compact hex string. It also helps when you want the closest named CSS color, or when you are checking how a transparent color is written, since an alpha value switches the output to rgba and hsla.
When not to use it
Do not trust the CMYK row for print jobs. It is a mathematical conversion from screen values, which is why the tool labels it an estimate, and real printers depend on ink, paper and color profiles. Ask your print shop for their profile or use professional design software for that. For checking whether text is legible on a background, use the Contrast Checker instead.
Tips for best results
To make a color a bit lighter or duller while keeping its character, convert to HSL, change only the lightness or saturation figure, and paste the new hsl() text back into the box to get a HEX. Eight-digit hex carries transparency in its last two digits. The Nearest CSS name row is the closest match, not necessarily an exact one.
Limitations
Values are rounded to whole numbers in the HSL, HSV and HWB rows, so converting back and forth can shift a color by a small amount. Only sRGB-style notation is understood, so formats like lab(), oklch or display-p3 are rejected as unreadable. Names are limited to standard CSS color keywords.
Privacy
The color text you enter is parsed by a conversion library that runs inside your browser tab. The swatch is drawn locally and the Copy buttons write to your clipboard only when you click them. No color value is submitted anywhere for conversion.
Next: Gradient Generator
Build any gradients you'll reuse
More from Design & Color: