Color Theory Basics
A practical guide to understanding color — for developers and designers who want to make better color decisions.
What Is Color?
Color is light at different wavelengths. Your eyes perceive these wavelengths through cone cells, and your brain interprets them as the colors you see. On screens, color is reproduced by mixing red, green, and blue light at varying intensities.
The Three Dimensions of Color
Every color can be described by three properties:
Hue
Hue is what we typically mean by "color" — red, blue, green, yellow. On the color wheel, hue is measured in degrees from 0 to 360. 0° is red, 120° is green, 240° is blue.
Saturation
Saturation (also called chroma or intensity) describes how pure a color is. A fully saturated color contains no gray. Desaturated colors appear muted or washed out. At 0% saturation, every hue looks gray.
Lightness
Lightness (also called luminance or value) describes how light or dark a color is. At 100% lightness, any hue becomes white. At 0%, it becomes black. At 50%, the color appears at its most vivid.
The Color Wheel
The color wheel arranges hues in a circle. Primary colors (red, yellow, blue) are spaced evenly. Secondary colors (green, orange, purple) sit between them. Tertiary colors fill the remaining gaps. The Color Workbench lets you explore the full 360° wheel visually.
RGB vs HSL vs OKLCH
Different color models describe color differently. RGB mixes red, green, and blue light — intuitive for computers but not for humans. HSL (hue, saturation, lightness) maps to how people think about color. OKLCH is a perceptually-uniform model that better matches human vision, making it ideal for generating color scales.
Warm vs Cool Colors
Colors are often described as warm (reds, oranges, yellows) or cool(blues, greens, purples). Warm colors feel energetic and advance toward the viewer. Cool colors feel calm and recede. The Color Workbench shows the temperature of any color in the analysis panel.
Using the Color Workbench
Enter any color value in the input panel to see its hue, saturation, and lightness instantly. Use the visual picker to explore the color space. The analysis section breaks down every color into its component dimensions.