You're designing a website. You pick a nice blue. Then you need a button color. Green? That looks weird. Orange? Worse. You try fifty colors, hate all of them, and eventually pick something that's "fine." Two months later, you rebrand because nothing feels cohesive. The original blue was fine—you just didn't know how to build around it.
Color palettes aren't about finding colors you like. They're about finding colors that work together according to rules that already exist.
We've made every color mistake possible: clashing combinations, inaccessible contrast, palettes that looked great on our monitors but terrible everywhere else. This guide covers the principles that actually work—and the tools to apply them.
The 60-30-10 Rule
Before picking any colors, understand how to use them:
60% - Dominant color: Background, large surfaces 30% - Secondary color: Navigation, cards, sections 10% - Accent color: Buttons, links, calls to action
This ratio creates visual hierarchy automatically. Most palette problems come from using accent colors too much or having no clear dominant color.
Color Harmony Methods
Monochromatic
What it is: Different shades and tints of a single hue.
How to build it:
- Pick one base color
- Create lighter versions (add white)
- Create darker versions (add black)
- Create desaturated versions (add gray)
When to use: Minimalist designs, when you want elegance and simplicity.
Example: Navy (#1a365d), Blue (#3182ce), Light Blue (#90cdf4), Pale Blue (#ebf8ff)
Complementary
What it is: Two colors opposite each other on the color wheel.
How to build it:
- Pick your primary color
- Find its opposite (180° across the wheel)
- Use one as dominant, one as accent
When to use: When you need strong contrast and visual impact.
Example: Blue (#3182ce) and Orange (#dd6b20)
Caution: Don't use 50/50. One must dominate (60-30-10 still applies).
Analogous
What it is: Three colors adjacent on the color wheel.
How to build it:
- Pick your main color
- Add the colors on either side (30° apart)
- Use one as dominant, others as supporting
When to use: Harmonious, comfortable designs. Nature photography, calm brands.
Example: Blue (#3182ce), Blue-Green (#319795), Green (#38a169)
Triadic
What it is: Three colors equally spaced on the wheel (120° apart).
How to build it:
- Pick your primary color
- Find the two colors 120° away
- Use one dominant, two as accents
When to use: Vibrant, energetic designs that need balance.
Example: Blue (#3182ce), Yellow (#d69e2e), Red (#e53e3e)
Split-Complementary
What it is: One color plus the two colors adjacent to its complement.
How to build it:
- Pick your primary color
- Find its complement
- Use the two colors on either side of the complement instead
When to use: When you want contrast but complementary feels too harsh.
Example: Blue (#3182ce), Yellow-Orange (#d69e2e), Red-Orange (#dd6b20)
Building a Palette Step by Step
Step 1: Start with One Color
Don't pick multiple colors simultaneously. Start with:
- Your brand color (if you have one)
- A color that conveys the right emotion
- A color from imagery you'll use
Use our Color Converter to get this color in all formats.
Step 2: Determine the Harmony Type
Ask yourself:
- Do I need high contrast? → Complementary or Split-Complementary
- Do I want calm and cohesive? → Monochromatic or Analogous
- Do I need variety but balance? → Triadic
Step 3: Generate Your Colors
Using your harmony method, identify 3-5 colors:
- 1 dominant (for 60%)
- 1-2 supporting (for 30%)
- 1-2 accent (for 10%)
Step 4: Add Neutrals
Every palette needs neutrals:
- White or off-white for backgrounds
- Black or dark gray for text
- Mid-gray for secondary elements
Pro tip: Tint your neutrals with a tiny amount of your dominant color. Pure gray looks cold next to warm colors.
Step 5: Test for Accessibility
Use our Color Contrast tool to verify:
- Text on backgrounds has 4.5:1 ratio minimum
- Large text has 3:1 ratio minimum
- UI elements have 3:1 ratio minimum
If combinations fail, adjust until they pass.
Color Psychology Basics
Warm Colors
Red: Energy, urgency, passion. Use for: CTAs, warnings, sales Orange: Friendly, confident, creative. Use for: Secondary CTAs, highlights Yellow: Optimism, attention, warmth. Use for: Warnings, highlights (carefully)
Cool Colors
Blue: Trust, calm, professional. Use for: Corporate, finance, healthcare Green: Growth, nature, success. Use for: Eco brands, confirmation states Purple: Luxury, creativity, wisdom. Use for: Premium brands, creative industries
Neutrals
Black: Sophistication, elegance, power White: Clean, minimal, spacious Gray: Neutral, professional, balanced
Important: These associations are cultural and contextual. Don't over-rely on them.
Common Palette Mistakes
Mistake 1: Too Many Colors
Problem: Five vibrant colors fighting for attention.
Solution: Maximum 3-4 colors plus neutrals. When in doubt, remove.
Mistake 2: No Clear Hierarchy
Problem: Everything is colorful, nothing stands out.
Solution: Apply 60-30-10. One color dominates, one supports, one accents.
Mistake 3: Ignoring Accessibility
Problem: Light gray text on white background. Users can't read it.
Solution: Check every text/background combination with our Color Contrast tool. No exceptions.
Mistake 4: Colors That Work in Isolation
Problem: Each color looks nice alone, but together they clash.
Solution: Always view colors in context. Test actual UI mockups, not just swatches.
Mistake 5: Not Testing on Real Screens
Problem: Perfect on your calibrated monitor, terrible on a phone.
Solution: View on multiple devices. Print if the design will be printed.
Converting and Working with Colors
Our Color Converter handles all format conversions:
Format Quick Reference
| Format | Example | Use Case |
|---|---|---|
| HEX | #3182ce | Web, design tools |
| RGB | rgb(49, 130, 206) | CSS, screen design |
| HSL | hsl(207, 62%, 50%) | Creating variations |
| RGBA | rgba(49, 130, 206, 0.5) | Transparency |
Creating Variations in HSL
HSL (Hue, Saturation, Lightness) is best for creating color variations:
Lighter versions: Increase L (lightness) Darker versions: Decrease L More vibrant: Increase S (saturation) Muted versions: Decrease S Different hue: Adjust H
Example:
- Base: hsl(207, 62%, 50%) - Blue
- Lighter: hsl(207, 62%, 70%)
- Darker: hsl(207, 62%, 30%)
- Muted: hsl(207, 30%, 50%)
Palette Templates by Industry
Corporate/Finance
- Dominant: Navy or dark blue
- Supporting: Light gray, white
- Accent: A single bright color (teal, gold)
- Vibe: Trustworthy, stable, professional
Healthcare
- Dominant: Soft blue or teal
- Supporting: White, light gray
- Accent: Green for positive, coral for CTAs
- Vibe: Clean, caring, calm
E-commerce
- Dominant: Neutral (white/light gray)
- Supporting: Brand color
- Accent: High-contrast CTA color
- Vibe: Clean, products are the focus
Creative/Agency
- Dominant: Bold brand color or black
- Supporting: Complementary or analogous colors
- Accent: High contrast for CTAs
- Vibe: Distinctive, memorable, confident
Sustainability/Eco
- Dominant: Green or earth tone
- Supporting: Cream, tan, soft grays
- Accent: Complementary (coral, terracotta)
- Vibe: Natural, authentic, grounded
Testing Your Palette
Context Testing
- Apply colors to actual UI elements
- View on different backgrounds
- Test on mobile devices
- Check in different lighting conditions
Accessibility Testing
- Run every text/background combo through Color Contrast
- Test with color blindness simulators
- Ensure color isn't the only way to convey information
User Testing
- Get feedback from people outside the project
- Ask what feeling the colors convey
- Note any readability complaints
- Watch for squinting or leaning in
Conclusion
A good color palette isn't about finding beautiful colors. It's about finding colors that work together, communicate the right message, and remain readable by everyone.
Start with one color. Apply color harmony rules to find companions. Use the 60-30-10 ratio. Test for accessibility. Then stop tweaking.
Our Color Converter helps you work with colors in any format, and our Color Contrast tool ensures your combinations remain accessible. The principles in this guide—combined with these tools—give you everything you need to create palettes that work.
Keep Reading
- Color Theory for Designers Guide - Deeper dive into color theory
- Web Accessibility Color Contrast Guide - WCAG compliance details
- Personal Branding Online Guide - Using color for brand identity
Related Tools
- Color Converter - Convert between color formats
- Color Contrast - Check accessibility ratios