Color Models and Building Accessible Palettes: A HEX, RGB, HSL Guide

Color is often the first thing people notice in a design, yet working with it in code still confuses many developers. If #3B82F6 and rgb(59, 130, 246) are the same blue, why do we use both? And why does writing a color with hsl() sometimes make so much more sense? In this guide we'll demystify the three core color models, build an accessible palette from scratch, and show how contrast rules fit into a real design system.

Color Models Are Just Different Addresses for the Same Color

Every color on screen comes from a mix of red, green, and blue light (RGB). HEX, RGB, and HSL are simply three different notations for that mix — they describe the same pixel using different coordinates.

HEX

Written like #3B82F6, HEX encodes red, green, and blue values in hexadecimal, in paired blocks. 3B is the red channel, 82 green, F6 blue. It's compact and easy to copy, making it the most common shared language between designers and developers. Its eight-digit form (#3B82F6CC) adds transparency (alpha) via the last two digits.

RGB and RGBA

rgb(59 130 246) gives each channel as a readable 0–255 number. rgba(), or the modern rgb(59 130 246 / 0.8) syntax, adds an alpha channel; it's ideal for semi-transparent layers, shadows, and overlapping surfaces. RGB shines for readability when generating color programmatically, such as in canvas or data visualization.

HSL and Why It's Intuitive for Adjusting

hsl(217 91% 60%) defines a color along three human axes: Hue (the color itself, on a 0–360 degree wheel), Saturation (% vividness), and Lightness (% brightness). This is HSL's superpower: to make a button darker, you just lower the lightness; to shift an entire set of accent colors, you rotate a single hue axis without touching the others. Manually darkening #3B82F6 in HEX is nearly impossible, while in HSL it takes one number. That's exactly why it's the most practical model for deriving a palette.

Building a Palette from Scratch

A good palette isn't a collection of random pretty colors — it's a consistent system of a few core roles.

• Primary: The color that represents your brand, seen most in buttons and links. Pick an HSL hue (e.g. 217) and start there.
• Accent: For elements that need to grab attention. Choose a hue that's adjacent (analogous) or opposite (complementary) to your primary on the wheel.
• Neutrals: Grays make up about 70% of a palette. Instead of pure gray, derive neutrals from your primary hue at very low saturation (e.g. hsl(217 12% 20%)) — it adds invisible cohesion to the whole design.

To generate a tonal ladder from each color, step the lightness: 95%, 85%, ... 15%. With HSL this is a mechanical job that takes minutes. To pick and convert colors quickly, use our color picker tool, and to pull a palette from an existing image, try the palette extractor.

Contrast and WCAG AA Accessibility

A beautiful palette is useless if it can't be read. WCAG mandates a contrast ratio between text and its background:

• Normal text: at least 4.5:1
• Large text (18.66px bold or 24px+): at least 3:1
• AAA level: 7:1 for normal text

The contrast ratio is calculated from the relative luminance of two colors, and here HSL's lightness acts as your compass: dark text (low lightness) on a light background is the safe path. Make sure every primary and accent color is tested on both white and dark backgrounds. To blend two colors and inspect the in-between tones, our color mixer tool makes the job easy. Remember: never let color be the only carrier of meaning — signal an error with an icon and text, not just red.

2026 Design Trends (Briefly)

In 2026, palettes are opening up to a wider gamut. CSS's oklch() function is starting to replace HSL because it offers perceptually consistent lightness; the same lightness value truly looks equally bright across every hue. On top of that, soft low-saturation "calm" neutrals, subtle glass effects (the mature evolution of glassmorphism), and system-generated light/dark theme pairs have become standard. Still, the core rule hasn't changed: accessibility isn't an extra — it's a design criterion of the palette itself.

Summary

HEX is best for sharing, RGBA for adding transparency, and HSL for adjusting and deriving. Define your primary, accent, and neutral roles, generate each tone with a lightness ladder, then test every combination against the WCAG AA threshold. A palette built with this discipline is both beautiful and readable for everyone.