Why color works the way it does
From harmony mathematics to emotional psychology — a practical guide to building palettes that feel intentional, accessible, and right.
Harmony Rules
Color harmony is the mathematical relationship between hues on the color wheel. ihatecolors uses all five classical rules, selecting the best fit based on mood and scoring each result.
#4A90D9#D9844A Complementary
180°Two colors directly opposite on the color wheel. Maximum contrast and visual tension. Great for CTAs and emphasis — use sparingly, never at equal weight.
Best for: Sports brands, energy drinks, urgent UI states
#4A90D9#4AD9C4#4A6BD9 Analogous
30°–60°Three to five colors adjacent on the wheel. Natural, harmonious, and found abundantly in nature. Low contrast — pair with a neutral for readability.
Best for: Wellness, nature brands, editorial design
#D94A4A#4AD94A#4A4AD9 Triadic
120° eachThree colors equally spaced around the wheel. Vibrant and balanced. Harder to execute — keep one dominant, use others as accents.
Best for: Children's brands, games, bold consumer products
#4A90D9#D9A44A#D9574A Split-Complementary
150° / 210°A base color plus the two colors flanking its complement. More nuanced than straight complementary — tension without harshness.
Best for: Premium consumer brands, editorial, fashion
#4A90D9#D94A4A#4AD990#D9D94A Tetradic
90° eachFour colors forming a rectangle on the wheel. Rich and complex — the hardest to balance. One color must dominate; others support.
Best for: Illustration, packaging, complex multi-product brands
Mood Psychology
Color psychology isn't pseudoscience — it's the accumulated result of consistent cultural exposure. Here's how each ihatecolors mood maps to emotional effect.
Warm
0°–60° Effect: Energy, appetite, urgency, approachability
Examples: McDonald's, Coca-Cola, Airbnb
Cool
180°–260° Effect: Trust, calm, professionalism, space
Examples: Facebook, Twitter, LinkedIn
Moody
Any (low sat) Effect: Sophistication, seriousness, editorial weight
Examples: New York Times, luxury fashion
Night
200°–280° dark Effect: Drama, focus, luxury, technological edge
Examples: Apple, Notion dark mode, Vercel
Earthy
20°–140° muted Effect: Authenticity, craft, sustainability, grounding
Examples: Patagonia, Warby Parker, Everlane
Pastel
Any (high light) Effect: Softness, playfulness, approachability, youth
Examples: Glossier, teenage brands, wellness apps
Neon
Any (max sat) Effect: Excitement, urgency, digital-native, rebellion
Examples: Discord, gaming brands, streetwear
Vintage
Warm/teal muted Effect: Nostalgia, craftsmanship, authenticity, story
Examples: Filson, Herschel, heritage brands
The HSL Color Model
ihatecolors generates all colors in HSL (Hue, Saturation, Lightness) — not RGB or hex. HSL maps directly to how humans perceive color, making harmony math intuitive.
Hue
0°–360° The color itself. Red at 0°, green at 120°, blue at 240°. This is what "color" means in plain language.
Saturation
0%–100% The intensity of the color. 0% is grayscale; 100% is the most vivid version of that hue.
Lightness
0%–100% How light or dark. 0% is black, 100% is white, 50% is the pure hue.
Why not RGB? RGB describes how a screen mixes light — it doesn't map to human perception. Generating analogous colors in RGB requires complex transforms. In HSL, an analogous palette is simply hue ± 30°. ihatecolors does all generation in HSL and converts to hex only for output.
WCAG & Contrast Ratios
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for readable text. ihatecolors grades every palette automatically.
7:1+ Required for very small text or decorative use on critical interfaces.
4.5:1+ Required for normal text. This is the baseline compliance target for most projects.
Below 4.5:1 Not suitable for body text. May be acceptable for large text (3:1) or decorative elements.
How contrast ratio is calculated
WCAG uses relative luminance — a perceptually weighted measure of brightness. Each color channel (R, G, B) is gamma-corrected and then combined with weights that reflect human eye sensitivity (green is perceived as ~3.5× brighter than blue).
contrast = (L1 + 0.05) / (L2 + 0.05) // where L1 is the lighter luminance and L2 the darker // luminance uses sRGB channel weights: 0.2126R + 0.7152G + 0.0722B
Practical Palette Tips
Rules from working designers, not textbooks.
Use the 60-30-10 rule
60% dominant (background), 30% secondary (surfaces, cards), 10% accent (CTAs, highlights). Most palette failures are equal-weight color distributions.
Never design with pure black or white
#000000 and #FFFFFF are harsh. Use near-black with a slight cool or warm hue (e.g. #2B2D42) and near-white with a touch of your brand color (e.g. #F8F8FF).
Lock your background first
The background color determines everything else. Get it right, then build accents around it — not the other way around.
Test in grayscale
If your design works in grayscale — if the hierarchy is clear without any hue — your palette is doing its job through contrast, not just color.
Saturation drops as lightness diverges from 50%
Very light and very dark colors can handle less saturation before they look garish. Keep your lightest and darkest colors at lower saturation than your midtones.
One emotion per palette
Multi-mood palettes feel scattered. Pick the dominant emotional register — energetic, calm, trustworthy, playful — and let every color serve that single intent.