HEX, RGB, and HSL: how CSS color formats actually work
CSS lets you write the same color several ways. They are interchangeable, but each format makes some tasks easier than others. Knowing the differences makes building and tweaking palettes far less fiddly.
HEX
A hex color is #RRGGBB — two hex digits each for red, green, and blue (00–FF, i.e. 0–255). #FF3D68 is the ilovedev accent. An optional fourth pair (#RRGGBBAA) adds alpha.
Hex is compact and the default in design tools, but it is hard to read or adjust by eye. Convert and preview in the Color Picker.
RGB and RGBA
rgb(255, 61, 104) is the same color as #FF3D68, just in decimal. rgba(255, 61, 104, 0.5) adds 50% opacity. RGB maps directly to how screens emit light, but like hex it is not intuitive to adjust.
HSL — the one to adjust by hand
HSL describes color as Hue (0–360° on the color wheel), Saturation (0–100%), and Lightness (0–100%). hsl(344, 100%, 62%) is, again, the same pink.
HSL is the format humans reason about: want a darker shade? Lower the lightness. A muted version? Lower the saturation. A complementary color? Add 180° to the hue. This is why it is ideal for generating palettes and gradients.
Alpha and opacity
Alpha (the A in RGBA/HSLA, or the last hex pair) sets transparency from 0 (invisible) to 1 (opaque). It is distinct from the CSS opacity property, which fades an entire element including its children.
Frequently asked questions
- Is HEX or RGB better?
- They are identical in capability — HEX is just RGB in hexadecimal. HEX is more compact; RGB is slightly more readable and the alpha syntax (rgba) is widely supported.
- Why use HSL instead of HEX?
- HSL separates hue, saturation, and lightness, so adjusting a color by hand — darker, more muted, a complementary hue — is intuitive. It is excellent for generating palettes.
- What is the difference between alpha and the opacity property?
- Alpha (rgba/hsla) sets the transparency of a single color value. The CSS opacity property fades the whole element and its children.
- How do I convert HEX to RGB?
- Split the hex into pairs and convert each from base 16 to base 10: #FF3D68 → R=255, G=61, B=104. A color tool does this instantly.
Try it yourself
Put this guide into practice — these tools run free in your browser.