Design

Colour

Brand colours

You should use the brand colours.

Primary

  • Green

    #6aa300

  • Black

    #1d1d1d

  • White

    #ffffff

Secondary

  • Orange

    #e86c00

  • Pink

    #cc0070

  • Purple

    #6e2066

  • Teal

    #0099a9

Focus

  • Yellow

    #ffbf47

Errors

  • Red

    #c30000

If your product isn’t Barnardo’s branded you don’t need to use the brand colours, but you should follow the colour scale.

Colour scale

You should use a scale of 10% increments for tints, shades and alpha (opacity).

Green with black (shade) applied in 10% increments.
Green with white (tint) applied in 10% increments.

Generating colour scale

You can use the color-mod function to generate this scale in CSS.

color: color-mod(var(--green) tint(20%));

20% tint of the brand Green.

If you need to create hex values of the colour scale, you can use the tint and shade generator.

Light grey

As an exception to the colour scale, you can use a 95% tint of Black for backgrounds.

95% tint of Black

View colour research on GitHub.