Back to the pattern library

Colour palette

You can use other colours to:

  • draw users’ focus to particular content areas
  • emphasise content so that it’s read in an order that makes sense to users
  • give the impression of depth and layering — this can help structure content in a helpful way for users

More detailed information on how to use our palette can be found in our design guidance.

Example

Preview

Example

Code

<h3>White and greys</h3>
<div class="row">
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide white-bg border">
                <ul class="list-bare dm-colour__definition">
                    <li class="bold">Page</li>
                    <li>$page</li>
                    <li>rgb(255,255,255)</li>
                    <li>#FFFFFF</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide grey-light-bg">
                <ul class="list-bare dm-colour__definition">
                    <li class="bold">Light grey</li>
                    <li>$grey-light</li>
                    <li>rgb(243,243,243)</li>
                    <li>#F3F3F3</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide grey-mid-bg">
                <ul class="list-bare dm-colour__definition">
                    <li class="bold">Mid grey</li>
                    <li>$grey-mid</li>
                    <li>rgb(196,196,196)</li>
                    <li>#C4C4C4</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide grey-dark-bg">
                <ul class="list-bare dm-colour__definition white">
                    <li class="bold">Dark grey</li>
                    <li>$grey-dark</li>
                    <li>rgb(110,110,110)</li>
                    <li>#6E6E6E</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide text-bg">
                <ul class="list-bare dm-colour__definition white">
                    <li class="bold">Text grey</li>
                    <li>$text</li>
                    <li>rgb(40,40,40)</li>
                    <li>#282828</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23FFFFFF-on-%23282828" class="dm-colour__definition_link-light">AAA any size text</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<h3>Yellows</h3>
<div class="row equal-height">
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide yellow-bright-bg">
                <ul class="list-bare dm-colour__definition">
                    <li class="bold">Bright</li>
                    <li>$yellow-bright</li>
                    <li>rgb(255,255,0)</li>
                    <li>#FFFF00</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23282828-on-%23FFFF00" class="dm-colour__definition_link-dark">AAA any size text</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide yellow-light-bg">
                <ul class="list-bare dm-colour__definition">
                    <li class="bold">Light</li>
                    <li>$yellow-light</li>
                    <li>rgb(255,236,0)</li>
                    <li>#FFEC00</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23282828-on-%23FFEC00" class="dm-colour__definition_link-dark">AAA any size text</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide yellow-mid-bg">
                <ul class="list-bare dm-colour__definition">
                    <li class="bold">Mid</li>
                    <li>$yellow-mid</li>
                    <li>rgb(255,211,8)</li>
                    <li>#FFD308</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23282828-on-%23FFD308" class="dm-colour__definition_link-dark">AAA any size text</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<h3>Greens</h3>
<div class="row">
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide green-bright-bg">
                <ul class="list-bare dm-colour__definition">
                    <li class="bold">Bright</li>
                    <li>$green-bright</li>
                    <li>rgb(237,251,60)</li>
                    <li>#EDFB3C</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23282828-on-%23EDFB3C" class="dm-colour__definition_link-dark">AAA any size text</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide green-light-bg">
                <ul class="list-bare dm-colour__definition">
                    <li class="bold">Light</li>
                    <li>$green-light</li>
                    <li>rgb(186,211,3)</li>
                    <li>#BAD303</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23282828-on-%23BAD303" class="dm-colour__definition_link-dark">AAA any size text</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide green-mid-bg">
                <ul class="list-bare dm-colour__definition white">
                    <li class="bold">Mid</li>
                    <li>$green-mid</li>
                    <li>rgb(79,130,13)</li>
                    <li>#4F820D</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23FFFFFF-on-%234F820D" class="dm-colour__definition_link-light">AAA 24px plus size AA other</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide green-dark-bg">
                <ul class="list-bare dm-colour__definition white">
                    <li class="bold">Dark</li>
                    <li>$green-dark</li>
                    <li>rgb(56,92,10)</li>
                    <li>#385C0A</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23FFFFFF-on-%23385C0A" class="dm-colour__definition_link-light">AAA any size text</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<h3>Green blues</h3>
<div class="row">
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide green-blue-bright-bg">
                <ul class="list-bare dm-colour__definition">
                    <li class="bold">Bright</li>
                    <li>$green-blue-bright</li>
                    <li>rgb(10,251,251)</li>
                    <li>#0AFBFB</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23282828-on-%230AFBFB" class="dm-colour__definition_link-dark">AAA any size text</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide green-blue-light-bg">
                <ul class="list-bare dm-colour__definition">
                    <li class="bold">Light</li>
                    <li>$green-blue-light</li>
                    <li>rgb(114,220,219)</li>
                    <li>#72DCDB</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23282828-on-%2372DCDB" class="dm-colour__definition_link-dark">AAA any size text</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide green-blue-mid-bg">
                <ul class="list-bare dm-colour__definition white">
                    <li class="bold">Mid</li>
                    <li>$green-blue-mid</li>
                    <li>rgb(15,132,130)</li>
                    <li>#0F8482</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23FFFFFF-on-%230F8482" class="dm-colour__definition_link-light">AAA 24px plus size AA other</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide green-blue-dark-bg">
                <ul class="list-bare dm-colour__definition white">
                    <li class="bold">Dark</li>
                    <li>$green-blue-dark</li>
                    <li>rgb(22,109,102)</li>
                    <li>#166D66</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23FFFFFF-on-%23166D66" class="dm-colour__definition_link-light">AAA any size text</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<h3>Blues</h3>
<div class="row">
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide blue-bright-bg">
                <ul class="list-bare dm-colour__definition">
                    <li class="bold">Bright</li>
                    <li>$blue-bright</li>
                    <li>rgb(65,140,252)</li>
                    <li>#418CFC</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23282828-on-%23418CFC" class="dm-colour__definition_link-dark">AAA 24px plus size AA other</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide blue-light-bg">
                <ul class="list-bare dm-colour__definition">
                    <li class="bold">Light</li>
                    <li>$blue-light</li>
                    <li>rgb(146,216,254)</li>
                    <li>#92D8FE</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23282828-on-%2392D8FE" class="dm-colour__definition_link-dark">AAA any size text</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide blue-mid-bg">
                <ul class="list-bare dm-colour__definition white">
                    <li class="bold">Mid</li>
                    <li>$blue-mid</li>
                    <li>rgb(50,107,183)</li>
                    <li>#326BB7</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23FFFFFF-on-%23326BB7" class="dm-colour__definition_link-light">AAA 24px plus size AA other</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4 equal-height">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide blue-dark-bg">
                <ul class="list-bare dm-colour__definition white">
                    <li class="bold">Dark</li>
                    <li>$blue-dark</li>
                    <li>rgb(51,76,137)</li>
                    <li>#334C89</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23FFFFFF-on-%23334C89" class="dm-colour__definition_link-light">AAA any size text</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<h3>Pinks and Purples</h3>
<div class="row">
    <div class="column small-6 medium-4 equal-height">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide pink-bright-bg">
                <ul class="list-bare dm-colour__definition">
                    <li class="bold">Bright</li>
                    <li>$pink-bright</li>
                    <li>rgb(252,67,211)</li>
                    <li>#FC43D3</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23282828-on-%23FC43D3" class="dm-colour__definition_link-dark">AAA 24px plus size AA other</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4 equal-height">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide pink-light-bg">
                <ul class="list-bare dm-colour__definition">
                    <li class="bold">Light</li>
                    <li>$pink-light</li>
                    <li>rgb(255,128,211)</li>
                    <li>#FF80D3</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23282828-on-%23FF80D3" class="dm-colour__definition_link-dark">AAA any size text</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4 equal-height">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide purple-mid-bg">
                <ul class="list-bare dm-colour__definition white">
                    <li class="bold">Mid</li>
                    <li>$purple-mid</li>
                    <li>rgb(173,32,142)</li>
                    <li>#AD208E</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23FFFFFF-on-%23AD208E" class="dm-colour__definition_link-light">AAA 24px plus size AA other</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4 equal-height">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide purple-dark-bg">
                <ul class="list-bare dm-colour__definition white">
                    <li class="bold">Dark</li>
                    <li>$purple-dark</li>
                    <li>rgb(173,32,142)</li>
                    <li>#61307D</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23FFFFFF-on-%2361307D" class="dm-colour__definition_link-light">AAA any size text</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<h3>Reds and Oranges</h3>
<div class="row">
    <div class="column small-6 medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide orange-mid-bg">
                <ul class="list-bare dm-colour__definition">
                    <li class="bold">Mid</li>
                    <li>$orange-mid</li>
                    <li>rgb(248,100,44)</li>
                    <li>#F8642C</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23282828-on-%23F8642C" class="dm-colour__definition_link-dark">AAA 24px plus size AA other</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4 equal-height">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide red-mid-bg">
                <ul class="list-bare dm-colour__definition white">
                    <li class="bold">Mid</li>
                    <li>$red-mid</li>
                    <li>rgb(214,49,24)</li>
                    <li>#D63118</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23FFFFFF-on-%23D63118" class="dm-colour__definition_link-light">AAA 24px plus size AA other</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column small-6 medium-4 equal-height">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide red-dark-bg">
                <ul class="list-bare dm-colour__definition white">
                    <li class="bold">Dark</li>
                    <li>$red-dark</li>
                    <li>rgb(159,42,0)</li>
                    <li>#9F2A00</li>
                    <li><a href="http://leaverou.github.io/contrast-ratio/#%23FFFFFF-on-%239F2A00" class="dm-colour__definition_link-light">AAA any size text</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
</div>
</div>

User need

Colour should convey meaning to a user and feel suitable for the subject matter. It should have high enough contrast where text is being used. This will help to build trust and confidence in a service.

Design

These colours have been contrast tested as background colours with white or grey (#282828) text. Use a colour contrast checker when using any other colour of text.

Use Co-op’s colour palette:

  • to draw users’ focus to particular content areas
  • to give emphasis, depth and highlight to our work where needed
  • in the right context — for example don’t use large amounts of colour in a form, it can distract the user
  • with restraint — users can read content better when we use limited colour
  • to help convey meaning to interaction patterns, for example, for mandatory form fields. Never use colour alone to do this.
  • to communicate the Co-op brand — see the brand guidelines

Find out more about how we use colour.

Accessibility

Think about how your colour choices can affect legibility and accessibility — read WCAG 2.0 specifications on using colour. To be legible, text and background colours must have a minimum contrast between them. You can check colour contrasts online using:

As well as using these tools, test colour contrast with people of all abilities.

If you have a question about colour, contact design@coopdigital.co.uk.

For more information see our general guide on accessibility.

Variations

Patterns that have other colours associated with them are the: