HEX, RGB, and HSL

Each format emphasizes different mental models. Knowing the math at a high level prevents silent rounding bugs.

HEX

#RRGGBB packs three byte channels in hexadecimal:

• #2563EB → red 0x25 (37), green 0x63 (99), blue 0xEB (235)

Shorthand #RGB duplicates nibbles: #26E → #2266EE.

HEX is compact in design handoffs and Git diffs. It is awkward for “10% darker” edits without a converter.

RGB

rgb(37, 99, 235) names channels directly—easy to validate against design spec sheets that list 0–255 values.

Functional notation also supports alpha:

rgba(37, 99, 235, 0.85)

Modern CSS prefers rgb(37 99 235 / 0.85) with space-separated channels.

HSL

hsl(hue, saturation, lightness) aligns with designer language:

• Hue — angle on the color wheel (0–360)
• Saturation — vivid vs gray
• Lightness — bright vs dark

Example: hsl(221, 83%, 53%) matches #2563EB.

HSL helps generate hover/active states: keep hue, lower lightness slightly.

Caution: HSL “lightness” is not perceptual uniformity. Two hues at 50% lightness can look uneven—use contrast tools for text pairs.

Rounding and drift

Converting HEX → HSL → HEX may not round-trip identically. For design tokens, pick one canonical stored form (often HEX or OKLCH in modern systems) and derive others at build time.

When to use which

Format	Good for
HEX	Tokens, Figma export, compact storage
RGB	Specs from Android/iOS assets, image pipelines
HSL	Theme tweaks, programmatic palettes

Key takeaway

Use converters to move between views, but store one authoritative value per token. Document whether alpha belongs in the same token or a separate opacity scale.