HEX vs RGB vs HSL: Which Color Format Should You Use?
A practical comparison of HEX, RGB, HSL, HSV and CMYK — what each format is good at, where each one breaks down, and how to pick the right one for design work and CSS.
Every color format describes the same thing — a point in color space — but they make different operations easy. Picking the right one saves you from a lot of guesswork.
HEX: compact and unambiguous
#8b5cf6 is three bytes written in base 16: red, green, blue. It is the most common way to write
colors in CSS and design files because it is short and copy-pasteable.
What HEX is bad at is reasoning. Nothing about #8b5cf6 tells you it is a mid-saturation
purple, and nothing tells you how to make it 10% darker. You have to convert it first.
Use HEX for storage and handoff: design tokens, brand guidelines, anything a developer will paste into code.
RGB: the same numbers, in decimal
rgb(139, 92, 246) is identical to #8b5cf6. The advantage is the alpha channel —
rgba(139, 92, 246, 0.5) — and that the values are easier to compute with in code.
RGB shares HEX's core weakness: the three channels are entangled. Increasing brightness means scaling all three numbers proportionally, and if you get the ratio wrong you shift the hue.
HSL: the format you actually want to edit in
hsl(258, 90%, 66%) splits color into three things humans think about:
- Hue — position on the color wheel, 0–360°
- Saturation — how vivid, 0–100%
- Lightness — how bright, 0–100%
This separation is why HSL is the right format for generating color schemes. A complementary color is just hue + 180°. An analogous pair is hue ± 30°. A darker variant is the same hue and saturation with lower lightness — the hue stays exactly where you put it.
If you have ever tried to build a color scale by hand in HEX and ended up with muddy mid-tones, HSL is the fix.
HSV: similar idea, different third axis
HSV (also called HSB) replaces lightness with value or brightness. The practical difference: in HSL, 100% lightness is always white; in HSV, 100% value is the most vivid version of the hue. Color pickers in design tools usually expose HSV because the square-plus-hue-strip UI maps onto it naturally.
CMYK: only for print
CMYK is subtractive — cyan, magenta, yellow and black ink on white paper. Screens are additive, so a chunk of the colors you can display simply cannot be printed. Bright saturated greens and electric blues are the usual casualties.
Treat any on-screen CMYK number as an approximation. The real conversion depends on the printer, the paper and the ICC profile, which is why print shops ask for a profile rather than raw numbers.
A short decision list
- Storing or sharing a fixed color → HEX
- Need transparency, or computing in JavaScript → RGB / RGBA
- Building palettes, scales, hover and active states → HSL
- Working inside a color picker UI → HSV
- Sending files to a printer → CMYK, and ask for the profile
Try it
- Color Converter — convert one color across all five formats at once
- Palette Generator — see HSL hue math applied to build five scheme types
- Contrast Checker — verify that your final pairing passes WCAG
Everything runs in your browser, so you can paste in brand colors without uploading anything.
Related reading: Building Color Palettes applies the HSL hue math above to five real scheme types, and WCAG Contrast Ratios Explained covers why the lightness channel is the one you adjust to pass an accessibility check.