Colour palette

All the colours of the rainbow. And a few others besides.

How we use colours

  • Yellow is reserved for primary actions (buttons) only
  • Colour combinations for text, icons and other important elements must meet the AA accessibility level. So your contrast ratio must be at least 4.5:1
  • Decorative imagery does not have to meet the contrast ratio, but you should still get pretty close, so make sure your images are completely distinguishable

How they look

The below text colour/background combinations all pass our accessibility standards.


  • black #000000 rgb(0, 0, 0)
  • white #FFFFFF rgb(255, 255, 255)


  • light-pink #EB5F8E rgb(235, 95, 142)
  • light-green #72B72A rgb(114, 183, 42)
  • yellow #FCC31E rgb(252, 195, 30)
  • light-blue #35ADCE rgb(53, 173, 206)


  • red #d60000 rgb(214, 0, 0)
  • dark-blue #00528A rgb(0, 82, 138)


  • graphite #2F2E31 rgb(47, 46, 49)
  • dove-grey #666666 rgb(102, 102, 102)
  • alto #D0D0D0 rgb(208, 208, 208)
  • gallery #ECECEC rgb(236, 236, 236)
  • wild-sand #F5F5F5 rgb(245, 245, 245)


These colours are strictly only for use in our Minor Alerts component.

  • pastel-blue #D7EFF5 rgb(215,239,245)
  • pastel-green #E3F1D4 rgb(227,241,212)
  • pastel-red #FBE6E6 rgb(251,230,230)
  • pastel-yellow #FEF3D2 rgb(254,243,210)

How to use colours

Colour values can be obtained by using the getColour($colour) function, where $colour is the English term for the colour required.


light-blue background colour

.el {
  background-color: getColour(light-blue);

white text:

.el {
  color: getColour(white);

Design Tokens

To copy any of the text values to your clipboard, click on the cell containing your required value.

Sass JSON Less Variable Value
$gg-color-alto gg-color.alto @gg-color-alto -var(alto) #D0D0D0
$gg-color-black @gg-color-black -var(black) #000000
$gg-color-dark-blue gg-color.dark-blue @gg-color-dark-blue -var(dark-blue) #00528A
$gg-color-dove-grey gg-color.dove-grey @gg-color-dove-grey -var(dove-grey) #666666
$gg-color-gallery @gg-color-gallery -var(gallery) #ECECEC
$gg-color-graphite gg-color.graphite @gg-color-graphite -var(graphite) #2F2E31
$gg-color-light-blue gg-color.light-blue @gg-color-light-blue -var(light-blue) #35ADCE
$gg-color-light-green gg-color.light-green @gg-color-light-green -var(light-green) #72B72A
$gg-color-light-pink gg-color.light-pink @gg-color-light-pink -var(light-pink) #EB5F8E
$gg-color-pastel-blue @gg-color-pastel-blue -var(pastel-blue) #D7EFF5
$gg-color-pastel-green @gg-color-pastel-green -var(pastel-green) #E3F1D4
$gg-color-pastel-red @gg-color-pastel-red -var(pastel-red) #FBE6E6
$gg-color-pastel-yellow gg-color.pastel.yellow @gg-color-pastel-yellow -var(pastel-yellow) #FEF3D2
$gg-color-red @gg-color-red -var(red) #d60000
$gg-color-white gg-color.white @gg-color-white -var(white) #FFFFFF
$gg-color-wild-sand gg-color.wild-sand @gg-color-wild-sand -var(wild-sand) #F5F5F5
$gg-color-yellow gg-color.yellow @gg-color-yellow -var(yellow) #FCC31E