Color Guide
Master color theory and transform your projects with harmonious and impactful palettes
1. Introduction to Color Theory
Color theory is a set of principles used to create harmonious color combinations. It explains how humans perceive colors and the visual effects of how colors mix, combine or contrast with each other.
Understanding color theory is essential for designers, artists, developers and anyone who works with visual communication. A good choice of colors can convey emotions, create visual hierarchy and improve user experience.
Fundamental Concepts
- Hue: The name of the pure color (red, blue, yellow)
- Saturation: The intensity or purity of the color
- Lightness: How light or dark the color is
2. The Color Wheel
The color wheel is a circular representation of colors based on the three primary colors. It was developed by Isaac Newton in 1666 and is the basis for understanding color relationships.
Primary Colors
Cannot be created by mixing other colors. They are the basis of all others.
Secondary Colors
Created by mixing two primary colors in equal parts.
Tertiary Colors
Created by mixing a primary color with an adjacent secondary color.
3. Color Harmonies
Color harmonies are combinations that work well together, creating visual balance and a pleasant aesthetic. There are several classic harmonies based on the positions of colors on the color wheel.
Complementary
Two opposite colors on the color wheel. Creates high contrast and visual energy. Ideal for highlighting important elements.
Analogous
Three adjacent colors on the color wheel. Creates harmonious and serene designs. Widely used in landscapes and nature.
Triadic
Three equidistant colors on the color wheel (forming a triangle). Vibrant and balanced, common in children's and playful designs.
Split-Complementary
A base color and the two colors adjacent to its complement. Offers contrast with less tension than pure complementary.
Tetradic (Rectangle)
Four colors forming a rectangle on the wheel. Rich in possibilities, but requires careful balance between warm and cool colors.
Monochromatic
Variations of a single color (different saturations and lightnesses). Elegant, cohesive and easy to implement. Ideal for minimalist designs.
4. Color Temperature
Colors are classified as warm or cool based on the psychological sensations they evoke. This division is fundamental to creating specific atmospheres in your projects.
Warm Colors
- Sensations: Energy, passion, urgency, warmth
- Use: CTAs, promotions, food, entertainment
- Effect: Appear to advance visually
Cool Colors
- Sensations: Calm, trust, professionalism, freshness
- Use: Corporate, health, technology, finance
- Effect: Appear to recede visually
5. Color Psychology
Each color evokes specific emotions and associations. Understanding color psychology helps convey the right message to your target audience.
Red
Emotions: Passion, energy, urgency, danger
Brands: Netflix, YouTube, Coca-Cola
Ideal use: CTAs, promotions, alerts
Orange
Emotions: Enthusiasm, creativity, adventure
Brands: Amazon, Fanta, Harley-Davidson
Ideal use: Buttons, highlights, sports
Yellow
Emotions: Optimism, happiness, attention
Brands: McDonald's, IKEA, Snapchat
Ideal use: Warnings, promotions, children's
Green
Emotions: Nature, growth, health, money
Brands: Spotify, Starbucks, WhatsApp
Ideal use: Eco-friendly, health, success
Blue
Emotions: Trust, security, professionalism
Brands: Facebook, LinkedIn, Samsung
Ideal use: Corporate, tech, finance
Purple
Emotions: Luxury, creativity, mystery, wisdom
Brands: Twitch, Nubank, Cadbury
Ideal use: Premium, beauty, spirituality
Pink
Emotions: Romance, femininity, youth
Brands: Barbie, T-Mobile, Lyft
Ideal use: Fashion, beauty, romantic
Black
Emotions: Elegance, power, sophistication
Brands: Apple, Nike, Chanel
Ideal use: Luxury, fashion, minimalism
6. Contrast and Accessibility
Color contrast is crucial for readability and accessibility. WCAG (Web Content Accessibility Guidelines) define minimum contrast standards.
WCAG Compliance Levels
Level AA (Minimum Recommended)
Normal text: 4.5:1 | Large text: 3:1
Level AAA (Enhanced)
Normal text: 7:1 | Large text: 4.5:1
Good Contrast
Black on white (21:1)
Bad Contrast
Similar colors (1.47:1)
Tip: Use our tool Contrast Checker to check if your color combinations meet WCAG standards.
7. Practical Application
Applying color theory in practice requires balance. Here are some rules and tips for creating effective palettes.
The 60-30-10 Rule
- 60% - Dominant Color: Backgrounds, large areas (usually neutral)
- 30% - Secondary Color: Supporting elements, sections
- 10% - Accent Color: CTAs, links, important icons
Practical Tips
- ✓Start with 2-3 colors and add saturation/lightness variations
- ✓Use neutral colors (white, black, gray) as a base for visual rest
- ✓Test your colors on different devices and lighting conditions
- ✓Consider color blindness: avoid red/green as the only differentiation
- ✓Maintain consistency: use the same colors for the same functions
8. Useful Tools
Use our free tools to apply color theory in your projects:
Color Wheel
Interactive color wheel to explore harmonies and create palettes.
Image Color Picker
Extract colors from any image to create inspired palettes.
Contrast Checker
Check the accessibility of your color combinations (WCAG).
Gradient Generator
Create custom gradients and export to CSS or Tailwind.
Ready to create your palettes?
Apply what you've learned and start creating amazing color combinations for your projects.
Explore Tools