HEX vs RGB vs HSL: which color format to use
One color in five formats, what each one says, which suits your job, and the contrast number that tells you whether text on that color is readable.
HEX and RGB describe a color by how much red, green and blue it contains, while HSL describes it by hue, saturation and lightness. The color converter takes a color in any CSS format and gives you all the others, plus its contrast against white and black, in your browser. Which format to use depends on the job: copying a brand color as-is, tweaking it, or confirming that text on it is legible.
One color in five formats
Take the blue #3b82f6. This is the converter's real output:
| Format | Value |
|---|---|
| HEX | #3b82f6 |
| RGB | rgb(59, 130, 246) |
| HSL | hsl(217.22, 91.22%, 59.8%) |
| OKLCH | oklch(0.623 0.188 259.8) |
| CMYK | Shown as well, for anyone who needs it in print |
It also names the closest Tailwind color, flagged as approximate, and generates analogous, complementary, triadic and monochromatic palettes.
How to read each one
- HEX
#3b82f6: three pairs of hexadecimal digits, for red (3b), green (82) and blue (f6). Each pair runs 00 to ff, or 0 to 255. It's the most compact and the most common in design handoffs. - RGB
rgb(59, 130, 246): the same three values in decimal. Identical to HEX, easier to read. - HSL
hsl(217, 91%, 60%): hue (an angle from 0 to 360 on the color wheel), saturation and lightness. The most convenient for tweaking: raise lightness for a lighter blue, lower saturation for a duller one. - OKLCH: lightness, chroma and hue in a space designed so equal changes look equal to the eye. It's defined in CSS Color Level 4, so check browser support for the audience you serve.
Which should you write in CSS?
All of them work, and the browser understands each. The choice is about convenience:
- To paste a color from a brand guide, HEX.
- To vary a color (lighter, darker, with transparency), HSL, because each tweak changes one number.
- For design systems with color scales, OKLCH spreads perceived lightness more evenly across different hues.
- For print, CMYK, though it isn't a native screen value in CSS.
Using the converter, step by step
- Open the color converter.
- Type a color in any CSS format: HEX,
rgb(),hsl(),oklch()or a name such asred, or choose one with the picker. - Copy the format you need. If the value isn't recognized, the tool says so.
- Check the contrast and the generated palettes.
Adjusting a color without leaving the palette
When you need a lighter or darker version of a brand color, convert it to HSL and change only the lightness: hue and saturation stay put, so the color remains recognizable. With the sample blue, raising lightness from 60% to 90% gives a pale blue suited to backgrounds, and dropping it to 30% gives a dark one suited to text on a light page. Then copy the result as HEX if your system wants that. The palettes the converter generates (analogous, complementary, triadic and monochromatic) follow the same principle: they rotate the hue or shift lightness in the OKLCH space.
The contrast number people skip
Contrast between text and background decides whether it can be read. WCAG asks for at least 4.5 to 1 for normal text and 3 to 1 for large text, per the W3C minimum contrast criterion. The converter computes the color's contrast against white and black. For our blue it reports 3.68 with white text and 5.71 with black text. So a button in that blue with white labels falls below 4.5 for normal text and passes only if the text is large. Check the figure before you lock the color in.
Another sample, the amber #f59e0b, comes out at 2.15 against white and 9.78 against black: white text on it would be hard to read, while black text is very comfortable.
A common pitfall
Rounding during conversions. Going from HSL to HEX and back can give slightly different values, because HSL allows decimals and HEX doesn't. If you need the exact color, store the original in one format and convert from there. If your color comes from a picture, see how to build a brand color palette from a single image.
Frequently asked questions
What is the difference between HEX and RGB?
None in the color itself: HEX writes the red, green and blue values in hexadecimal and RGB writes them in decimal. #3b82f6 and rgb(59, 130, 246) are the same color.
How do I convert HEX to RGB?
Split the HEX into three pairs and convert each from hexadecimal to decimal. 3b is 59, 82 is 130 and f6 is 246. Or paste the color into the converter and copy the RGB.
What is HSL?
A format that describes a color by hue (an angle from 0 to 360), saturation and lightness. It's convenient for lightening, darkening or dulling a color.
What is OKLCH?
A format based on a color space designed around human perception, with lightness, chroma and hue. It's part of CSS Color Level 4.
What contrast does text need?
WCAG asks for at least 4.5 to 1 for normal text and 3 to 1 for large text.
Convert a color between formats
HEX, RGB, HSL, OKLCH and CMYK, with WCAG contrast and palettes. Runs locally, free, no signup.
Open Color Converter →Related tools
- Color Converter: HEX, RGB, HSL, OKLCH and CMYK, with contrast and palettes.
- Palette from Image: extract the main colors from a photo.
- Convert Image: change an image's format.
- Minify: shrink CSS, HTML and JS for production.
You might also like: when to use SVG and when to convert it to PNG, favicons: which sizes you actually need and Binary, decimal and hex: converting by hand.