Learn Design: Color Theory for Web Developers

Q: What is the 60-30-10 rule in color?

A classic interior design rule adapted for UI: 60% of the page uses a neutral/dominant color (background), 30% uses a secondary color (headers, cards), and 10% uses an accent color (buttons, links, CTAs). This creates balanced, professional-looking designs.

Q: What is color psychology?

The study of how colors affect perception and behavior. Blue conveys trust (banks, social media), red creates urgency (sales, errors), green suggests growth (finance, health), and purple implies creativity. Use this to support your brand message, but never override accessibility for psychology.

Q: Why is LAB color space important?

LAB is perceptually uniform — a 10-unit change in L* produces the same perceived brightness difference regardless of where you are in the range. HSL is not perceptually uniform (yellow at L=50% appears brighter than blue at L=50%). LAB is used in image processing and color correction algorithms.

Q: What tools should I use for color selection?

Coolors (generates palettes), Adobe Color (harmony rules and accessibility), and ColourLovers (community palettes). For contrast checking, use WebAIM Contrast Checker or Chrome DevTools.

Design & Graphics

Color Theory for Web Developers

DodaTech Updated Jun 20, 2026 8 min read

Color theory is the science and art of using color — understanding models like RGB, HSL, and LAB, creating harmonious schemes (monochromatic, complementary, triadic), and ensuring accessibility through sufficient contrast ratios.

What You’ll Learn

You’ll master RGB, HSL, and LAB color models, create balanced color schemes using classic harmonies, ensure WCAG-compliant contrast ratios, use tools like Coolors and Adobe Color, and implement themeable designs with CSS custom properties.

Why It Matters

Color is the first thing users notice. Poor color choices cause eye strain, accessibility failures, and brand inconsistency. Doda Browser’s dark mode was designed using HSL-based theming — a single hue shift transforms the entire palette. Durga Antivirus Pro uses color-coded threat levels (green/yellow/orange/red) that follow accessibility contrast standards.

Real-World Use

A dashboard that uses red for critical alerts, yellow for warnings, and green for healthy metrics — the colors must be distinguishable even by color-blind users. A SaaS product’s light/dark mode toggle shifts HSL hue values programmatically. An e-commerce site’s brand colors must work on white, gray, and dark backgrounds.

Color Models Comparison


flowchart LR
    A[Color Models] --> B[RGB]
    A --> C[HSL]
    A --> D[LAB]
    B --> E[Additive, screen]
    C --> F[Intuitive: Hue, Saturation, Lightness]
    D --> G[Perceptually uniform]
    style B fill:#dc2626,color:#fff
    style C fill:#2563eb,color:#fff
    style D fill:#059669,color:#fff

Step 1: Understanding Color Models

// RGB — device-native, hard to reason about
const rgbRed = "rgb(255, 0, 0)";
const rgbDarkRed = "rgb(180, 0, 0)";

// HSL — human-friendly, great for theming
// hsl(hue, saturation%, lightness%)
const hslBlue = "hsl(220, 100%, 50%)";      // pure blue
const hslDarkBlue = "hsl(220, 80%, 30%)";    // darker, less saturated
const hslLightBlue = "hsl(220, 60%, 80%)";   // pastel blue

// LAB — perceptually uniform (used in color correction)
// L* (lightness 0-100), a (green-red), b (blue-yellow)
// Not directly usable in CSS, but available in Canvas and color libraries

Why HSL is best for theming: Change one number (hue) and the entire palette shifts. To create a dark mode, reduce lightness across all colors. To desaturate a UI for accessibility, reduce global saturation. RGB requires changing three values per color.

/* Themed with HSL */
:root {
  --hue: 220;
  --primary: hsl(var(--hue), 80%, 50%);
  --primary-light: hsl(var(--hue), 70%, 85%);
  --primary-dark: hsl(var(--hue), 70%, 30%);
  --bg: hsl(var(--hue), 10%, 98%);
  --text: hsl(var(--hue), 15%, 15%);
}

[data-theme="dark"] {
  --primary: hsl(var(--hue), 70%, 60%);
  --primary-light: hsl(var(--hue), 40%, 20%);
  --primary-dark: hsl(var(--hue), 60%, 70%);
  --bg: hsl(var(--hue), 15%, 10%);
  --text: hsl(var(--hue), 10%, 90%);
}

Expected output: Changing data-theme="dark" on the <html> element toggles the entire color scheme. The primary hue stays at 220 (blue) but adapts lightness for dark backgrounds. All components using these variables update automatically.

Step 2: Color Schemes

<style>
  .scheme-card {
    padding: 16px; border-radius: 8px; margin-bottom: 16px; color: white;
  }
  .scheme-examples { display: flex; gap: 8px; margin-top: 8px; }
  .swatch { width: 48px; height: 48px; border-radius: 6px; }
</style>

<!-- Monochromatic: single hue, varying lightness/saturation -->
<div class="scheme-card" style="background: #1e3a5f;">
  <strong>Monochromatic (hue 210)</strong>
  <div class="scheme-examples">
    <div class="swatch" style="background: hsl(210, 60%, 15%);"></div>
    <div class="swatch" style="background: hsl(210, 55%, 30%);"></div>
    <div class="swatch" style="background: hsl(210, 50%, 50%);"></div>
    <div class="swatch" style="background: hsl(210, 45%, 70%);"></div>
    <div class="swatch" style="background: hsl(210, 40%, 90%);"></div>
  </div>
</div>

<!-- Complementary: opposite on color wheel (hue 210 vs 30) -->
<div class="scheme-card" style="background: #2d3748;">
  <strong>Complementary (blue + orange)</strong>
  <div class="scheme-examples">
    <div class="swatch" style="background: #2563eb;"></div>
    <div class="swatch" style="background: #3b82f6;"></div>
    <div class="swatch" style="background: #f97316;"></div>
    <div class="swatch" style="background: #fb923c;"></div>
  </div>
</div>

<!-- Triadic: 3 evenly spaced hues (210, 330, 90) -->
<div class="scheme-card" style="background: #1a202c;">
  <strong>Triadic (blue + pink + green)</strong>
  <div class="scheme-examples">
    <div class="swatch" style="background: #2563eb;"></div>
    <div class="swatch" style="background: #ec4899;"></div>
    <div class="swatch" style="background: #10b981;"></div>
  </div>
</div>

Expected output: Three color scheme cards showing monochromatic (same hue, varying lightness), complementary (opposite hues — high contrast), and triadic (three evenly spaced hues — vibrant but balanced). Each scheme serves different design goals.

When to Use Each Scheme

Scheme	Best For	Example
Monochromatic	Clean, professional UIs	SaaS dashboards
Complementary	High contrast, call-to-action	“Buy Now” buttons
Triadic	Vibrant, playful designs	Children’s apps
Analogous	Soothing, harmonious	Nature/wellness apps
Split-Complementary	Balanced contrast without tension	E-commerce

Step 3: Accessibility — Contrast Ratios

WCAG 2.1 requires specific contrast ratios:

// Calculate relative luminance (per WCAG 2.1)
function getLuminance(hex) {
  const rgb = hexToRgb(hex);
  const [r, g, b] = [rgb.r, rgb.g, rgb.b].map(c => {
    c = c / 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

// Calculate contrast ratio between two colors
function getContrastRatio(hex1, hex2) {
  const l1 = getLuminance(hex1);
  const l2 = getLuminance(hex2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16),
  } : null;
}

// Test some combinations
console.log("Black on white:", getContrastRatio("#000000", "#ffffff").toFixed(2));
// Expected: ~21.00 (maximum)

console.log("#333 on #fff:", getContrastRatio("#333333", "#ffffff").toFixed(2));
// Expected: ~9.78 — passes AAA for normal text

console.log("#999 on #fff:", getContrastRatio("#999999", "#ffffff").toFixed(2));
// Expected: ~2.85 — FAILS AA (needs 4.5:1)

console.log("#fff on #2563eb:", getContrastRatio("#ffffff", "#2563eb").toFixed(2));
// Expected: ~4.87 — passes AA for normal text

Expected output: The contrast ratios show which color combinations are accessible. Black on white is maximum contrast. #333 on white passes AAA. #999 on white fails even AA — common mistake when designers try to use “subtle” gray text.

Step 4: Creating a Themeable System

:root {
  /* Brand colors */
  --color-brand: #6366f1;

  /* Semantic colors — use these in components, not raw brand colors */
  --color-primary: var(--color-brand);
  --color-primary-hover: #4f46e5;
  --color-primary-text: #ffffff;

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #3b82f6;

  /* Surface colors */
  --color-bg: #ffffff;
  --color-surface: #f8fafc;
  --color-border: #e2e8f0;

  /* Text colors */
  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;

  /* Focus ring */
  --color-focus: var(--color-primary);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-focus) 40%, transparent);
}

[data-theme="dark"] {
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-border: #334155;
  --color-text: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;

  /* Adjust brand for dark bg (lighter version) */
  --color-primary: #818cf8;
  --color-primary-hover: #a5b4fc;
}

/* Components use semantic variables */
button {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}

button:hover {
  background: var(--color-primary-hover);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 24px;
  border-radius: 8px;
}

Expected output: A fully themeable design system. Change data-theme to toggle light/dark mode. Every component uses semantic variables, so you never need to update individual component styles.

Common Errors

1. Using hex colors directly in components Hardcoding #2563eb in 50 places means 50 edits to change the brand color. Use CSS custom properties in a centralized :root block. Components reference var(--color-primary) instead.

2. Ignoring color blindness Approximately 8% of men have some form of color blindness (most commonly red-green). Never rely on color alone to convey information — use icons, patterns, or text labels alongside color. Test with Chrome DevTools’ “Rendering → Emulate vision deficiencies.”

3. Choosing colors in RGB instead of HSL RGB is device-native but unintuitive for design. HSL lets you think in terms of hue, saturation, and lightness — much easier to create balanced schemes. Most design tools (Figma, Adobe XD) default to HSL for a reason.

4. Insufficient contrast for small text WCAG AA requires 4.5:1 for text under 18px (or 14px bold). Use the getContrastRatio function above to validate. Don’t rely on your eyes — what looks readable on a bright monitor may fail on a dim phone screen.

5. Not testing on actual screens Colors look different on IPS, OLED, and TN panels. Test your design on multiple devices. OLED displays have deeper blacks (true #000000) while IPS blacks appear gray. Calibrated workflows use sRGB color space for web.

Practice Questions

1. What is the difference between RGB and HSL color models? RGB defines colors by their red, green, and blue components (0-255 each). HSL defines colors by hue (0-360° on the color wheel), saturation (0-100%), and lightness (0-100%). HSL is more intuitive for creating color schemes because you change one dimension at a time.

2. What WCAG contrast ratio is required for normal-sized text? WCAG AA requires 4.5:1 for normal text (<18px or <14px bold). Large text (≥18px or ≥14px bold) needs 3:1. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.

3. What is a complementary color scheme? Colors opposite each other on the color wheel (e.g., blue at 210° and orange at 30°). Complementary schemes create high contrast and visual tension — use one color as the dominant and the other as an accent.

4. How do you create a dark mode with CSS custom properties? Define all colors as variables on :root (light) and [data-theme="dark"] (dark). Change only the variable values — all components update automatically. Use prefers-color-scheme media query for automatic switching.

5. Challenge: Build a color palette generator Write a JavaScript function that takes a base HSL hue and generates a complete palette: 5 shades (light to dark), complementary color, and two analogous colors. Output as CSS custom properties.

FAQ

What is the 60-30-10 rule in color?

A classic interior design rule adapted for UI: 60% of the page uses a neutral/dominant color (background), 30% uses a secondary color (headers, cards), and 10% uses an accent color (buttons, links, CTAs). This creates balanced, professional-looking designs.

What is color psychology?

The study of how colors affect perception and behavior. Blue conveys trust (banks, social media), red creates urgency (sales, errors), green suggests growth (finance, health), and purple implies creativity. Use this to support your brand message, but never override accessibility for psychology.

Why is LAB color space important?

LAB is perceptually uniform — a 10-unit change in L* produces the same perceived brightness difference regardless of where you are in the range. HSL is not perceptually uniform (yellow at L=50% appears brighter than blue at L=50%). LAB is used in image processing and color correction algorithms.

What tools should I use for color selection?

Coolors (generates palettes), Adobe Color (harmony rules and accessibility), and ColourLovers (community palettes). For contrast checking, use WebAIM Contrast Checker or Chrome DevTools.

What’s Next

Typography for the Web — Next Lesson

UI/UX Design Fundamentals

SVG Animation Techniques

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.

Previous UI/UX Design Fundamentals for Developers Next Typography for the Web: Fonts, Readability & Performance

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Design & Graphics

More in Design & Graphics

Three.js 3D Graphics Guide WebGL Graphics Guide Babylon.js 3D Engine Guide D3.js Data Visualization Guide Chart.js Guide HighCharts Library Guide SVG Graphics Guide