Color Models

Three models are in everyday use on the web:

• HEX — A 6-digit (or 3-digit shorthand) hexadecimal string like #818cf8. Each pair of digits encodes the red, green, and blue channel (0–255). HEX is the most common format in CSS and design tools.
• RGB — Three integers from 0 to 255: rgb(129, 140, 248). More readable than HEX for arithmetic (e.g., lightening a color by adding to all channels).
• HSL — Hue (0–360°), Saturation (0–100%), Lightness (0–100%): hsl(234, 89%, 74%). The most human-intuitive model: hue is the color "family," saturation is how vivid it is, lightness is how light or dark. Adjusting only the lightness gives you shades of the same color.

When to Use Each Format

• Use HEX when pasting into design files or CSS color values where you just need a static color.
• Use RGB when you need to compute or interpolate colors in code (rgba for transparency).
• Use HSL in CSS custom properties when building a theme. Incrementing or decrementing L gives you tints and shades, and rotating H gives you analogous and complementary colors.

Alpha / Transparency

All three models support a fourth alpha channel: #818cf8cc (8-digit HEX), rgba(129, 140, 248, 0.8), or hsla(234, 89%, 74%, 0.8). The alpha value ranges from 0 (fully transparent) to 1 (fully opaque) for RGB/HSL, and from 00 to ff (hex) for the 8-digit form.

Accessibility Contrast

WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). You can check contrast between a foreground and background color pair using the relative luminance formula on the W3C site, or tools like the Chrome DevTools accessibility inspector.