Most great websites use far fewer colors than you'd think. Here's a system that keeps things clean and easy to build.
1. Pick one brand color
This is the color for buttons, links and key highlights. Choose something with enough saturation to stand out, and check that white text on it passes contrast.
2. Choose your neutrals
Neutrals do most of the work: backgrounds, cards, borders and text. Pick a near-black for text (softer than pure black) and an off-white or very light grey for backgrounds. Slightly tinting your greys toward your brand color makes everything feel connected.
3. Build a scale
Turn your brand color into a 50–950 scale: 50–100 for light backgrounds, 500–600 for buttons, 700–900 for hover states and dark text. Our Shades & Tints tool makes this scale in one click and exports it for CSS or Tailwind.
4. Add state colors
Use green for success, amber for warnings, red for errors and blue for information. Keep them slightly muted so they don't compete with your brand color.
5. Apply the 60-30-10 rule
About 60% neutral background, 30% secondary surfaces and text, 10% brand color. If everything is colorful, nothing stands out.
Quick checklist
- Body text passes 4.5:1 contrast.
- Buttons look clickable and have a visible hover state.
- Links are distinguishable from normal text.
- It still looks good in dark mode, if you offer one.