Why Color Formats Matter in Web Development
Every color you set in CSS can be expressed in multiple formats. A button's background might be written as `#3B82F6`, `rgb(59, 130, 246)`, or `hsl(217, 91%, 60%)` — and all three produce the identical shade of blue. Knowing which format to use and why makes you a more effective front-end developer.
HEX: The Classic Web Standard
Hexadecimal color notation dates back to the earliest days of the web. A hex color like `#FF6347` is three pairs of base-16 numbers: `FF` for red (255), `63` for green (99), and `47` for blue (71). Each pair ranges from `00` to `FF`, giving 256 possible values per channel and over 16 million colors total.
Hex is compact and universally supported. Its main drawback is that it is hard to reason about intuitively. Looking at `#3D9970`, you cannot easily predict whether it is warm or cool, light or dark. Shorthand notation works when both digits in each pair are identical: `#F06` expands to `#FF0066`.
RGB and RGBA: Direct Channel Control
The `rgb()` function maps directly onto how display screens work — blending red, green, and blue light. Values range from 0 to 255. Full red is `rgb(255, 0, 0)`, white is `rgb(255, 255, 255)`, black is `rgb(0, 0, 0)`.
The `rgba()` variant adds an alpha channel between 0 (fully transparent) and 1 (fully opaque). Essential for overlays, shadows, and elements that sit on varied backgrounds. Modern CSS allows `rgb(255 0 0 / 0.5)` as equivalent to `rgba(255, 0, 0, 0.5)`.
HSL: Designed for Humans
HSL stands for Hue, Saturation, and Lightness — a model that maps much more closely to how humans perceive color.
**Hue** is the color's position on the wheel, 0–360 degrees. Red is at 0°, green at 120°, blue at 240°. **Saturation** controls vividness from 0% (grey) to 100% (fully saturated). **Lightness** runs from 0% (black) through 50% (pure color) to 100% (white).
The practical power of HSL is that creating variations becomes intuitive. To lighten a button on hover, increase the lightness value. To create a muted version, reduce saturation. Design systems built around HSL are far easier to maintain than those built around arbitrary HEX strings.
Understanding Color Harmony
**Complementary** colors sit directly opposite on the wheel — blue and orange, red and green. Strong contrast makes them energetic but potentially harsh if overused.
**Analogous** colors are adjacent on the wheel — blue, blue-green, and green. They feel cohesive and calm, popular for backgrounds and neutral UI surfaces.
**Triadic** schemes use three colors evenly spaced 120° apart, offering variety while maintaining balance.
For web interfaces, most designers use one dominant brand color, one accent color for calls to action, and a neutral palette for text and backgrounds.
WCAG Contrast Ratios: Accessibility Is Not Optional
The Web Content Accessibility Guidelines define minimum contrast ratios so text remains readable for people with low vision or color blindness.
- **4.5:1** minimum for normal text (WCAG AA)
- **3:1** for large text — 18pt or 14pt bold (WCAG AA)
- **7:1** for enhanced readability (WCAG AAA)
Contrast ratio compares the relative luminance of foreground and background. Common failure modes: light grey text on white backgrounds, colored text on similar-hued backgrounds, and low-contrast placeholder text in form fields.
Building an Accessible Color Palette
Start with your brand's primary color. Adjust lightness to create a scale of shades — a typical design system defines 9 tones from near-white (50) to near-black (900), with the brand color at 500.
Always check every text-on-background combination against WCAG ratios. Dark text on light backgrounds and light text on dark backgrounds almost always pass. The danger zone is mid-range colors used as text or background.
Don't rely on color alone to convey information. Around 8% of men have color vision deficiency. Use icons, patterns, or labels alongside color to ensure your UI works for everyone.
Practical Tips
HEX, RGB, and HSL are mathematically equivalent — convert freely between them. Use HEX for design tokens and CSS variables, HSL for programmatic color manipulation, and RGBA when you need transparency. Check contrast ratios before finalizing any text color combination, and build your palette around a limited set of base colors rather than scattering arbitrary hex codes throughout your codebase.