Loading...
Loading...
Color Theory
Every color has physics, psychology, and history behind it. Scroll through each one — full screen, one hue at a time.
How colors work together
These six relationships cover the vast majority of palette decisions you'll ever make.
180°Colors directly opposite on the wheel. They cancel in mixing but amplify each other visually — each makes the other look more intense.
±30°Three adjacent hues, 30° apart. They share wavelengths so they feel naturally related — great for gradients, but light on built-in contrast.
120°Three hues 120° apart, all pulling equal weight. Pick one dominant, one secondary, one accent — or everything fights. The most vibrant scheme.
150°/210°The complement's two neighbours rather than the complement itself. The same contrast range, but far easier to balance — a softer landing.
0° shiftOne hue across its full tonal range. Always cohesive, never clashing — the risk is monotony. Solve it with dramatic value steps.
Temp.Warm hues (red, orange, yellow) advance and grab the eye first. Cool hues (blue, green, violet) recede. Use this to control spatial depth.
No color acts faster on the brain than red. It raises heart rate, accelerates breathing, and pulls focus before conscious thought kicks in — which is exactly why stop signs and ambulances use it. In small doses it signals love and passion; in large doses, threat. Athletes wearing red in competitive sports win statistically more often.
Red converts. Studies consistently show red CTAs outperform blue and green for high-urgency actions. The trade-off: overuse it and everything feels like an error state. One red element on a page feels important. Five feel panicked.
Cyan #06B6D4
Red is the first color human infants can distinguish, and appears first in virtually every language's color vocabulary after black and white.
Orange sits between the urgency of red and the cheer of yellow — it takes the best of both without their edge. It's the most social color: it stimulates conversation, signals approachability, and reads as energetic without being aggressive. It's also the color most associated with value and affordability.
Orange works where red feels too serious or alarming — the preferred CTA for brands that want action without anxiety. Food brands love it because it stimulates appetite while suggesting freshness. One underused quality: orange is extraordinarily legible against dark backgrounds at large sizes.
Blue #3B82F6
Orange is the only color in English named after a fruit. Before oranges reached Europe, the color was called "geoluread" — yellow-red.
Yellow is the most visible color to the human eye in daylight — the brain processes it before any other hue. That same visibility becomes a liability indoors: yellow rooms register as stimulating to the point of anxiety. In moderate use, yellow sharpens attention and boosts analytical thinking.
Yellow signals 'pay attention here' better than almost any other color at the same size — ideal for badges, highlights, and emphasis. But it's terrible for body text on white (contrast drops below WCAG minimums). Against dark backgrounds it becomes one of the most legible colors available.
Violet #7C3AED
Yellow is the most commonly cited 'least favourite color' in surveys — yet it's the color most associated with optimism and creativity in testing.
Humans distinguish more shades of green than any other color — a legacy from scanning vegetation for food and safety. Green at 120° sits at the centre of the visible spectrum, making it the easiest wavelength for the eye to process. Green environments lower heart rate and reduce stress.
Green is the universal 'go' signal — confirmation dialogs, success states, 'in stock' badges. Healthcare and finance brands use it because it implies both health and growth. The challenge: yellow-green reads sickly; forest green reads premium. Hue matters more for green than any other color.
Magenta #DB2777
Night-vision goggles display green because human eyes are most sensitive to that wavelength — we resolve more detail in green than any other color.
Blue is the world's most universally popular color across cultures and genders. It lowers heart rate, slows metabolism, and suppresses appetite. Its dominance in banking, tech, and healthcare isn't arbitrary: trust is its core signal, and building trust is the central challenge in all three.
Blue is the safest primary brand color — it rarely alienates and scales from serious to friendly via saturation and value. Saturated mid-blues feel modern and digital; navy feels authoritative; sky blue feels open. The one trap: blue disappears on dark backgrounds unless it's very bright.
Orange #F97316
Ancient languages had no word for blue. Homer described the sea as 'wine-dark.' Blue appears almost nowhere in nature except the sky and deep water.
Violet sits at the extreme edge of human color perception, just before the spectrum crosses into ultraviolet. For most of history, purple dye required 12,000 shellfish per gram — worth more than gold. That scarcity is still embedded in our perception: purple reads as rare, elevated, and unusual.
Purple covers a wide creative range. Bright violet signals innovation — tech tools, AI products, game platforms. Deep purple signals luxury and heritage. Lavender is calming and increasingly used in wellness. The consistent quality: purple signals that something isn't mainstream.
Yellow #EAB308
Until 1856, purple was so costly that laws banned anyone below a certain rank from wearing it. An 18-year-old accidentally invented synthetic purple and became a millionaire.
Pink is physiologically calming — one specific shade has been shown to reduce aggression in correctional facilities. But pink's cultural meaning is almost entirely constructed: in the 1920s, pink was recommended for boys and blue for girls. The reversal solidified only in the 1980s.
Hot pink holds its own against any color — it commands attention without the aggression of red. Soft pink is calming and increasingly used in non-gendered wellness and skincare. The sweet spot: mid-saturation pink — distinctive, warm, and approachable.
Green #22C55E
Pink doesn't exist in the rainbow. It's what the brain constructs when you remove green from white light — there is no single pink wavelength.
Brown is the color of shelter — wood, earth, stone, hide. Every home before industrialisation was built of it. That familiarity makes brown feel fundamentally safe and genuine. It's rarely anyone's declared favourite, yet it's universally recognised as trustworthy.
Brown is underused in digital design, which makes it distinctive. Rich chocolate browns signal premium quality; lighter tans feel organic and unpretentious — craft brands, farmers markets, sustainable goods. The challenge: brown can feel dated or dirty if mishandled.
Sky Blue #7DD3FC
Brown doesn't exist on the visible spectrum — it's what the brain reads as dark, low-saturation orange. Change its brightness context and it becomes 'orange.'
Black is the absence of reflected light — it conveys absolute authority and finality. It makes adjacent colors appear more saturated, which is why luxury brands use so much of it. 'Black-tie,' 'black card,' 'black label' — the link to exclusivity is consistent across cultures.
Black is one of the most useful tools precisely because it's neutral — it never competes. Against black, every other color becomes more vivid, and typography is high-impact. The danger is heaviness: too much black and designs feel oppressive rather than sophisticated.
White #FFFFFF
The world's blackest material, Vantablack, absorbs 99.965% of light. After an artist bought exclusive rights, others retaliated with 'the world's pinkest paint.'
White reflects all wavelengths at once. It creates psychological space: white rooms feel larger. In design, white (negative space) is an active element, not empty filler — the absence of color gives the eye nowhere to land, and that pause registers as breath, clarity, or calm.
White is the foundation of minimalist design because it amplifies everything against it — a single bold red on white hits harder than on a busy background. The practical trap: pure white (#FFFFFF) on screens is harsh; most systems use near-whites (94–97% lightness).
Black #111827
White light contains all colors at once. Newton proved it in 1666 by splitting sunlight through a prism into the full spectrum.
Gray is the mediator — it holds no emotional position of its own, which makes it uniquely versatile. Warm gray reads sophisticated and inviting; cool gray reads technological and precise. The same hex can feel completely different depending solely on what's beside it.
Gray is the workhorse of UI — surfaces, borders, disabled states, secondary text. The irony is that the best designs make it invisible: you don't notice it, but remove it and everything falls apart. The common mistake is one gray everywhere; pro systems define 8–12 steps.
Warm Amber #D97706
Gray is the only color with two correct English spellings — "gray" (US) and "grey" (UK) — for exactly the same color.