Hex, RGB, and contrast: a color guide for UI work

Convert between color formats, check contrast, and avoid common mistakes in design systems.

2026-06-03 · 6 min read

color
css
design

Web UIs express color as hex (#RRGGBB), rgb(), or hsl(). Designers hand off hex; browsers and CSS variables often use rgb or hsl for alpha channels. Converting accurately prevents subtle drift between Figma and production.

Hex basics

Six-digit hex is #RRGGBB in hexadecimal. Shorthand #RGB duplicates each nibble. Eight-digit #RRGGBBAA includes alpha in newer workflows.

#ffffff — white
#000000 — black
#3b82f6 — typical blue accent

Contrast and accessibility

WCAG recommends contrast ratios for text against backgrounds. Body text generally needs 4.5:1; large headings 3:1. When picking brand colors, test both light and dark themes.

Practical workflow

Store canonical tokens in your design system JSON; generate CSS from a single source.

Pick a base palette in hex from design
Convert to rgb/hsl for CSS variables with opacity
Verify contrast on real components, not swatches alone

Try these tools

color