Learn Color Theory
Master color with interactive guides.
Color Variations
Five fundamental ways to derive new colors from a single base.
Every color can spawn an entire family of related colors. Shades darken it, tints lighten it, tones mute it, hue rotation shifts it around the wheel, and temperature shifts push it warmer or cooler. Pick a base color below and watch all five families update in real-time.
Shades
Mixing a color with black to create darker versions.
A shade is produced by adding black to a color, progressively reducing its lightness while preserving the original hue character. Shades are essential for creating depth, emphasis, and hierarchy — think hover states, borders, and text on light backgrounds.
When to use shades
Use shades for text colors, dark borders, pressed button states, and any element that needs to recede or anchor a composition. A well-chosen shade can replace generic grays while maintaining brand cohesion.
Tints
Mixing a color with white to create lighter versions.
A tint is the opposite of a shade — adding white lightens the color while keeping the underlying hue recognizable. Tints are the backbone of surface colors, backgrounds, subtle badges, and disabled states.
When to use tints
Tints work beautifully as background washes, hover highlights, alert banners, and tag/chip fills. A light tint of your primary color often makes a better surface than a plain gray.
Tones
Mixing a color with gray to create muted versions.
A toneis created by mixing a color with gray, reducing its saturation without dramatically changing lightness. Tones feel natural and sophisticated — they're the colors you see in real-world environments where light scatters and surfaces absorb.
When to use tones
Tones are ideal for secondary UI elements, muted icons, placeholder text, and decorative backgrounds. They pair well with their vivid parent color, creating a natural "loud vs quiet" dynamic without clashing.
Hue Rotation
Rotating around the color wheel while keeping saturation and lightness constant.
Hue rotation shifts a color around the 360° color wheel. Unlike shades, tints, and tones — which stay in one hue family — rotation produces entirely new colors that share the same energy level (saturation and lightness). This is the basis for harmony rules like complementary, triadic, and analogous.
Hue and harmony
Specific hue offsets produce classic harmony relationships: 180° gives you a complement, 120° a triad, 30° an analogous neighbor. The full rotation shown here is how color wheels and palette generators work under the hood.
Temperature
Shifting a color warmer or cooler by adjusting hue toward orange or blue.
Color temperature is the perceived warmth or coolness of a color. Warm colors (reds, oranges, yellows) feel energetic and advancing; cool colors (blues, greens, violets) feel calm and receding. Shifting temperature is one of the most powerful ways to create mood and spatial depth in a design.
Warm & cool hue ranges
Warm hues live roughly between 0°–60° and 300°–360° (reds, oranges, magentas). Cool hues span approximately 150°–270° (greens, cyans, blues). The transition zones (60°–150° and 270°–300°) are where yellows turn green and purples shift toward blue — these are often the most interesting temperatures to explore.