Most developers learn color by accident — copy-pasting hex codes from a design file, hoping the contrast is acceptable, and never quite understanding why a CSS color looks different in the browser than it did in Figma. This guide fixes that. Color theory is a small set of rules, and once you know them, your UIs get measurably better.
The three color models you actually need
Every color on the web can be expressed in three main models. They are interchangeable, but each is best for different jobs.
HEX
A 6-digit hexadecimal string: #RRGGBB, where each pair is a value from 00 to FF (0 to 255). HEX is compact, universally supported, and the default in CSS and design tools. Use HEX when you want brevity and you already know the exact color.
color: #14b8a6; /* teal-500 */
background: #ffffff;RGB / RGBA
Three values from 0 to 255 for red, green, and blue. RGBA adds an alpha channel (0 to 1) for transparency. RGB is verbose but useful when you need to programmatically compute a color, because each channel is a discrete number.
color: rgb(20, 184, 166);
background: rgba(20, 184, 166, 0.5);HSL / HSLA
Hue (0–360 degrees on the color wheel), Saturation (0–100%), Lightness (0–100%). HSL is the most intuitive model for humans — to make a color darker, lower L; to make it less vivid, lower S; to shift to a complementary color, add 180 to H.
color: hsl(173, 80%, 40%);
background: hsla(173, 80%, 40%, 0.5);Rule of thumb: use HEX for fixed colors, RGB when you need per-channel math, HSL when you are deriving variants (lighter, darker, more saturated) from a base color.
Generating a palette
A good UI palette is not random. It is built from a base color using a consistent method. The most common approaches:
- Monochromatic — same hue, varying lightness. Calm, safe, easy to make accessible.
- Analogous — adjacent hues on the color wheel (e.g. 30° apart). Harmonious, low-contrast.
- Complementary — opposite hues (180° apart). High contrast, use sparingly for accents.
- Triadic — three hues 120° apart. Vibrant, harder to balance.
- Shades and tints — single hue with 5–9 lightness steps. The foundation of any design system.
A Color Palette Generator automates this — pick a base color, choose a harmony rule, and export the resulting palette as HEX/RGB/HSL.
The 60-30-10 rule
A classic UI composition guideline:
- 60% dominant color (usually a neutral — white, off-white, dark gray).
- 30% secondary color (your brand or section accent).
- 10% accent color (calls to action, highlights).
This prevents the "rainbow UI" problem where every element competes for attention. Pick one accent color and let everything else be neutral.
Accessibility: WCAG contrast
The most common accessibility failure is insufficient color contrast. WCAG 2.1 specifies minimum ratios:
- 4.5:1 — minimum for normal body text (AA conformance).
- 3:1 — minimum for large text (18pt+ or 14pt+ bold) and UI components.
- 7:1 — enhanced (AAA conformance) for normal body text.
- 4.5:1 — minimum for non-text contrast (form fields, icons, focus indicators).
Common mistake: gray text on white. #999999 on white is only 2.85:1 — fails WCAG AA. Use #767676 or darker for body text on white.
Dark mode considerations
Dark mode is not "invert the colors." It requires re-balancing:
- Avoid pure black (#000000) for large surfaces — causes eye strain. Use #0a0a0a or #111111.
- Reduce saturation of accent colors — vivid colors that pop on white look neon on dark.
- Lower text contrast slightly — pure white on pure black is too harsh. Use #e5e5e5 on #0a0a0a.
- Increase the contrast of subtle borders — borders that work on white disappear on dark backgrounds.
Gradients: linear, radial, conic
Gradients add depth without images. CSS supports three types:
/* Linear — most common, for buttons and backgrounds */
background: linear-gradient(135deg, #14b8a6 0%, #10b981 100%);
/* Radial — for glows and focal points */
background: radial-gradient(circle at 50% 50%, #14b8a6 0%, transparent 70%);
/* Conic — for pie charts and rotating accents */
background: conic-gradient(from 0deg, #14b8a6, #10b981, #14b8a6);Gradient tips:
- Use 2 colors max for UI elements. Three+ colors look amateurish on small surfaces.
- Keep hue shifts small (under 30°) for natural-looking gradients.
- Avoid pure black-to-white — pick a colored dark and a colored light instead.
- Always provide a solid background-color fallback for older browsers.
A CSS Gradient Generator lets you visually tune gradient direction, color stops, and type, then copy the CSS directly.
Converting between formats
You will constantly need to convert between HEX, RGB, and HSL — design tools speak HEX, CSS supports all three, and JavaScript color math is easiest in HSL. A Color Converter handles this in one click. Useful conversions to know:
- HEX #14b8a6 = RGB(20, 184, 166) = HSL(173°, 80%, 40%)
- To darken: reduce HSL lightness by 10% — HSL(173°, 80%, 30%)
- To desaturate: reduce HSL saturation by 30% — HSL(173°, 50%, 40%)
- To get the complementary color: add 180° to hue — HSL(353°, 80%, 40%)
The takeaway
Color theory for developers is not about aesthetics — it is about consistency and accessibility. Understand the three models (HEX, RGB, HSL), build palettes from a base color using harmony rules, always check WCAG contrast, and use tools to do the repetitive work. Start with our Color Palette Generator, convert formats with the Color Converter, and prototype gradients with the CSS Gradient Generator.