Three notations, one color space
HEX, RGB, and HSL all describe sRGB colors — they're different notations, not different gamuts. #3B82F6, rgb(59, 130, 246), and hsl(217, 91%, 60%) are the same blue. Choosing between them is about readability and which axis you need to manipulate.
When each format wins
- HEX — the compact default of design systems and CSS. Supports 4- and 8-digit forms with alpha (
#3B82F680). - RGB — when you're computing colors (mixing, overlays, canvas pixels); channels map directly to bytes.
- HSL — when you're designing: make a color lighter (
lightness +10%) or build a palette by rotatinghuewhile holding saturation. Humans reason about hue/lightness, not red/green/blue byte values.
The conversion math
HEX→RGB: each pair of digits is a base-16 byte (3B = 59). RGB→HSL: find max/min of R,G,B (normalized 0–1); lightness is their average, saturation is their spread relative to lightness, and hue is which channel won — 0°/120°/240° for red/green/blue plus the fractional position between. HSL→RGB inverts that: from hue, pick two base colors at full saturation, then descale by saturation and offset by lightness.
Alpha and opacity
All three carry alpha: #RRGGBBAA, rgba(r,g,b,0.5), hsla(h,s%,l%,0.5). Note that 50% alpha over white is not the same as lightening the color — compositing mixes with whatever is underneath, which is why alpha buttons on photos need testing against multiple backgrounds.
Accessibility: contrast is not optional
WCAG AA requires 4.5:1 contrast for body text (3:1 for large text). HSL lightness is perceptually misleading — a 60%-lightness yellow is far "brighter" than a 60%-lightness blue, so text colors picked by equal lightness can pass for one hue and fail for another. Always verify computed contrast, not eyeballed brightness.
Convert between all formats with live contrast checking in the Color Converter — client-side, instant.