HEX, RGB, HSL, CMYK: which color code to use when
Four ways to write the same color, and the one most people should be using more (it’s HSL).
5 min read · Reviewed July 2026
Every color on your screen is just three numbers — how much red, green, and blue light to mix. The four code formats are different ways of writing those numbers, and each exists for a reason. Knowing which to reach for saves real time.
HEX (#ff7a30) is RGB in base-16, three pairs of digits for red, green, blue. It won the web because it’s compact and paste-able. If you’re handing a color to a developer or a CSS file, HEX is the default currency.
RGB and the alpha channel
RGB spells the same numbers out in decimal — rgb(255, 122, 48). Its practical advantage over HEX is the alpha version: rgba(255, 122, 48, 0.5) gives you the same color at 50% opacity, which is how most overlays, shadows, and glass effects get built. Modern CSS accepts an alpha in HEX too (8 digits), but almost nobody can read one.
HSL: the one humans should use
HSL describes color the way people think about it: hue (the angle on the color wheel, 0-360°), saturation (how vivid), lightness (how bright). Want a darker version of your brand color? Drop the L. A softer version? Drop the S. A harmonious second color? Rotate the H by 30 or 180 degrees — that’s literally how our palette generator works.
Try doing any of that in HEX and you’re guessing at hexadecimal arithmetic. My honest advice: pick in HSL, ship in HEX. The tool converts between them live, so you can watch how the numbers relate.
CMYK: ink, not light
CMYK is subtractive — cyan, magenta, yellow, and black inks absorbing light on paper, rather than pixels emitting it. Screens can show colors ink can’t reproduce (vivid oranges and electric blues suffer most). Use the CMYK values here as a starting approximation and let the print shop’s color profile make the final call. If a printed brand color truly matters, ask for a physical proof. Every designer learns this once, expensively.