Colour Palette
Site Variable Colours
The design systems colour palette is derived from the following site variables. These can be overridden to change the appearance of the entire site.
Primary
oklch(0.43 0.0147 248.17)
--color-primary Secondary
oklch(0.67 0.15 250)
--color-secondary Tertiary
oklch(0.65 0.2 300)
--color-tertiary Neutral
oklch(0.64 0 0)
--color-neutral Success
oklch(0.5 0.15 150)
--color-success Attention
oklch(0.55 0.12 250)
--color-attention Error
oklch(0.55 0.2 30)
--color-error Promotion
oklch(0.6 0.25 30)
--color-promotion Extended Colour Palette
The color scheme of a site is defined using the site variables shown below. From this, CSS calculations will generate a range of primitive shades centered around the site variable, where the site colour is 500 on a scale of 50 (lightest) to 950 (darkest). These can be individually changed by overriding their css definitions.
Semantic shades have been labeled. Default shades are provided when no suffix is given, such as --color-primary. Other semantic shades, such as ‘light’ are given by using the label as the suffix, e.g. --color-primary-light
primary
light
--color-primary-50
oklch( from var(--color-primary-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
50
--color-primary-100
oklch( from var(--color-primary-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
100
--color-primary-200
oklch( from var(--color-primary-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
200
--color-primary-300
oklch( from var(--color-primary-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
300
hover-light
--color-primary-400
oklch( from var(--color-primary-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
400
default
--color-primary-500
oklch(from var(--color-primary) l c h)
Click to copy to clipboard
500
hover
--color-primary-600
oklch( from var(--color-primary-500) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
600
--color-primary-700
oklch( from var(--color-primary-600) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
700
--color-primary-800
oklch( from var(--color-primary-700) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
800
--color-primary-900
oklch( from var(--color-primary-800) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
900
dark
--color-primary-950
oklch( from var(--color-primary-900) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
950
secondary
light
--color-secondary-50
oklch( from var(--color-secondary-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
50
--color-secondary-100
oklch( from var(--color-secondary-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
100
--color-secondary-200
oklch( from var(--color-secondary-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
200
--color-secondary-300
oklch( from var(--color-secondary-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
300
hover-light
--color-secondary-400
oklch( from var(--color-secondary-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
400
default
--color-secondary-500
oklch(from var(--color-secondary) l c h)
Click to copy to clipboard
500
hover
--color-secondary-600
oklch( from var(--color-secondary-500) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
600
--color-secondary-700
oklch( from var(--color-secondary-600) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
700
--color-secondary-800
oklch( from var(--color-secondary-700) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
800
--color-secondary-900
oklch( from var(--color-secondary-800) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
900
dark
--color-secondary-950
oklch( from var(--color-secondary-900) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
950
tertiary
light
--color-tertiary-50
oklch( from var(--color-tertiary-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
50
--color-tertiary-100
oklch( from var(--color-tertiary-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
100
--color-tertiary-200
oklch( from var(--color-tertiary-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
200
--color-tertiary-300
oklch( from var(--color-tertiary-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
300
hover-light
--color-tertiary-400
oklch( from var(--color-tertiary-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
400
default
--color-tertiary-500
oklch(from var(--color-tertiary) l c h)
Click to copy to clipboard
500
hover
--color-tertiary-600
oklch( from var(--color-tertiary-500) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
600
--color-tertiary-700
oklch( from var(--color-tertiary-600) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
700
--color-tertiary-800
oklch( from var(--color-tertiary-700) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
800
--color-tertiary-900
oklch( from var(--color-tertiary-800) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
900
dark
--color-tertiary-950
oklch( from var(--color-tertiary-900) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
950
neutral
light
--color-neutral-50
oklch( from var(--color-neutral-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
50
--color-neutral-100
oklch( from var(--color-neutral-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
100
--color-neutral-200
oklch( from var(--color-neutral-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
200
--color-neutral-300
oklch( from var(--color-neutral-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
300
hover-light
--color-neutral-400
oklch( from var(--color-neutral-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
400
default
--color-neutral-500
oklch(from var(--color-neutral) l c h)
Click to copy to clipboard
500
hover
--color-neutral-600
oklch( from var(--color-neutral-500) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
600
--color-neutral-700
oklch( from var(--color-neutral-600) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
700
--color-neutral-800
oklch( from var(--color-neutral-700) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
800
--color-neutral-900
oklch( from var(--color-neutral-800) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
900
dark
--color-neutral-950
oklch( from var(--color-neutral-900) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
950
attention
light
--color-attention-50
oklch( from var(--color-attention-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
50
--color-attention-100
oklch( from var(--color-attention-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
100
--color-attention-200
oklch( from var(--color-attention-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
200
--color-attention-300
oklch( from var(--color-attention-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
300
hover-light
--color-attention-400
oklch( from var(--color-attention-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
400
default
--color-attention-500
oklch(from var(--color-attention) l c h)
Click to copy to clipboard
500
hover
--color-attention-600
oklch( from var(--color-attention-500) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
600
--color-attention-700
oklch( from var(--color-attention-600) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
700
--color-attention-800
oklch( from var(--color-attention-700) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
800
--color-attention-900
oklch( from var(--color-attention-800) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
900
dark
--color-attention-950
oklch( from var(--color-attention-900) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
950
success
light
--color-success-50
oklch( from var(--color-success-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
50
--color-success-100
oklch( from var(--color-success-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
100
--color-success-200
oklch( from var(--color-success-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
200
--color-success-300
oklch( from var(--color-success-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
300
hover-light
--color-success-400
oklch( from var(--color-success-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
400
default
--color-success-500
oklch(from var(--color-success) l c h)
Click to copy to clipboard
500
hover
--color-success-600
oklch( from var(--color-success-500) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
600
--color-success-700
oklch( from var(--color-success-600) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
700
--color-success-800
oklch( from var(--color-success-700) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
800
--color-success-900
oklch( from var(--color-success-800) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
900
dark
--color-success-950
oklch( from var(--color-success-900) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
950
error
light
--color-error-50
oklch( from var(--color-error-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
50
--color-error-100
oklch( from var(--color-error-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
100
--color-error-200
oklch( from var(--color-error-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
200
--color-error-300
oklch( from var(--color-error-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
300
hover-light
--color-error-400
oklch( from var(--color-error-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
400
default
--color-error-500
oklch(from var(--color-error) l c h)
Click to copy to clipboard
500
hover
--color-error-600
oklch( from var(--color-error-500) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
600
--color-error-700
oklch( from var(--color-error-600) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
700
--color-error-800
oklch( from var(--color-error-700) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
800
--color-error-900
oklch( from var(--color-error-800) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
900
dark
--color-error-950
oklch( from var(--color-error-900) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
950
promotion
light
--color-promotion-50
oklch( from var(--color-promotion-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
50
--color-promotion-100
oklch( from var(--color-promotion-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
100
--color-promotion-200
oklch( from var(--color-promotion-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
200
--color-promotion-300
oklch( from var(--color-promotion-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
300
hover-light
--color-promotion-400
oklch( from var(--color-promotion-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
Click to copy to clipboard
400
default
--color-promotion-500
oklch(from var(--color-promotion) l c h)
Click to copy to clipboard
500
hover
--color-promotion-600
oklch( from var(--color-promotion-500) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
600
--color-promotion-700
oklch( from var(--color-promotion-600) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
700
--color-promotion-800
oklch( from var(--color-promotion-700) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
800
--color-promotion-900
oklch( from var(--color-promotion-800) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
900
dark
--color-promotion-950
oklch( from var(--color-promotion-900) calc(l * 0.8) calc(c * 1.1) h
Click to copy to clipboard
950