The Color Wheel
The color wheel is the foundation of all color theory. It organizes colors in a circle based on their relationships. The three primary colors — red, yellow, and blue — cannot be created by mixing other colors. Secondary colors (orange, green, purple) are made by mixing two primaries. Tertiary colors fill the gaps between them.
Hue, Saturation, and Lightness
Every color has three properties. Hue is the pure color itself — what we mean when we say red, blue, or yellow. Saturation describes the intensity or purity of the color, from gray (0%) to vivid (100%). Lightness describes how light or dark the color is, from black (0%) to white (100%). Understanding HSL is more intuitive for designers than RGB because it mirrors how we actually think about adjusting colors.
💡 Pro Tip
When a color feels "off" in your design, adjust saturation first. Most amateur designers oversaturate — try pulling saturation down to 60–70% for a more professional result.
Warm vs Cool Colors
Colors are divided into warm and cool families based on their psychological temperature. Warm colors — reds, oranges, and yellows — advance visually, feel energetic, and create urgency. Cool colors — blues, greens, and purples — recede visually, feel calm, and create trust. This is why emergency services use red and financial institutions use blue.
Tints, Shades, and Tones
Starting from a pure hue, you can create a whole family of related colors. Adding white creates a tint — lighter and more delicate. Adding black creates a shade — darker and more dramatic. Adding gray creates a tone — more muted and sophisticated. A complete design system typically includes a full range of tints and shades for each core color.
💡 Pro Tip
Most professional design systems use 9–11 steps from lightest tint to darkest shade. Tailwind CSS uses this approach with 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950.