Glossary Design & Media

Colour palette

A colour palette is a small set of colours chosen to work together in a design.

Last reviewed:

AdSense Placeholder
Slot: header_reference_page

In more detail

Classic schemes use positions on the colour wheel: complementary (180° apart), analogous (neighbours within about 30°), triadic (three hues 120° apart) and monochromatic (one hue at several lightness levels). Working in HSL makes this easy, because only the hue angle changes. Practical palettes also include neutrals for text and backgrounds, and a common guideline splits use roughly 60% dominant, 30% secondary and 10% accent.

Why it matters

A palette keeps a site, brand or chart consistent and saves choosing colours one by one. It must also work in practice: text and background pairs need enough Colour contrast, and categories in a chart should stay distinguishable for people with Colour blindness. A palette that looks good as swatches can fail both tests.

Example

Starting from #3366cc, which is hsl(220, 60%, 50%):

  • complementary (hue 40): #cc9933
  • triadic (hues 340 and 100): #cc3366 and #66cc33
  • analogous (hues 190 and 250): #33b2cc and #4c33cc

As text on white, #3366cc reaches 5.37:1 and passes AA.

AdSense Placeholder
Slot: footer_leaderboard