How a working palette is built
A color palette isn't picked by taste — it's built on the color wheel. Each scheme is a geometric rule that guarantees visual harmony and reduces the risk of choosing combinations that create noise or visual fatigue.
- Analogous: 3 colors next to each other on the wheel (e.g. blue, blue-green, green). Calm and cohesive. Great for backgrounds, illustrations and brands aiming for serenity.
- Complementary: two opposite colors (e.g. blue and orange). Maximum contrast — perfect for CTAs that have to stand out.
- Triadic: 3 colors 120° apart. Vibrant yet balanced, common in modern branding and kid-friendly design.
- Tetradic: 4 colors in two complementary pairs. Hard to balance; pick one dominant and three accents.
- Monochromatic: same hue with different saturation and lightness. Sober, elegant, almost foolproof.
The 60-30-10 rule
Inherited from interior design and adopted by modern UI: 60% dominant color (backgrounds and large areas), 30% secondary (cards, sidebars, navigation), 10% accent (primary buttons, links, indicators). If your accent occupies more than 15% of the screen it stops being an accent and becomes noise.
HEX vs RGB vs HSL: which to use
All three represent the same color but solve different problems.
HEX (#059669) is the most compact and the standard
for handing off colors between design and engineering. RGB
(rgb(5, 150, 105)) supports alpha and works where HEX doesn't.
HSL (hsl(160, 94%, 30%)) is the most useful for
generating variations: tweaking lightness keeps the hue, which lets you
build scales like Tailwind's or Material's from a single seed color.
Accessibility: contrast is not optional
Before locking a palette, check the contrast between text and background. WCAG 2.1 requires at least 4.5:1 for normal text and 3:1 for large text (level AA). For AAA, 7:1 and 4.5:1. A beautiful palette that fails contrast is unusable: it excludes low-vision users and anyone using your site in direct sunlight.
How to apply a palette to a real interface
- Define the primary. The color that most represents your brand. Don't start with the secondary.
- Build a neutral scale of 8–10 grays. Not pure black mixed with white: they should have a subtle tint toward your primary.
- Add state colors: success (green), warning (amber), danger (red), info (blue). Conventions exist for a reason — follow them.
- Test the palette with text and borders, not only with flat color blocks. What looks gorgeous in swatches can clash in a paragraph.
- Document names and usage. An undocumented palette ends with every team picking "the green that looks right."
Palettes that don't fail
When in doubt, look at references: Stripe, Linear, Vercel and Notion build palettes around one primary, a cool gray scale, and very few accents. Restraint ages better than trends. Before locking five vibrant colors, ask yourself how many you'll actually use in production.