You must always use this list of council brand colours.
You must make sure there's a contrast ratio of at least 4.5:1 between the colour of the foreground element, such as text, and the colour of the background. You can use the WebAim Contrast Checker to check this.
Text
Default text
Hex: #2e3137 | RGB: 46, 49, 55 | HSL: 220%, 9%, 20% |
Hint text
Hex: #676973 | RGB: 103, 105, 115 | HSL: 231%, 6%, 43% |
Link text
Hex: #0d45a0 | RGB: 13, 69, 160 | HSL: 218%, 85%, 34% |
Link text: hover and visited state
Hex: #4c2c92 | RGB: 76, 44, 146 | HSL: 259%, 54%, 38% |
Primary
Hex: #3771d0 | RGB: 55, 113, 208 | HSL: 218%, 62%, 52% |
Secondary
Hex: #274d8b | RGB: 39, 77, 139 | HSL: 218%, 57%, 35% |
Use #ffffff99
Border
For example, tables, form fields and dividers
Hex: #cccccc | RGB: 204, 204, 204 | HSL: 0%, 0%, 80% |
Focus state
Focus highlight
Hex: #ff9600 | RGB: 255, 150, 0 | HSL: 36%, 100%, 50% |
Focus text
Hex: #000000 | RGB: 0, 0, 0 | HSL: 0%, 0%, 0% |
Success state
Use for success messages. For example, once a user has selected their address using address lookup.
Hex: #188049 | RGB: 24, 128, 73 | HSL: 149%, 69%, 30% |
Alert banners
Low level
Hex: #ffcc00 | RGB: 255, 204, 0 | HSL: 48%, 100%, 50% |
Medium level
Hex: #ff9600 | RGB: 255, 150, 0 | HSL: 36%, 100%, 50% |
High level
Hex: #bc0031 | RGB: 188, 0, 49 | HSL: 345%, 100%, 37% |
Hex: #d5e5ff | RGB: 213, 229, 255 | HSL: 218%, 100%, 92% |
Error
Hex: #ea0000 | RGB: 234, 0, 0 | HSL: 0%, 100%, 46% |
BCC red
Hex: #bc0031 | RGB: 188, 0, 49 | HSL: 345%, 100%, 37% |
BCC teal
Hex: #30737b | RGB: 48, 115, 123 | HSL: 187%, 44%, 34% |
Panel
Hex: #eaeaea | RGB: 234, 234, 234 | HSL: 0%, 0%, 92% |
Slate primary
Hex: #d5e5ff | RGB: 213, 229, 255 | HSL: 218%, 100%, 92% |
Key data and Confirmation
Hex: #188049 | RGB: 24, 128, 73 | HSL: 149%, 69%, 30% |
CSS background classes