Color Theory Basics Every Designer and Developer Needs
Color is light at different wavelengths. Screens mix red, green, and blue light (additive color) to produce every shade you see. Print uses cyan, magenta, yellow, and key/black (subtractive color). On the web, you work with additive color in three notations: HEX, RGB, and HSL. All three describe the same color — they just organize the information differently.
The color wheel arranges hues in a circle at 0–360 degrees. Red sits at 0°, green at 120°, blue at 240°. Understanding this wheel is the foundation for picking colors that work together. The relationships between positions on the wheel — complementary, analogous, triadic — are called color harmonies.
Saturation controls intensity. 100% saturation is pure color; 0% is gray. Lightness controls how bright or dark a color appears. 50% is the pure hue, 0% is black, 100% is white. These two axes give you instant access to tints (lighter), shades (darker), and tones (grayer) of any color.
HEX vs RGB vs HSL: When to Use Each
| Format | Syntax | Best For | Example |
|---|---|---|---|
| HEX | #RRGGBB | CSS shorthand, brand guidelines, design tokens | #FF5733 |
| RGB | rgb(R, G, B) | Programmatic color mixing, alpha transparency | rgb(255, 87, 51) |
| HSL | hsl(H, S%, L%) | Creating tints/shades, color palettes, accessibility | hsl(11, 100%, 60%) |
| RGBA | rgba(R, G, B, A) | Semi-transparent overlays, shadows, glass effects | rgba(255, 87, 51, 0.5) |
| HSLA | hsla(H, S%, L%, A) | Transparent palette variations, hover states | hsla(11, 100%, 60%, 0.5) |
HEX is the most compact — 6 characters encode a full color. RGB is intuitive for mixing: higher numbers mean more of that channel. HSL is the most human-friendly: adjust the hue to change the color, saturation to change intensity, lightness to go lighter or darker. CSS supports all three natively.
Color Harmonies: How to Pick Colors That Work Together
Complementary colors sit directly opposite each other on the wheel — 180° apart. Red and cyan, blue and orange, yellow and purple. They produce maximum contrast and visual energy. Use them for call-to-action buttons against a background, or to make key information stand out. Too much complementary color creates visual tension, so use the dominant/accent rule: 80% one color, 20% its complement.
Analogous colors are neighbors on the wheel, typically 30° apart in hue. Blue, blue-green, and green are analogous. They create harmonious, cohesive palettes with low contrast. Use them for backgrounds, gradients, and designs that should feel unified and calm. Most nature scenes are analogous color schemes.
Triadic colors are evenly spaced 120° apart, forming an equilateral triangle on the wheel. Red, green, and blue are the primary triadic set. Triadic schemes offer strong visual contrast while maintaining balance. They work well for infographics, dashboards, and branding where you need three distinct but harmonious colors. Use one as the dominant, the other two as accents.
Using Colors in CSS: Practical Patterns
Modern CSS gives you several ways to work with color. The color property sets text color. background-color sets the fill. border-color sets outlines. All accept HEX, RGB, or HSL values interchangeably.
For design systems, define colors as CSS custom properties using HSL: --brand-primary: hsl(11, 100%, 60%). HSL makes it trivial to generate lighter and darker variants by adjusting the lightness channel: --brand-primary-light: hsl(11, 100%, 80%) and --brand-primary-dark: hsl(11, 100%, 40%). No need to manually calculate HEX codes for every shade.
Accessibility rule: text needs a minimum 4.5:1 contrast ratio against its background (WCAG 2.1 AA). Large text (18px+ bold, 24px+ normal) only needs 3:1. Dark text on light backgrounds almost always passes. Light text on medium backgrounds is where most failures happen. This converter shows you the lightness values — keep text lightness below 40% on white backgrounds, or above 70% on dark backgrounds.
For splitting percentages and proportions across color-coded categories, the percentage calculator handles all three common percentage modes with step-by-step explanations.