---
name: Colours
menu: Patterns
parent: Styles
route: /styles/colours
---

# Colours

## Main palette

### Brand colours

- Pink is used for highlights
- Blue is used for text, in alternating backgrounds, and for pathway buttons
- Green is used in action buttons and links

```specimen-colors
- name: pink
  hex: E4228E
  cmyk: "C 7 M 90 Y 0 K 0"
- name: blue
  hex: "003366"
  cmyk: "C 100 M 83 Y 35 K 20"
- name: green
  hex: 00AB55
  cmyk: "C 78 M 0 Y 83 K 0"
```

```specimen-research-insight
Members are shown a progress tracker to guide them through their switch to us. When testing this tracker, we found that pink drew users’ attention to specific actions without feeling threatening.
```

### UI Colours

- Green is positive
- Red is negative or destructive
- Orange is used in warnings and to draw attention

```specimen-colors
- name: green
  hex: 00AB55
- name: red
  hex: EE0000
- name: orange
  hex: FF6200
```

### Grayscale

- Light grey is used for backgrounds
- Grey is used for borders
- Dark grey is used for hint text (e.g. text fiend label) and for disabled buttons

```specimen-colors
- name: white
  hex: FFFFFF
  withDarkText: true
- name: light grey
  cmyk: "C 5 M 5 Y 5 K0"
  hex: F2F2F2
  withDarkText: true
- name: grey
  hex: CCCCCC
  cmyk: "C 7 M 90 Y 0 K 0"
  withDarkText: true
- name: dark grey
  hex: 8C8C8C
  cmyk: "C 46 M 36 Y 36 K 15"
```

## Extended Palette

- Tintier pink is used in focus states
- Other tints are used in charts, graphs and illustrations

```specimen-colors
- name: shady
  hex: 00943C
  cmyk: "C 85 M 10 Y 100 K 0"
- name: tintish
  hex: 33BD77
  cmyk: "C 70 M 0 Y 67 K 0"
  withDarkText: true
- name: tinted
  hex: 66CE99
  cmyk: "C 60 M 0 Y 50 K 0"
  withDarkText: true
- name: tintier
  hex: 99DEBB
  cmyk: "C 45 M 0 Y 35 K 0"
  withDarkText: true
- name: tintiest
  hex: CCEFDD
  cmyk: "C 25 M 0 Y 20 K 0"
  withDarkText: true
```

<br />

```specimen-colors
- name: shady
  hex: 001A4D
  cmyk: "C 100 M 90 Y 40 K 40"
- name: tintish
  hex: 335C85
  cmyk: "C 85 M 60 Y 25 K 10"
- name: tinted
  hex: 6685A3
  cmyk: "C 65 M 40 Y 20 K 5"
- name: tintier
  hex: 99ADC2
  cmyk: "C 45 M 25 Y 15 K 0"
  withDarkText: true
- name: tintiest
  hex: CCD6E0
  cmyk: "C 25 M 10 Y 10 K 0"
  withDarkText: true
```

<br />

```specimen-colors
- name: tintish
  hex: E94EA5
  cmyk: "C 10 M 80 Y 0 K 0"
- name: tinted
  hex: E94EA5
  cmyk: "C 7 M 63 Y 0 K 0"
  withDarkText: true
- name: tintier
  hex: F4A7D2
  cmyk: "C 3 M 45 Y 0 K 0"
  withDarkText: true
- name: tintiest
  hex: FAD3E8
  cmyk: "C 0 M 25 Y 0 K 0"
  withDarkText: true
```

<br />

```specimen-colors
- name: shady
  hex: D00000
- name: red
  hex: EE0000
```
