cruk-pattern-library/docs/colours.md

CRUK Pattern library.

---
layout: page
title: Colours
---

The colours we use form a key part of our branding and identity.

Whilst we match the Bootstrap variable names `primary`, `secondary` and our own (`tertiary`) this is more of a structural naming point. These variable names should not convey that there's a brand colour hierarchy as that would not be true. Each colour carries equal importance.

### Brand Colours

<div class="row text-center">
  <div class="col-xs-6 col-sm-3 cr-pattern-library-swatch cr-pattern-library-swatch--primary">
    <div class="cr-pattern-library-swatch__colour">Dark Blue</div>

    <code>$brand-primary</code>
    <code>#2E008B</code>
    <code>rgb(46, 0, 139)</code>
  </div>

  <div class="col-xs-6 col-sm-3 cr-pattern-library-swatch cr-pattern-library-swatch--secondary">
    <div class="cr-pattern-library-swatch__colour">Magenta</div>

    <code>$brand-secondary</code>
    <code>#EC008C</code>
    <code>rgb(236, 0, 140)</code>
  </div>

  <div class="col-xs-6 col-sm-3 cr-pattern-library-swatch cr-pattern-library-swatch--tertiary">
    <div class="cr-pattern-library-swatch__colour">Light Blue</div>

    <code>$brand-tertiary</code>
    <code>#00B6ED</code>
    <code>rgb(0, 182, 237)</code>
  </div>
</div>

### Greyscale

<div class="row text-center">
  <div class="col-xs-6 col-sm-3 cr-pattern-library-swatch cr-pattern-library-swatch--gray-light">
    <div class="cr-pattern-library-swatch__colour">Light Grey</div>

    <code>$brand-gray-light</code>
    <code>#E3E3E3</code>
    <code>rgb(227, 227, 227)</code>
  </div>

  <div class="col-xs-6 col-sm-3 cr-pattern-library-swatch cr-pattern-library-swatch--gray-medium">
    <div class="cr-pattern-library-swatch__colour">Medium Grey</div>

    <code>$brand-gray-medium</code>
    <code>#C8C9C7</code>
    <code>rgb(200, 201, 199)</code>
  </div>

  <div class="col-xs-6 col-sm-3 cr-pattern-library-swatch cr-pattern-library-swatch--gray-dark">
    <div class="cr-pattern-library-swatch__colour">Dark Grey</div>

    <code>$brand-gray-dark</code>
    <code>#666</code>
    <code>rgb(102, 102, 102)</code>
  </div>
</div>