Skip to main content

Chassis v5.5.0

Colour utilities

Colour utilities are used to change background and text colours based on our brand palette.

Background

to copy hex code

.ch-bg--ac-black
.ch-bg--ac-yellow
.ch-bg--ac-blue
.ch-bg--ac-teal
.ch-bg--ac-violet
.ch-bg--ac-magenta
.ch-bg--ac-green
.ch-bg--ac-bluegrey
.ch-bg--ac-red
.ch-bg--ac-orange
.ch-bg--white
.ch-bg--grey-1
.ch-bg--grey-2
.ch-bg--grey-3
.ch-bg--grey-4
.ch-bg--grey-5
.ch-bg--grey-6
.ch-bg--grey-7

Text

.ch-color--ac-black
.ch-color--ac-yellow
.ch-color--ac-blue
.ch-color--ac-teal
.ch-color--ac-violet
.ch-color--ac-magenta
.ch-color--ac-green
.ch-color--ac-bluegrey
.ch-color--ac-red
.ch-color--ac-orange
.ch-color--white
.ch-color--grey-1
.ch-color--grey-2
.ch-color--grey-3
.ch-color--grey-4
.ch-color--grey-5
.ch-color--grey-6
.ch-color--grey-7

Border

.ch-bc--ac-black
.ch-bc--ac-yellow
.ch-bc--ac-blue
.ch-bc--ac-teal
.ch-bc--ac-violet
.ch-bc--ac-magenta
.ch-bc--ac-green
.ch-bc--ac-bluegrey
.ch-bc--ac-red
.ch-bc--ac-orange
.ch-bc--white
.ch-bc--grey-1
.ch-bc--grey-2
.ch-bc--grey-3
.ch-bc--grey-4
.ch-bc--grey-5
.ch-bc--grey-6
.ch-bc--grey-7