Warm grays, cool grays, and why pure gray looks dead
A gray with no hue in it is the one color that never appears in the physical world. Add a trace of chroma and the whole interface changes.
Tag
palettes
8 articles on palettes.
Building a palette that survives contact with a UI
Palette generators built on the color wheel — complementary, triadic, tetradic — produce mathematically related hues, and mathematical relation is not the same as usable set. A perfect complementary pair is two colors at maximum tension, which is right for a single accent against a neutral and wrong for six chips in a chart.
An interface palette needs things a harmony rule does not supply: a neutral ramp doing most of the work, one accent carrying nearly all the emphasis, semantic colors for success and error that survive color vision deficiency, and enough lightness separation between adjacent members that they are distinguishable in grayscale. Start from the harmony, then solve for those constraints.
The most reliable test is subtraction. Convert the palette to grayscale: if two members collapse into the same value, they were only ever distinguished by hue, and for a meaningful fraction of your readers they were never distinguished at all.
All 8 articles
Brand color is not product color
The color from the logo was chosen for a context where nothing sits on top of it. Then somebody made it a button.
Designing a data visualization palette
Chart colors have a harder job than interface colors. They have to be distinguishable at small sizes, in any order, for everyone.
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.
Choosing an accent color that survives your background
An accent has one job: to be the most noticeable thing on the screen at the moment it appears. What that requires depends entirely on what is behind it.
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.
Semantic tokens and the rebrand that broke everything
A story about --blue-500, told as a cautionary tale, with the two-layer token structure that prevents it.
Building a color ramp that survives contact with real UI
One brand color is not a palette. Here is how the 50–950 scale works, why the ends always look washed out, and which step you should actually be using for text.
Tools for palettes
- Palette GeneratorNine harmony rules, computed in a perceptual color space.
- Complementary ColorsThe 180° pair, done properly.
- Analogous ColorsNeighbors on the wheel. The quietest palette that still has a hue.
- Palette AnalyzerPaste a palette. Find out what is wrong with it.
- Palette from ImageDrop an image, get the colors — and the background it wants.