Colour
Always use the council colour palette.
Accessibility
Make sure the contrast ratio of text and interactive elements meets level AA of the Web Content Accessibility Guidelines (WCAG 2.1).
Theme Colours
default copy text
Hex: #2e3137 | RGB: 46, 49, 55 | HSL: 220%, 9%, 20% |
color: color(grey-dark)
copy text
Hex: #676973 | RGB: 103, 105, 115 | HSL: 231%, 6%, 43% |
color: color(grey);
links, anchor tags
Hex: #0d45a0 | RGB: 13, 69, 160 | HSL: 218%, 85%, 34% |
color: color(blue);
button primary button color
Hex: #3771d0 | RGB: 55, 113, 208 | HSL: 218%, 62%, 52% |
color: color(blue-light);
button secondary button color
Hex: #274d8b | RGB: 39, 77, 139 | HSL: 218%, 57%, 35% |
color: color(blue-dark);
border colour
Hex: #cccccc | RGB: 204, 204, 204 | HSL: 0%, 0%, 80% |
color: color(grey-light);
Accessebility colour focus
Hex: #ff9600 | RGB: 255, 150, 0 | HSL: 36%, 100%, 50% |
color: color(orange);
Focus text colour
Hex: #000000 | RGB: 0, 0, 0 | HSL: 0%, 0%, 0% |
color: color(black);
Success colour
Hex: #188049 | RGB: 24, 128, 73 | HSL: 149%, 69%, 30% |
color: color(green);
Warning colour
Hex: #ffcc00 | RGB: 255, 204, 0 | HSL: 48%, 100%, 50% |
color: color(yellow);
Error colour
Hex: #ea0000 | RGB: 234, 0, 0 | HSL: 0%, 100%, 46% |
color: color(red);
Brand colour
Hex: #bc0031 | RGB: 188, 0, 49 | HSL: 345%, 100%, 37% |
color: color(red-dark);