Web

Web palette

Use these colours for supporting elements in your service like illustrations, or in custom components where appropriate.

If you’re using GOV.UK Frontend or the GOV.UK Prototype Kit, you can access the full web palette, and all its available colours, using the govuk-colour function.

By default, the function will return the ‘primary’ variant of each colour. For example: govuk-colour("blue") will return ‘Primary blue’ #1d70b8.

Access tints and shades of colour groups using the $variant option.

For example:

• govuk-colour("red", $variant: "tint-25") will return ‘Red tint 25%’, which is a variant of red with a tint of 25%
• govuk-colour("blue", $variant: "shade-50") will return ‘Blue shade 50%’, which is a variant of blue with a shade of 50%

Most colours include these variants:

• tints at 25% (tint-25), 50% (tint-50), 80% (tint-80) and 95% (tint-95)
• shades at 25% (shade-25) and 50% (shade-50)

Black includes Primary black, with tints to show greys. White has no variants.

The web palette has:

Blues

• Primary blue: RGB 29 112 184
• Primary blue: #1D70B8
• Blue tint 25%: RGB 86 148 202
• Blue tint 25%: #5694CA
• Blue tint 50%: RGB 142 184 220
• Blue tint 50%: #8EB8DC
• Blue tint 80%: RGB 210 226 241
• Blue tint 80%: #D2E2F1
• Blue tint 95%: RGB 244 248 251
• Blue tint 95%: #F4F8FB
• Blue shade 10%: RGB 26 101 166
• Blue shade 10%: #1A65A6
• Blue shade 25%: RGB 22 84 138
• Blue shade 25%: #16548A
• Blue shade 50%: RGB 15 56 92
• Blue shade 50%: #0F385C

Greens

• Primary green: RGB 15 122 82
• Primary green: #0F7A52
• Green tint 25%: RGB 75 155 125
• Green tint 25%: #4B9B7D
• Green tint 50%: RGB 135 188 168
• Green tint 50%: #87BCA8
• Green tint 80%: RGB 207 228 220
• Green tint 80%: #CFE4DC
• Green tint 95%: RGB 243 248 246
• Green tint 95%: #F3F8F6
• Green shade 25%: RGB 11 92 62
• Green shade 25%: #0B5C3E
• Green shade 50%: RGB 8 61 41
• Green shade 50%: #083D29

Teals

• Primary teal: RGB 21 129 135
• Primary teal: #158187
• Teal tint 25%: RGB 80 161 165
• Teal tint 25%: #50A1A5
• Teal tint 50%: RGB 138 192 195
• Teal tint 50%: #8AC0C3
• Teal tint 80%: RGB 208 230 231
• Teal tint 80%: #D0E6E7
• Teal tint 95%: RGB 243 249 249
• Teal tint 95%: #F3F9F9
• Teal shade 25%: RGB 16 97 101
• Teal shade 25%: #106165
• Teal shade 50%: RGB 11 65 68
• Teal shade 50%: #0B4144
• Accent teal: RGB 0 255 224
• Accent teal: #00FFE0

Purples

• Primary purple: RGB 84 49 159
• Primary purple: #54319F
• Purple tint 25%: RGB 127 101 183
• Purple tint 25%: #7F65B7
• Purple tint 50%: RGB 170 152 207
• Purple tint 50%: #AA98CF
• Purple tint 80%: RGB 221 214 236
• Purple tint 80%: #DDD6EC
• Purple tint 95%: RGB 246 245 250
• Purple tint 95%: #F6F5FA
• Purple shade 25%: RGB 63 37 119
• Purple shade 25%: #3F2577
• Purple shade 50%: RGB 42 25 80
• Purple shade 50%: #2A1950

Magentas

• Primary magenta: RGB 202 53 124
• Primary magenta: #CA357C
• Magenta tint 25%: RGB 215 104 157
• Magenta tint 25%: #D7689D
• Magenta tint 50%: RGB 229 154 190
• Magenta tint 50%: #E59ABE
• Magenta tint 80%: RGB 244 215 229
• Magenta tint 80%: #F4D7E5
• Magenta tint 95%: RGB 252 245 248
• Magenta tint 95%: #FCF5F8
• Magenta shade 25%: RGB 152 40 93
• Magenta shade 25%: #98285D
• Magenta shade 50%: RGB 101 27 62
• Magenta shade 50%: #651B3E

Reds

• Primary red: RGB 202 53 53
• Primary red: #CA3535
• Red tint 25%: RGB 215 104 104
• Red tint 25%: #D76868
• Red tint 50%: RGB 229 154 154
• Red tint 50%: #E59A9A
• Red tint 80%: RGB 244 215 215
• Red tint 80%: #F4D7D7
• Red tint 95%: RGB 252 245 245
• Red tint 95%: #FCF5F5
• Red shade 25%: RGB 152 40 40
• Red shade 25%: #982828
• Red shade 50%: RGB 101 27 27
• Red shade 50%: #651B1B

Oranges

• Primary orange: RGB 244 119 56
• Primary orange: #F47738
• Orange tint 25%: RGB 247 153 106
• Orange tint 25%: #F7996A
• Orange tint 50%: RGB 250 187 156
• Orange tint 50%: #FABB9C
• Orange tint 80%: RGB 253 228 215
• Orange tint 80%: #FDE4D7
• Orange tint 95%: RGB 254 248 245
• Orange tint 95%: #FEF8F5
• Orange shade 25%: RGB 183 89 42
• Orange shade 25%: #B7592A
• Orange shade 50%: RGB 122 60 28
• Orange shade 50%: #7A3C1C

Yellows

• Primary yellow: RGB 255 221 0
• Primary yellow: #FFDD00
• Yellow tint 25%: RGB 255 230 64
• Yellow tint 25%: #FFE640
• Yellow tint 50%: RGB 255 238 128
• Yellow tint 50%: #FFEE80
• Yellow tint 80%: RGB 255 248 204
• Yellow tint 80%: #FFF8CC
• Yellow tint 95%: RGB 255 253 242
• Yellow tint 95%: #FFFDF2
• Yellow shade 25%: RGB 191 166 0
• Yellow shade 25%: #BFA600
• Yellow shade 50%: RGB 128 111 0
• Yellow shade 50%: #806F00

Browns

• Primary brown: RGB 153 112 74
• Primary brown: #99704A
• Brown tint 25%: RGB 179 148 119
• Brown tint 25%: #B39477
• Brown tint 50%: RGB 204 184 165
• Brown tint 50%: #CCB8A5
• Brown tint 95%: RGB 250 248 246
• Brown tint 95%: #FAF8F6

Neutrals

• Black: RGB 11 12 12
• Black: #0B0C0C
• Black tint 25%: RGB 72 73 73
• Black tint 25%: #484949
• Black tint 50%: RGB 133 134 134
• Black tint 50%: #858686
• Black tint 80%: RGB 206 206 206
• Black tint 80%: #CECECE
• Black tint 95%: RGB 243 243 243
• Black tint 95%: #F3F3F3
• White: RGB 255 255 255
• White: #FFFFFF

Functional colours

The GOV.UK Design System has a set of functional colours for essential page elements. These help apply colours across the Design System in a way that makes interactions predictable and consistent to users.

If you’re using GOV.UK Frontend or the GOV.UK Prototype Kit, use the govuk-functional-colour Sass function. The colours available using this function are based on specific purposes and contexts, so that function will automatically assign appropriate colours.

Do not copy the specific hexadecimal (hex) colour values. For example, use govuk-functional-colour("brand") rather than #1d70b8.

This means that your service will always use the most recent colour palette whenever you update.

Only use the variables in the context they’re designed for. In all other cases, you should reference the GOV.UK web palette directly. For example, if you wanted to use red, you should use govuk-colour("red") rather than govuk-functional-colour("error").

Text

• text: RGB 11 12 12
• text: #0B0C0C
• secondary-text: RGB 72 73 73
• secondary-text: #484949

Links

• link: RGB 26 101 166
• link: #1A65A6
• link-hover: RGB 15 56 92
• link-hover: #0F385C
• link-visited: RGB 84 49 159
• link-visited: #54319F
• link-active: RGB 11 12 12
• link-active: #0B0C0C

Border

• border: RGB 206 206 206
• border: #CECECE
• input-border: RGB 11 12 12
• input-border: #0B0C0C

Background

Use the template-background colour if you need to match the colour of the <html> element. Use the body-background colour if you need to match the colour of the <body> element.

• template-background: RGB 244 248 251
• template-background: #F4F8FB
• body-background: RGB 255 255 255
• body-background: #FFFFFF

Focus state

Only use the focus colour to indicate which element is focused on. For example, when a user tabs to an element with their keyboard.

• focus: RGB 255 221 0
• focus: #FFDD00
• focus-text: RGB 11 12 12
• focus-text: #0B0C0C

Error state

Use the error colour to show error messages.

• error: RGB 202 53 53
• error: #CA3535

Success state

Use the success colour to show success messages.

• success: RGB 15 122 82
• success: #0F7A52

Hover state

Use the hover colour to show input hover states.

• hover: RGB 206 206 206
• hover: #CECECE

Brand colour

• brand: RGB 29 112 184
• brand: #1D70B8

Surface

• surface-background: RGB 244 248 251
• surface-background: #F4F8FB
• surface-text: RGB 11 12 12
• surface-text: #0B0C0C
• surface-border: RGB 142 184 220
• surface-border: #8EB8DC

Web palette example

Indicative examples for illustrative purposes only.