Converters5 min read
HEX, RGB, and HSL all describe the same on-screen colors, but each is suited to a different task. This guide explains what each format means, when to reach for it, how to add transparency, and why CMYK belongs to print rather than the screen. Convert any color between all four with the Color Converter.
The same color, three ways
HEX and RGB both describe a color by its red, green, and blue light components. HSL describes the same color by hue, saturation, and lightness. They are interchangeable — the values below are the identical orange.
HEX: #FF5733 RGB: rgb(255, 87, 51) HSL: hsl(11, 100%, 60%)
HEX and RGB
HEX packs the three colour channels into a six-digit hexadecimal string, two digits each for red, green, and blue. RGB lists the same three values as decimals from 0 to 255. HEX is compact and dominates stylesheets; RGB is handy when you want to compute a channel value or add an alpha channel with rgba().
HSL and why designers like it
HSL separates a color into hue (an angle from 0 to 360 on the color wheel), saturation (how vivid it is), and lightness (how light or dark). Because lightness is its own axis, HSL makes it trivial to create a lighter or darker variant of a color by changing one number — ideal for hover states, tints, and shades — without disturbing the hue.
Adding transparency
Each format has a way to include an alpha (opacity) channel, from 0 (transparent) to 1 (opaque).
| Format | With alpha |
|---|---|
| HEX | #FF5733CC (8 digits) |
| RGB | rgba(255, 87, 51, 0.8) |
| HSL | hsla(11, 100%, 60%, 0.8) |
Why CMYK is different
CMYK describes color for print by the amount of cyan, magenta, yellow, and black ink. Screens emit light and can show more vivid colors than ink can reproduce, so some bright RGB colors have no exact CMYK equivalent. A converted CMYK value is the closest printable match, which is why on-screen colors can look slightly different in print.
Color and accessibility
Readable text needs sufficient contrast against its background — WCAG recommends a ratio of at least 4.5:1 for normal text. HSL makes it easy to nudge lightness up or down to hit a target ratio while keeping the same hue, so you can build accessible variations of a brand color deliberately rather than by trial and error.
Frequently asked questions
Is converting between HEX, RGB, and HSL lossless?+
Yes. All three are exact representations of the same on-screen color, so converting among them loses nothing. Only CMYK, which targets print, may shift slightly.
Which color format should I use in CSS?+
HEX or RGB for fixed colors, and HSL when you want to create lighter or darker variants by adjusting one value. All are valid in modern CSS.
How do I add transparency to a color?+
Use an 8-digit HEX, or the rgba() and hsla() functions with an opacity value from 0 to 1.
Why does my color look different when printed?+
Print uses CMYK inks, which cannot reproduce every bright RGB screen color. The converter gives the closest printable match.