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).
By Noble Erne, LLC · 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.
Published by Noble Erne, LLC. Enterprise systems consultant with a background in SAP implementation, software documentation, and instructional design. Builds the tools and writes the explainers on this site. Corrections to this guide go to the contact page and are reviewed before publication.
Related guides
- The 4.5:1 rule: color contrast that keeps you legal
Low-contrast text is the web’s most common accessibility failure, and since the European Accessibility Act it carries legal risk. The rules, the math, the fixes. - How to build a color palette that doesn’t fight itself
The 60-30-10 rule, the color wheel relationships behind our palette generator, and why fewer colors always looks more professional. - Color psychology in marketing: what’s real, what’s myth
Red does not make people hungry and blue does not make them trust you. What the research actually supports, and what to do instead of chasing color magic.