The Color Wheel

The wheel is your map of how colors relate. Once you can read it, picking colors that work together is not guesswork.

The Standard Color Wheel

Artists have used the RYB (Red-Yellow-Blue) wheel for centuries. For digital work, you use the RGB wheel. 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

The hue value in HSL is the color wheel angle. Same number, same position.

: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. That makes relationships trivial to calculate.

Warm vs Cool Colors

The wheel splits naturally into a warm half and a cool half.

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

The reality is more granular:

Why Temperature Matters

• Warm colors advance (appear closer), grab attention, create energy
• Cool colors recede (appear farther), feel calm and 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 to 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

HSL makes this arithmetic instead of guesswork:

: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 are not on the wheel, but they carry most of your interface.

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 touch of your brand hue:

/* 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 tinted with brand hue */
--gray-brand: hsl(var(--brand-hue), 5%, 50%);

The Expanded Color Wheel

Past the basic 12, every range maps to a color family:

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 digs into the specific harmony schemes.