Color and mood: what the research actually supports
Blue does not mean trust. The studies most often cited for color psychology say considerably less than the infographics claim.
Tag
fundamentals
5 articles on fundamentals.
The parts worth understanding first
Most color mistakes on the web are not taste failures. They are a small number of technical misunderstandings, repeated: that HSL lightness means lightness, that mixing two hex codes gives you the color between them, that a contrast ratio describes how something looks, that saturated means vivid.
The through-line is that sRGB's numbers are encoded for displays, not for arithmetic. They are gamma-compressed, which is efficient for storage and wrong for averaging — the muddy midpoint in a naive gradient is that error made visible. Undo the curve first and the same operations start behaving the way your eye expects.
Learn to think in three channels that mean something: perceptual lightness, chroma, and hue. Once those are separate and honest, a large class of problems collapses into adjusting one of them and leaving the other two alone — which is most of what "having a good eye for color" turns out to be in interface work.
All 5 articles
The 60-30-10 rule is not a law of nature
It is a useful heuristic from interior design that gets repeated as though it were a specification. Here is what it is actually good for.
Nobody's background is actually #ffffff
Pure white is a default, not a decision. Look at the products you admire and almost none of them use it. Here is what they use instead and why.
Why HSL lies to you, and what to use instead
HSL claims that every hue at 50% lightness is equally light. Look at pure yellow next to pure blue and you can see that it is not true. Here is what that costs you.
Your background is the most important color on the page
One color covers more of your interface than every other color combined, and every decision downstream has to answer to it. Most teams pick it last.
Tools for fundamentals
- Background Color PickerThe main event — pick a background and watch a whole interface build itself around it.
- Universal Color ConverterEvery notation the web understands, at once.
- OKLCH ExplorerThe color space CSS finally gave us. Learn it here.
- Color MixerMix two colors in five different color spaces and see why it matters.
- Interactive Color WheelThe wheel, but plotted in OKLCH where the maths is honest.