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.
Blog
Color, written down
Essays on color theory as it actually applies to interfaces: contrast models, perceptual color spaces, dark mode, palettes that survive contact with real content.
Relative color syntax, and the end of generated variants
You can now derive a hover state from a token in CSS itself. No build step, no generated values, no drift between the two.
Read the article →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.
The color wheel you learned is the wrong one
Red, yellow and blue are not primaries. The wheel from school is a pigment model from 1704, and it is why your complementary schemes never quite work.
Wide gamut: what Display P3 changes for web design
Most screens sold in the last five years can show colors sRGB cannot express. Here is how to use them without breaking everything else.
Text over images, and the scrim that makes it work
A hero image that averages to mid-gray can still contain a blown-out sky. Solve for the worst pixel, not the average one.
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.
Why your dark background looks blotchy
Those faint rings in your gradient are not a rendering bug. They are 8-bit quantisation, and the fix is about three percent of noise.
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.
APCA and the end of the contrast ratio
WCAG 3 replaces the 4.5:1 ratio with a model that knows dark mode exists. Here is what changes and what to do about it now.
Elevation without shadows
Shadow is the absence of light. On a dark background there is barely any light to remove, so depth has to come from somewhere else.
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.
Color blindness is a design constraint, not an edge case
Around one in twelve men cannot distinguish some of the color pairs in your interface. That is not an accessibility footnote, it is a larger group than Safari users.
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.
The muddy middle: why your gradients go gray
Blue to yellow should pass through green. In CSS it passes through gray. The cause is one line in the spec and the fix is one keyword.
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.
Dark mode is not an inversion
filter: invert(1) takes about four seconds and produces a theme where your brand blue has turned orange. Here is what a real dark theme requires.
What the 4.5:1 rule actually measures
Everyone knows the number. Far fewer know what it is computing, where it is wrong, and why passing it does not mean your text is readable.
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.