HEX, RGB and HSL Explained
- HEX: a six-digit hexadecimal code in the form #RRGGBB. #FF0000 is red, #000000 is black and #FFFFFF is white. When each pair repeats, the code can be shortened to three digits (#FFF).
- RGB: the red, green and blue channels, each from 0 to 255. rgb(255, 0, 0) is red. Adding a fourth alpha value from 0 to 1 sets transparency: rgba(0, 0, 0, 0.5) is half-transparent black.
- HSL: hue (0–360°), saturation and lightness (%). hsl(0, 100%, 50%) is red. To get a lighter or darker shade of the same color, change only the lightness.
How to Convert HEX to RGB
Split the code into three pairs and convert each pair from base 16 to base 10, where A–F stand for 10–15. Example for #3B5998: 3B = 3 × 16 + 11 = 59, 59 = 5 × 16 + 9 = 89 and 98 = 9 × 16 + 8 = 152, so the result is rgb(59, 89, 152).
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Red | #FF0000 | 255, 0, 0 | 0, 100%, 50% |
| Green | #00FF00 | 0, 255, 0 | 120, 100%, 50% |
| Blue | #0000FF | 0, 0, 255 | 240, 100%, 50% |
The analogous color swatches in the converter sit 15° and 30° on either side of your color on the color wheel, a quick way to build a harmonious palette. For text, keep enough contrast with the background: WCAG asks for at least 4.5:1 for normal-size text.
Frequently Asked Questions
Does capitalization matter in HEX codes?
No. #ff0000 and #FF0000 are the same color. Browsers and design tools accept either.
Can I use CMYK values on a website?
No. CMYK is a print color model. Screens use RGB-based formats, so on the web you should use HEX, RGB or HSL. Conversions between CMYK and RGB are also approximate, because the two models cover different color ranges.
How do I add transparency to a color?
Convert the color to RGB and use rgba() with a fourth value between 0 (fully transparent) and 1 (opaque), for example rgba(52, 152, 219, 0.5). Modern browsers also accept an eight-digit HEX code such as #3498DB80.
Why does HSL to HEX sometimes change the value slightly?
HSL values are rounded to whole degrees and percentages, while HEX can represent about 16.7 million colors. Converting back and forth can therefore shift a channel by one step, which is not visible to the eye.