Color Theory
Interactive tools and reference for applying color theory in web design.
60-30-10 Color Rule Visualizer
The classic proportion rule: 60% dominant (backgrounds/surfaces), 30% secondary (nav, cards, sections), 10% accent (CTAs, links, highlights). Click the color blocks to pick new colors.
60% Dominant
Backgrounds & large surfaces
#F5ECD7
30% Secondary
Cards, nav, section fills
#7A8C5C
10% Accent
CTAs, links, highlights
#C06C45
Latte
Single origin
$5.00Espresso
Single origin
$5.00Matcha
Single origin
$5.00Color Psychology
How each color family communicates with viewers and how to apply it in web design.
Red
CTAs, sale/promo alerts, food imagery
Orange
Casual food brands, sports, youth brands
Yellow
Highlights, warnings, café/bakery brands
Green
Organic brands, finance, sustainability
Blue
SaaS, banking, healthcare, formal services
Purple
Premium beauty, arts, wellness, wine
Pink
Beauty, desserts, fashion, children's
Brown
Coffee, chocolate, rustic food brands
Black
Premium brands, fashion, fine dining
White
Healthcare, minimalist brands, tech
WCAG Contrast Checker
Check if your text/background color combinations meet accessibility standards. AA = minimum legal standard in most countries.
Text / Foreground
#1A1A1E
Background
#E8E0D2
Heading Text
Body copy — this is how your text will look on this background. The quick brown fox jumps over the lazy dog.
Button LabelContrast Ratio
13.24:1
Excellent — AAA compliant
WCAG AA (4.5:1 normal / 3:1 large)
WCAG AAA (7:1 normal / 4.5:1 large)
HSL vs HEX vs RGB
HEX (#FF5733)
Most common format for design handoffs and CSS. Concise and universally supported — but not human-readable. Use HEX in final production code and design files.
RGB (192, 108, 69)
Separates a color into Red, Green, Blue (0–255 each). Useful for opacity control with rgba(). Slightly more readable than HEX but still not intuitive.
HSL (22, 45%, 51%)
Most human-readable format. Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Best for building design systems — you can adjust lightness systematically to create tints and shades.
Use HSL for CSS variables and design systems. Use HEX for design tools and handoffs.
Dark Mode Palette Adaptation
Backgrounds
Replace light neutrals with very dark values of your primary hue (lightness 6–12%). Never use pure black — a dark-tinted background feels more immersive than #000000.
Text
Replace dark text with a warm off-white (lightness 85–92%). Pure white text on dark backgrounds is too harsh and causes eye fatigue.
Primary & Secondary
Shift the primary color's lightness up by 10–15% to compensate for reduced perceived saturation on dark backgrounds.
Accents
Increase lightness significantly — dark-mode accents must be brighter to have impact.
Flipping a light palette to dark mode is not simply 'inverting colors.' A naive inversion creates harsh, unrealistic results.
5-Step Palette Building Process
Step 1 — Define the emotion
What should the visitor feel within 3 seconds? Write one sentence: 'This café should feel warm, honest, and handcrafted.' That sentence is your filter for every decision.
Step 2 — Choose your primary hue
Pick one color that captures the core emotion. Keep it at medium saturation (40–60%) and medium lightness (40–55%) for versatility.
Step 3 — Derive your background
Take your primary hue, reduce saturation to 10–20%, and raise lightness to 90–97%. This creates a tinted neutral background.
Step 4 — Choose your secondary color
Use an analogous color (30° away on the color wheel) or a neutral in the same temperature family.
Step 5 — Set text and accent
Text: dark version of your primary (lightness 10–20%). Accent: complementary or saturated version of primary. Test WCAG AA: 4.5:1 minimum.
Always document each color with its role and HSL/HEX values — a palette without documentation is a liability.