HEX, RGB, HSL — when to use which and why it matters

1. HEX — the handoff format

HEX is compact, universally understood, and easy to copy. It's the right format for design tokens, style guides, and any place where a human needs to read or type a color.

• Use HEX in your Figma token library and CSS custom properties.
• It's the format developers expect in most codebases.
• It's easy to scan in a table — #2563EB is more readable than rgb(37, 99, 235).

2. RGB — the code format

RGB becomes useful the moment your code needs to do something with the color — add transparency, blend two colors, or generate a tint programmatically.

• rgba(37, 99, 235, 0.15) for transparent overlays and shadows.
• Easier to interpolate between two colors in animations.
• Required by some chart libraries and canvas APIs.

3. HSL — the thinking format

HSL (hue, saturation, lightness) is the format that matches how designers actually think about color. It's the easiest to adjust by intuition.

• Want a lighter version? Increase L. Want less saturated? Decrease S.
• Great for generating tonal ramps — just step the L value.
• Useful in CSS for dynamic theming with calc() and custom properties.

Common mistakes

• Handing off RGB values when the developer expects HEX.
• Trying to adjust a color by editing HEX digits directly.
• Using HSL in production tokens when the team is used to HEX.

Before you ship

• Use HEX in all design token documentation.
• Convert to RGB when you need transparency or code math.
• Use HSL when building tonal ramps or adjusting by eye.
• Keep one format consistent within each project.