Colour Palette
Definition
The set of colours chosen to represent a brand or website, typically including primary, secondary, and accent colours.
What is a Colour Palette?
A colour palette is the defined set of colours used across your website and brand materials. Rather than picking colours randomly, a palette provides a consistent set that work well together and reinforce your brand identity.
A typical website palette includes 3-7 colours with specific roles and usage rules.
Anatomy of a Website Colour Palette
Primary Colour
Your main brand colour. Used for logos, key buttons, and major elements. This is what people associate with your brand.
Secondary Colour(s)
Supporting colours that complement the primary. Used for less prominent elements and to add variety without overwhelming.
Accent Colour
A contrasting colour for calls to action, highlights, and drawing attention. Often a brighter or bolder shade.
Neutral Colours
Blacks, whites, and greys for text, backgrounds, and borders. These make up most of your site but don't draw attention.
Semantic Colours
Colours with specific meanings: green for success, red for errors, yellow for warnings.
Building a Palette
| Step | Action |
|---|---|
| 1 | Choose a primary colour based on brand and psychology |
| 2 | Add neutrals (black, white, grey variations) |
| 3 | Select 1-2 secondary colours that complement |
| 4 | Choose an accent for calls to action |
| 5 | Test for accessibility (contrast ratios) |
Common Mistakes
- Too many colours, creating visual chaos
- Colours that look too similar, offering no contrast
- Forgetting accessibility (text that's hard to read)
- No clear hierarchy between colour usage