HTML color codes explained: HEX, RGB, and HSL
Whether you copy a swatch from Figma or inherit a legacy stylesheet, you will meet the same three formats. Here is what they actually describe — and when each one earns a place in your CSS.
Open any design handoff and you will see #7c3aed more often than a polite greeting. That six-character string is a HEX color code — a compact way to store red, green, and blue on a scale from 00 to FF (0–255 in decimal). Browsers understand it natively. So do image exporters, email templates, and that one Android file nobody wants to touch.
HEX: the shorthand everyone memorizes
A typical HEX code has a hash, then three or six digits. #RGB is shorthand: #7c3 expands to #77cc33. Six digits give you two nibbles per channel — more precision, which is why brand guidelines almost always specify the long form.
HEX is great for storage and grep. It is less great for mental math. If someone asks you to “make it 10% lighter” while staring at #5b21b6, you will reach for a tool. That is normal. Our color converter round-trips HEX, rgb(), hsl(), and OKLCH so you can see the same swatch in every dialect without a spreadsheet column per format.
Valid HEX uses only 0–9 and A–F. If a paste fails in CSS, look for a missing # or an odd number of characters after it.
RGB: when you need channels in the open
CSS lets you write rgb(124 58 237) or the older comma form rgb(124, 58, 237). Each number is a channel intensity. Add an alpha channel and you get rgb(124 58 237 / 0.85) for translucent overlays — something HEX cannot do without switching to #RRGGBBAA or a separate opacity property.
RGB matches how screens light up pixels. Designers still think in hue and lightness, which is why RGB alone rarely feels intuitive for “warmer” or “muted.” Use RGB when you are blending colors in code, animating channels, or feeding values into canvas APIs that expect 0–255.
HSL: hue on a wheel, lightness in the middle
hsl(262 82% 58%) reads like a sentence: hue 262° (purple family), saturation 82%, lightness 58%. Tweaking the last number feels natural until you land on yellow — the same lightness step that flatters blue can turn yellow into khaki. That quirk is why teams exploring design systems often add OKLCH later. For day-to-day CSS, HSL is still handy for quick theme tweaks when you already know the hue.
- HEX — paste-friendly, design-tool default, fine for tokens stored as strings.
- RGB — alpha, math, APIs; best when channels matter more than hue language.
- HSL — readable hue/sat/light sliders; watch out on yellow and cyan families.
Which format should you put in production CSS?
There is no single winner. Many codebases mix HEX in design tokens, HSL in theme overrides, and RGB where opacity is doing the heavy lifting. What matters is consistency: pick a source of truth, document it, and convert at the edge instead of letting three formats drift apart across files.
If you are building ramps (50, 100, 200 … 900), generate them once from a brand anchor in the CSS variables generator or the tint and shade tool, then export HEX for Android and OKLCH comments for humans who will edit the file in six months.