Color Basics
Hue, value, saturation—and why neutral colors cover nine-tenths of any interface.
Nine-tenths of an interface is neutral; color only goes where it needs to be seen. The more sparingly you use color, the more effective it is.
What you'll run into:
- The page is colorful, but you can't say where the focus is
- You need to add a new state and realize you've run out of colors
- The AI-generated interface is all blue-purple gradients that have nothing to do with your brand
Three properties
| Property | What it is | How to use it in an interface |
|---|---|---|
| Hue | Red, yellow, blue—the color itself | Distinguishes categories. Fewer hues per page reads cleaner |
| Value | Light or dark | The main tool for hierarchy. Steps of one hue are safer than switching hues |
| Saturation | Vivid or gray | Large areas use low saturation; small accents can be vivid. Reverse it and it stings the eye |
Value is what interfaces lean on most: pull five to nine steps from one brand color, assign a step to buttons, hover, backgrounds, and borders, and the page falls into place on its own.
Four roles
- Brand color. One is enough. Use it on primary buttons, selected states, links, and brand marks. Wherever it appears is where you want the user to click.
- Neutral colors. Pull a gray scale from near-black to near-white for text, borders, backgrounds, and dividers. These cover nine-tenths of the interface.
- Semantic colors. Success green, warning yellow, error red. These three are industry convention—don't change them for the sake of being different.
- Accent colors. Only needed for charts and tag categories. Everyday interfaces can skip them entirely.
Keep all four roles to no more than five hues combined. Beyond that, users stop reading meaning out of color—past a certain density, color degrades into decoration.
Once you pick a brand color, write down the exact hex and build its value scale. Remembering "blue" means the next page you build gets a different blue—this is the most common starting point for a whole site's colors slowly drifting apart.
Choosing a brand color
| Approach | How |
|---|---|
| Match the brand | If there's a logo, take its primary color. The easiest and safest option |
| Match the content | Finance leans on a steady blue, food on warm orange-red, sustainability on green |
| Take from a reference | Find a product you respect, take its primary hex, then nudge it your own direction |
| Generate with a tool | Once the primary is set, use a tool to generate complementary and analogous colors; pick one as the secondary |
Common pitfalls
- Don't rely on color alone. Red-green color blindness isn't rare. States need text or icons alongside color. color-blindness-wiki
- Contrast must be enough. Light gray on white looks elegant but many people can't read it. Body text needs at least 4.5:1—the WCAG minimum for normal text. wcag-contrast
- Use large gradients sparingly. They make pages look templated, especially the blue-purple set. If you must, lower the saturation and use it as a background, not the hero.
- Dark mode isn't inverted colors. Pure black with pure white strains the eyes. Use near-black grays against near-white grays, and lower saturation along the way.