Color theory basics — HEX, RGB, HSL and how to pick colors that work together

📅 April 2026⏱ 5 min read🏷 Design Tools

Every color on your screen is defined by a code. Designers switch between HEX, RGB and HSL depending on what they're doing. Understanding all three makes you faster at picking colors, communicating with developers and troubleshooting designs.

HEX codes — what those # symbols mean

A HEX color like #A855F7 is three pairs of hexadecimal numbers: A8 (red), 55 (green), F7 (blue). Each pair goes from 00 (none) to FF (full). #000000 is black (no color), #FFFFFF is white (all colors), #FF0000 is pure red.

HEX is the most common format in web design — it's compact, copyable and works everywhere in CSS.

✅ Shorthand HEX

If both digits in each pair are the same, you can shorten: #AABBCC becomes #ABC, #FF0000 becomes #F00. This only works when all three pairs have matching digits.

RGB — the additive model

RGB(168, 85, 247) expresses the same color as decimal numbers from 0–255. Red=168, Green=85, Blue=247. This matches how screens physically work: mixing red, green and blue light at varying intensities.

RGB is most useful when you need to do math on colors — calculating averages, blending, or checking contrast ratios programmatically.

HSL — the most human-readable format

HSL(276, 91%, 65%) means: Hue=276° (position on the color wheel), Saturation=91% (how vivid), Lightness=65% (how light or dark). This is the format that maps closest to how humans think about color.

To make a color lighter: increase L
To make it more muted: decrease S
To get a complementary color: add 180 to H
To get an analogous color: add or subtract 30 from H

HSL is invaluable for generating color palettes — all 9 shades of a color are just the same H and S with L varying from 10% to 90%.

🎨 Free Color Picker Tool

Pick any color and instantly get HEX, RGB and HSL. Generate a 9-shade palette, check contrast and save to history.

Open Color Picker →

Color combinations that always work

Complementary: Colors opposite on the wheel (e.g. purple + yellow, blue + orange). High contrast, vibrant. Good for call-to-action buttons.

Analogous: Colors next to each other (e.g. blue + cyan + teal). Harmonious, calm. Good for backgrounds and UI surfaces.

Triadic: Three colors equally spaced (e.g. red + blue + yellow). Balanced and dynamic. Good for brand palettes with multiple accent colors.

Contrast — the most important rule

Text needs a contrast ratio of at least 4.5:1 against its background to be readable (WCAG AA standard). Dark text on a light background or vice versa. Gray text on gray background fails — even if it looks "fine" on your screen in good lighting.

Our color picker includes a contrast checker. Use it to ensure text is always accessible.