In CSS the same color can be written several ways: #3b82f6, rgb(59, 130, 246) or hsl(217, 91%, 60%). They all paint the same blue, but each format has advantages depending on what you want to do. This guide explains the three and when to use each.
HEX: the most common
The hexadecimal format represents the color with # followed by six digits: two for red, two for green, two for blue, each pair from 00 to FF (0 to 255 in decimal).
color: #3b82f6; /* R=59, G=130, B=246 */
There's a short three-digit form when each pair repeats: #fff = #ffffff (white). It's compact and the favorite for copy-paste, but not intuitive for adjusting by eye.
RGB: thinking in light
RGB describes the color by its red, green and blue components, from 0 to 255:
color: rgb(59, 130, 246);
It's the model of how screens work (mixing light). Useful when you manipulate colors programmatically, but as unintuitive as HEX for "make this color a bit lighter."
HSL: the most intuitive for designing
HSL describes the color by Hue, Saturation and Lightness:
color: hsl(217, 91%, 60%);
- Hue (0-360): the position on the color wheel (0 red, 120 green, 240 blue).
- Saturation (0-100%): how intense or muted.
- Lightness (0-100%): how light or dark.
HSL is the most comfortable for designing: to make a color lighter, raise the lightness; for a muted variant, lower the saturation; for a complementary color, add 180 to the hue. That's why it's ideal for generating palettes and states (hover, active).
Transparency: alpha
All three formats support an alpha channel (opacity, 0 to 1):
color: rgba(59, 130, 246, 0.5); /* RGB with alpha */
color: hsla(217, 91%, 60%, 0.5); /* HSL with alpha */
color: #3b82f680; /* 8-digit HEX */
Modern CSS also allows rgb(59 130 246 / 50%) with the new syntax.
When to use each
- HEX: for copying fixed design values (Figma, brand guidelines).
- RGB: when manipulating channels in code or needing alpha explicitly.
- HSL: for designing, generating variants and coherent palettes by adjusting hue/saturation/lightness.
The practical thing is to convert between them depending on the task. You can do it free with the color converter on this site, which switches between HEX, RGB and HSL instantly in your browser.
Tip: contrast and accessibility
Picking nice colors isn't enough: text needs enough contrast with the background to be readable (WCAG guidelines require a minimum ratio). Working in HSL helps, because you can adjust lightness until you reach the needed contrast without changing your brand's hue.
Frequently asked questions
Which is "best," HEX, RGB or HSL? None; they're representations of the same color. HSL is the most comfortable for designing, HEX the most common for copying.
What is 8-digit HEX? It's HEX with an alpha channel: the last two digits are the opacity (00 transparent, FF opaque).
Do I lose precision when converting? HEX-to-RGB conversions are exact. HSL may have tiny roundings, imperceptible.
Is my data uploaded? No, if you use a local converter. Everything happens in your browser.
Convert between HEX, RGB and HSL instantly with the free color converter, 100% in your browser.