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

Example

HTML

<h3>White and greys</h3>
<div class="coop-l-row">
    <div class="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-white-bg coop-u-border">
                <ul class="coop-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="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-grey-light-bg">
                <ul class="coop-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="coop-l-row">
    <div class="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-grey-mid-bg">
                <ul class="coop-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="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-grey-dark-bg">
                <ul class="coop-list-bare dm-colour__definition coop-u-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="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-text-bg">
                <ul class="coop-list-bare dm-colour__definition coop-u-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="coop-l-row equal-height">
    <div class="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-yellow-bright-bg">
                <ul class="coop-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="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-yellow-light-bg">
                <ul class="coop-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="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-yellow-mid-bg">
                <ul class="coop-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="coop-l-row">
    <div class="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-green-bright-bg">
                <ul class="coop-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="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-green-light-bg">
                <ul class="coop-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="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-green-mid-bg">
                <ul class="coop-list-bare dm-colour__definition coop-u-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="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-green-dark-bg">
                <ul class="coop-list-bare dm-colour__definition coop-u-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="coop-l-row">
    <div class="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-green-blue-bright-bg">
                <ul class="coop-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="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-green-blue-light-bg">
                <ul class="coop-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="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-green-blue-mid-bg">
                <ul class="coop-list-bare dm-colour__definition coop-u-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="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-green-blue-dark-bg">
                <ul class="coop-list-bare dm-colour__definition coop-u-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="coop-l-row">
    <div class="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-blue-bright-bg">
                <ul class="coop-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="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-blue-light-bg">
                <ul class="coop-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="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-blue-mid-bg">
                <ul class="coop-list-bare dm-colour__definition coop-u-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="coop-l-column coop-l-small-6 coop-l-medium-4 equal-height">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-blue-dark-bg">
                <ul class="coop-list-bare dm-colour__definition coop-u-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="coop-l-row">
    <div class="coop-l-column coop-l-small-6 coop-l-medium-4 equal-height">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-pink-bright-bg">
                <ul class="coop-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="coop-l-column coop-l-small-6 coop-l-medium-4 equal-height">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-pink-light-bg">
                <ul class="coop-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="coop-l-column coop-l-small-6 coop-l-medium-4 equal-height">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-purple-mid-bg">
                <ul class="coop-list-bare dm-colour__definition coop-u-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="coop-l-column coop-l-small-6 coop-l-medium-4 equal-height">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-purple-dark-bg">
                <ul class="coop-list-bare dm-colour__definition coop-u-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="coop-l-row">
    <div class="coop-l-column coop-l-small-6 coop-l-medium-4">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-orange-mid-bg">
                <ul class="coop-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="coop-l-column coop-l-small-6 coop-l-medium-4 equal-height">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-red-mid-bg">
                <ul class="coop-list-bare dm-colour__definition coop-u-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="coop-l-column coop-l-small-6 coop-l-medium-4 equal-height">
        <div class="dm-colour">
            <div class="dm-colour__swatch dm-colour__swatch--wide coop-u-red-dark-bg">
                <ul class="coop-list-bare dm-colour__definition coop-u-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>

SCSS

The styles for this pattern can be found in the foundations on github.

JS

There is no javascript needed for this component.

Design and content

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.

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change