Color Schemes
Master color theory, explore harmonious palettes, and check accessibility
Accessibility & Contrast
Sample Text
The quick brown fox jumps
14.63:1
Contrast Ratio
Drag the wheel or click markers to select colors. Find complementary and analogous colors.
Pro Tips
Start with your brand's primary color, then build outward using color theory
Use high contrast for text - minimum 4.5:1 ratio for accessibility
Limit your palette to 3-5 colors max for cohesive designs
Test colors in both light and dark modes before committing
Use color to create hierarchy - brighter colors draw more attention
Consider color blindness - don't rely on color alone for information
Color Theory Rules
The classic interior design rule: 60% dominant, 30% secondary, 10% accent
Colors adjacent on the color wheel for harmonious, cohesive designs
Opposite colors on the wheel for high contrast and visual impact
Three evenly spaced colors for vibrant, balanced palettes
A color plus two adjacent to its complement for softer contrast
Single hue with varying saturation and lightness
Ready-to-Use Palettes
Gradient Theory & Usage
Gradients are smooth transitions between two or more colors. They add depth, dimension, and visual interest to flat designs.
Common Types:
- • Linear - Color flows in a straight line (top to bottom, left to right)
- • Radial - Color radiates from a center point outward
- • Conic - Color rotates around a center (like a pie chart)
Violet Dream
Hero sections, CTAs
from-violet-500 via-purple-500 to-pink-500Ocean Breeze
Trust, professionalism
from-blue-500 via-cyan-500 to-teal-500Sunset Fire
Energy, passion
from-orange-500 via-red-500 to-pink-600Forest Mist
Nature, growth
from-emerald-500 via-teal-500 to-cyan-500Royal Purple
Luxury, premium
from-indigo-600 via-purple-600 to-pink-600Neon Night
Tech, gaming
from-fuchsia-500 via-violet-500 to-cyan-500Warm Sunset
Warmth, comfort
from-amber-400 via-orange-500 to-red-500Arctic Cool
Modern, clean
from-slate-500 via-blue-400 to-cyan-300Candy Pop
Playful, fun
from-pink-400 via-fuchsia-400 to-purple-400Color Psychology in UX/UI
Blue
Trust, security, professionalism
Use for: Banks, healthcare, corporate
Green
Growth, success, eco-friendly
Use for: Finance, sustainability, health
Red
Urgency, passion, alerts
Use for: Sales, errors, food delivery
Yellow
Optimism, clarity, warnings
Use for: Caution messages, highlights
Purple
Luxury, creativity, wisdom
Use for: Premium products, creative tools
Orange
Energy, fun, affordability
Use for: E-commerce, entertainment
Pink
Romance, playfulness, youth
Use for: Fashion, beauty, social apps
Black/Gray
Sophistication, minimalism
Use for: Luxury brands, tech products
Branding & Theme Strategy
Primary Color: Your brand's main identity (logo, CTAs)
Secondary Color: Supporting elements, accents
Accent Color: Highlights, important actions
Accessibility & WCAG Standards
WCAG AA (Minimum)
4.5:1 for normal text • 3:1 for large text (18px+)
WCAG AAA (Enhanced)
7:1 for normal text • 4.5:1 for large text
Why it matters: 1 in 12 men and 1 in 200 women have color vision deficiency. Good contrast ensures everyone can use your app.
Users with color blindness need more than just color to understand your UI. Always combine color with shapes, icons, or labels.
Tailwind CSS Named Colors
Copy class names like bg-violet-500 or text-cyan-300
slate
violet
purple
blue
cyan
teal
green
amber
orange
red
pink
rose
Golden Rules for Beginners
Start with 2-3 colors max, expand later
Too many colors = visual chaos. Master simplicity first.
Use shades of the same color for depth
E.g., slate-700 for bg, slate-600 for cards, slate-500 for borders.
Reserve bright colors for important actions
If everything is bright, nothing stands out. Use sparingly.
Test on real devices, not just your monitor
Colors look different on phones, tablets, and laptops.
Check color meaning in target cultures
White = purity in West, mourning in East. Research your audience.
Use neutral grays for 70% of your UI
Grays let colorful elements shine without overwhelming users.
Add subtle transparency for layering
bg-slate-900/80 creates depth without hard edges.
Avoid pure black (#000) - use dark grays
Pure black is harsh. Use #0f172a (slate-900) instead.
Gradients should have similar lightness
from-blue-500 to-red-500 works. from-blue-200 to-red-900 fights.
