The Color Wheel

The color wheel is your map for understanding how colors relate to each other. Master it and you'll never struggle to find colors that work together.

The Standard Color Wheel

The RYB (Red-Yellow-Blue) color wheel has been used by artists for centuries. For digital work, we use the RGB wheel, but the relationships are similar.

                    0° Red
                      │
           330°       │       30°
          Magenta     │     Orange
                 \    │    /
                  \   │   /
       300°        \  │  /        60°
       Purple       \ │ /       Yellow
                     \│/
      270° ───────────●─────────── 90°
       Blue          /│\        Yellow-Green
                    / │ \
       240°        /  │  \       120°
       Cyan       /   │   \     Green
                 /    │    \
           210°       │      150°
          Sky Blue    │    Teal
                      │
                   180° Cyan

Primary, Secondary, and Tertiary Colors

Primary Colors (RGB for Digital)

The building blocks - cannot be created by mixing other colors.

Secondary Colors

Created by mixing two primaries.

Tertiary Colors

Created by mixing a primary and an adjacent secondary.

Color Wheel Positions in HSL

This is incredibly useful. The hue value in HSL directly maps to the color wheel:

:root {
  --red: hsl(0, 100%, 50%);
  --orange: hsl(30, 100%, 50%);
  --yellow: hsl(60, 100%, 50%);
  --chartreuse: hsl(90, 100%, 50%);
  --green: hsl(120, 100%, 50%);
  --spring-green: hsl(150, 100%, 50%);
  --cyan: hsl(180, 100%, 50%);
  --azure: hsl(210, 100%, 50%);
  --blue: hsl(240, 100%, 50%);
  --violet: hsl(270, 100%, 50%);
  --magenta: hsl(300, 100%, 50%);
  --rose: hsl(330, 100%, 50%);
}

Every 30° is a new color. This makes calculating relationships trivial.

Warm vs Cool Colors

The color wheel divides naturally into warm and cool halves.

        WARM SIDE                    COOL SIDE
    ┌─────────────────┐          ┌─────────────────┐
    │  Red      0°    │          │  Cyan    180°   │
    │  Orange   30°   │          │  Azure   210°   │
    │  Yellow   60°   │          │  Blue    240°   │
    │  Chartreuse 90° │          │  Violet  270°   │
    └─────────────────┘          │  Magenta 300°   │
                                 │  Rose    330°   │
                                 └─────────────────┘

Actually, it's more nuanced:

Why Temperature Matters

• Warm colors advance (appear closer), grab attention, create energy
• Cool colors recede (appear farther), create calm, feel trustworthy
• Mix both for balanced designs

/* Warm accent on cool base - classic combo */
.card {
  background: hsl(210, 20%, 98%);  /* Cool gray */
  border-left: 4px solid hsl(20, 90%, 50%);  /* Warm orange accent */
}

Color Wheel Relationships

The position of colors relative to each other determines how they interact.

Adjacent Colors (Analogous)

Colors next to each other on the wheel (within 30-60°). Always harmonious.

Example: Blue palette
┌─────────────────────┐
│  Azure (210°)       │
│  Blue (240°)        │  ← These naturally work together
│  Violet (270°)      │
└─────────────────────┘

Opposite Colors (Complementary)

Colors 180° apart. Maximum contrast, high energy.

Red (0°)      ←──180°──→  Cyan (180°)
Orange (30°)  ←──180°──→  Azure (210°)
Yellow (60°)  ←──180°──→  Blue (240°)
Green (120°)  ←──180°──→  Magenta (300°)

Colors at Other Angles

Finding Related Colors with HSL

The color wheel makes this trivial with HSL:

:root {
  --base-hue: 220;  /* Blue */

  /* Complementary (opposite) */
  --complement: hsl(calc(var(--base-hue) + 180), 80%, 50%);

  /* Analogous (neighbors) */
  --analogous-1: hsl(calc(var(--base-hue) - 30), 80%, 50%);
  --analogous-2: hsl(calc(var(--base-hue) + 30), 80%, 50%);

  /* Triadic (120° apart) */
  --triadic-1: hsl(calc(var(--base-hue) + 120), 80%, 50%);
  --triadic-2: hsl(calc(var(--base-hue) + 240), 80%, 50%);

  /* Split complementary */
  --split-1: hsl(calc(var(--base-hue) + 150), 80%, 50%);
  --split-2: hsl(calc(var(--base-hue) + 210), 80%, 50%);
}

Neutrals: The Forgotten Colors

Neutrals aren't on the color wheel but are essential.

True Neutrals

--black: hsl(0, 0%, 0%);
--gray-900: hsl(0, 0%, 10%);
--gray-500: hsl(0, 0%, 50%);
--gray-100: hsl(0, 0%, 90%);
--white: hsl(0, 0%, 100%);

Tinted Neutrals (Better for UI)

Pure grays often look lifeless. Add a hint of your brand color:

/* Cool gray (blue tint) - professional, tech */
--gray-cool: hsl(220, 10%, 50%);

/* Warm gray (yellow/orange tint) - friendly, approachable */
--gray-warm: hsl(40, 10%, 50%);

/* Neutral gray with brand color */
--gray-brand: hsl(var(--brand-hue), 5%, 50%);

The Expanded Color Wheel

Beyond the basic 12 colors, you can identify any hue:

Practical Applications

Finding Your Brand's Neighbors

If your brand color is hsl(220, 80%, 50%) (a blue):

:root {
  --brand: hsl(220, 80%, 50%);

  /* Safe accent colors (analogous) */
  --accent-1: hsl(190, 80%, 50%);  /* Cyan-ish */
  --accent-2: hsl(250, 80%, 50%);  /* Purple-ish */

  /* High-impact accent (complementary) */
  --cta: hsl(40, 80%, 50%);  /* Orange - opposite */
}

Using the Wheel for Semantic Colors

:root {
  /* Choose a hue family for each semantic meaning */
  --hue-success: 142;  /* Green family */
  --hue-warning: 38;   /* Orange family */
  --hue-error: 0;      /* Red family */
  --hue-info: 210;     /* Blue family */
}

Summary

Next: 04-color-harmony.md - Color harmony schemes in detail