Color is one of the most powerful tools in design. It evokes emotions, directs attention, and communicates meaning—often before a single word is read. Understanding color theory helps you make intentional choices that strengthen your designs.
Understanding Color Models
RGB (Red, Green, Blue)
Screens emit light using red, green, and blue. Combining them at full intensity creates white (additive color). Each channel ranges from 0-255.
Example: rgb(255, 0, 0) = pure red
HEX Codes
Hexadecimal representation of RGB values. Each pair of characters represents one channel (00-FF).
Example: #FF0000 = pure red (FF=255 for red, 00=0 for green and blue)
Convert between formats with our HEX to RGB converter.
HSL (Hue, Saturation, Lightness)
A more intuitive model for humans:
- Hue: The color itself (0-360 degrees on the color wheel)
- Saturation: Color intensity (0% = gray, 100% = vivid)
- Lightness: How light or dark (0% = black, 100% = white)
CMYK (Cyan, Magenta, Yellow, Key/Black)
Used for print. Inks absorb light (subtractive color). Digital designs should be converted to CMYK before printing.
The Color Wheel
The color wheel organizes colors by their relationships:
Primary Colors
Red, yellow, blue (traditional) or red, green, blue (light/digital). Cannot be created by mixing other colors.
Secondary Colors
Created by mixing two primaries: orange, green, purple.
Tertiary Colors
Mix of primary and adjacent secondary: red-orange, yellow-green, blue-violet, etc.
Color Harmonies
Pleasing color combinations follow predictable patterns:
Complementary
Colors opposite on the wheel (red/green, blue/orange). High contrast, vibrant when used together.
Analogous
Colors adjacent on the wheel (blue, blue-green, green). Harmonious, calming, found in nature.
Triadic
Three colors equally spaced (red, yellow, blue). Balanced, vibrant, requires careful handling.
Split-Complementary
One color plus the two colors adjacent to its complement. Contrast with less tension than pure complementary.
Tetradic (Rectangle)
Four colors in two complementary pairs. Rich color palette but challenging to balance.
Color Psychology
Colors carry cultural and psychological associations:
- Red: Energy, urgency, passion, danger. Increases heart rate. Common in clearance sales.
- Blue: Trust, calm, professionalism. Most universally liked color. Popular with banks and tech companies.
- Green: Nature, growth, health, wealth. Easy on eyes. Environmental and financial associations.
- Yellow: Optimism, warmth, caution. Grabs attention. Can cause eye fatigue in large amounts.
- Orange: Friendliness, confidence, creativity. Calls to action. Less intense than red.
- Purple: Luxury, creativity, spirituality. Historically rare and expensive in nature.
- Black: Sophistication, power, elegance. Creates contrast. Luxury brand favorite.
- White: Purity, simplicity, cleanliness. Creates space. Minimalist design essential.
Practical Color Selection
Starting from Brand Colors
Most projects start with brand colors. Build a palette by:
- Identifying primary brand color
- Finding complementary or analogous accents
- Adding neutral tones for balance
- Ensuring sufficient contrast for accessibility
Creating Color Variations
From a single color, create a system:
- Tints: Add white for lighter versions
- Shades: Add black for darker versions
- Tones: Add gray for muted versions
Use our color picker to explore variations of any color.
Accessibility Considerations
Approximately 8% of men and 0.5% of women have color vision deficiency. Ensure your designs work for everyone:
- Don't rely on color alone: Add text labels, patterns, or icons
- Check contrast ratios: WCAG requires 4.5:1 for normal text, 3:1 for large text
- Test with simulators: See how designs look to colorblind users
- Avoid problematic combinations: Red/green is the most common issue
CSS Color Tools
Modern CSS offers powerful color capabilities:
- Gradient generator: Create smooth color transitions
- CSS variables: Define colors once, use everywhere
- Color functions: Modify colors programmatically
- Opacity: RGBA and HSLA support transparency
Building a Complete Palette
A functional design palette typically includes:
- Primary color: Main brand color, used for key elements
- Secondary color: Supports primary, provides variety
- Accent color: Draws attention to calls-to-action
- Neutral colors: Backgrounds, text, borders
- Semantic colors: Success (green), warning (yellow), error (red), info (blue)
Start exploring colors with our color picker tool and convert between formats with the HEX to RGB converter.
