GOV.UK Design System
The GOV.UK Design System colour palette as published by the Government Digital Service (GDS). The palette is built around GOV.UK Black (#0B0C0C) for ink and GOV.UK Blue (#1D70B8) for the brand link colour, with a yellow focus state (#FFDD00) that is the signature accessibility-driven affordance on every UK central-government service surface. Functional roles (link, link-hover, link-visited, error, success, border, focus, template-background, surface) are published alongside an 11-hue "web palette" (blue, green, teal, purple, magenta, red, orange, yellow, brown, black, white) for chart and illustration use. Light-first; the system targets WCAG 2.1 AA on the GOV.UK template background.
30 swatches 15 light roles 15 dark roles
Swatches
text
#0B0C0C
GOV.UK Black — primary text ink on every page.
secondary-text
#484949
Secondary text and hints; quiet metadata.
link
#1A65A6
Default link colour on the GOV.UK template background.
link-hover
#0F385C
Hover state for links.
link-visited
#54319F
Visited link state — sourced from web-palette Purple.
link-active
#0B0C0C
Active link state — GOV.UK Black for highest emphasis.
border
#CECECE
Default border on quiet dividers and cards.
input-border
#0B0C0C
Form-control border — full-strength GOV.UK Black.
hover
#CECECE
Hover surface for interactive rows and list items.
focus
#FFDD00
GOV.UK Yellow focus indicator — the signature accessibility affordance.
focus-text
#0B0C0C
Text ink rendered on the yellow focus background.
error
#CA3535
Validation and error messaging colour.
success
#0F7A52
Success / confirmation colour.
brand
#1D70B8
GOV.UK Blue — the system's brand link / primary blue.
body-background
#FFFFFF
Default page background — white.
template-background
#F4F8FB
The pale-blue GOV.UK template background.
surface-background
#F4F8FB
Default surface background for cards and panels.
surface-text
#0B0C0C
Default text colour on a surface panel.
surface-border
#8EB8DC
Default border colour on a surface panel.
web-blue
#1D70B8
Web-palette Blue — identical to brand.
web-green
#0F7A52
Web-palette Green — identical to success.
web-teal
#158187
Web-palette Teal.
web-purple
#54319F
Web-palette Purple — identical to link-visited.
web-magenta
#CA357C
Web-palette Magenta.
web-red
#CA3535
Web-palette Red — identical to error.
web-orange
#F47738
Web-palette Orange.
web-yellow
#FFDD00
Web-palette Yellow — identical to focus.
web-brown
#99704A
Web-palette Brown.
web-black
#0B0C0C
Web-palette Black — identical to text.
web-white
#FFFFFF
Web-palette White — identical to body-background.
Mode role mappings
Light mode (15 roles)
accent
→ focus accent-hover
→ focus background
→ body-background border
→ border error
→ error primary
→ brand primary-hover
→ link-hover success
→ success surface
→ template-background surface-elevated
→ body-background text-primary
→ text text-secondary
→ secondary-text text-tertiary
→ secondary-text warning
→ web-orange warning-hover
→ web-orange Dark mode (15 roles)
accent
→ focus accent-hover
→ focus background
→ text border
→ secondary-text error
→ error primary
→ web-blue primary-hover
→ web-blue success
→ success surface
→ text surface-elevated
→ secondary-text text-primary
→ body-background text-secondary
→ border text-tertiary
→ border warning
→ web-orange warning-hover
→ web-orange Provenance
- Source
- https://design-system.service.gov.uk/styles/colour/
- License
MIT (code) / Open Government Licence v3.0 (content)- Attribution
- GOV.UK Design System, maintained by the Government Digital Service (Cabinet Office, Crown copyright). The govuk-frontend codebase is published under the MIT License; the design-system guidance content is published under the Open Government Licence v3.0. The GOV.UK logotype, the GOV.UK colour pairings, and Crown copyright marks are reserved.
- Imported
-
2026-05-19 - Notes
- Colour values mirrored from the published Colour reference at design-system.service.gov.uk/styles/colour. The "web palette" eleven-hue set is included alongside the functional roles because GOV.UK service teams frequently need chart and illustration palettes that already pair with the brand blue and focus yellow.