Pattern Library

Colours palette

Guidelines

To do

  • Contrast ratio still works in progress, has to be completed.
  • Variations of colours can probably be reduced.
  • Better colours naming.
  • Colours to be added as CSS custom properties.
<!-- Default -->
<div class="palette__content">
    <span style="background-color:#0B0C0C;"></span>
    <p class="lbh-u-p--lede">text-colour</p>
    <p>#0B0C0C</p>
    <p>rgba(11, 12, 12, 1)</p>
    <p>hsla(180, 4%, 5%, 1)</p>
    <p>Contrast ratio to light background: 19.67</p>
</div>


<!-- Secondary Text Colour -->
<div class="palette__content">
    <span style="background-color:#6F777B;"></span>
    <p class="lbh-u-p--lede">secondary-text-colour</p>
    <p>#6F777B</p>
    <p>rgba(111, 119, 123, 1)</p>
    <p>hsla(200, 5%, 46%, 1)</p>
    <p>Contrast ratio to light background: 4.56</p>
</div>


<!-- Page Colour -->
<div class="palette__content">
    <span style="background-color:#FFFFFF;"></span>
    <p class="lbh-u-p--lede">page-colour</p>
    <p>#FFFFFF</p>
    <p>rgba(255, 255, 255, 1)</p>
    <p>hsla(0, 100%, 100%, 1)</p>
    <p>Contrast ratio to dark text: 19.67</p>
</div>


<!-- Link Colour -->
<div class="palette__content">
    <span style="background-color:#0072CE;"></span>
    <p class="lbh-u-p--lede">link-colour</p>
    <p>#0072CE</p>
    <p>rgba(0, 114, 206, 1)</p>
    <p>hsla(207, 100%, 40%, 1)</p>
    <p>Contrast ratio to light background: 4.89</p>
</div>


<!-- Link Hover Colour -->
<div class="palette__content">
    <span style="background-color:#0085CA;"></span>
    <p class="lbh-u-p--lede">link-hover-colour</p>
    <p>#0085CA</p>
    <p>rgba(0, 133, 202, 1)</p>
    <p>hsla(200, 100%, 40%, 1)</p>
    <p>Contrast ratio to light background: 4.03</p>
</div>


<!-- Link Visited Colour -->
<div class="palette__content">
    <span style="background-color:#8031A7;"></span>
    <p class="lbh-u-p--lede">link-visited-colour</p>
    <p>#8031A7</p>
    <p>rgba(128, 49, 167, 1)</p>
    <p>hsla(280, 55%, 42%, 1)</p>
    <p>Contrast ratio to light background: 7.2</p>
</div>


<!-- Border Colour -->
<div class="palette__content">
    <span style="background-color:#BFC1C3;"></span>
    <p class="lbh-u-p--lede">border-colour</p>
    <p>#BFC1C3</p>
    <p>rgba(191, 193, 195, 1)</p>
    <p>hsla(210, 3%, 76%, 1)</p>
    <p>Contrast ratio to dark text: 10.85</p>
</div>


<!-- Panel Colour -->
<div class="palette__content">
    <span style="background-color:#DEE0E2;"></span>
    <p class="lbh-u-p--lede">panel-colour</p>
    <p>#DEE0E2</p>
    <p>rgba(222, 224, 226, 1)</p>
    <p>hsla(210, 6%, 88%, 1)</p>
    <p>Contrast ratio to dark text: 14.8</p>
</div>


<!-- Highlight Colour -->
<div class="palette__content">
    <span style="background-color:#F8F8F8;"></span>
    <p class="lbh-u-p--lede">highlight-colour</p>
    <p>#F8F8F8</p>
    <p>rgba(248, 248, 248, 1)</p>
    <p>hsla(0, 0%, 97%, 1)</p>
    <p>Contrast ratio to dark text: 18.44</p>
</div>


<!-- Button Colour -->
<div class="palette__content">
    <span style="background-color:#00664F;"></span>
    <p class="lbh-u-p--lede">button-colour</p>
    <p>#00664F</p>
    <p>rgba(0, 102, 79, 1)</p>
    <p>hsla(166, 100%, 20%, 1)</p>
    <p>Contrast ratio to light background: 19.67</p>
</div>


<!-- Green Hover Colour -->
<div class="palette__content">
    <span style="background-color:#00513F;"></span>
    <p class="lbh-u-p--lede">green (hover colour)</p>
    <p>#00513F</p>
    <p>rgba(0, 81, 63, 1)</p>
    <p>hsla(167, 100%, 16%, 1)</p>
    <p>Contrast ratio to light background: 19.67</p>
</div>


<!-- Green Inner Shadow -->
<div class="palette__content">
    <span style="background-color:#003D2F;"></span>
    <p class="lbh-u-p--lede">green (inner shadow)</p>
    <p>#003D2F</p>
    <p>rgba(0, 61, 47, 1)</p>
    <p>hsla(166, 100%, 12%, 1)</p>
    <p>Contrast ratio to light background: 19.67</p>
</div>


<!-- Disabled Button -->
<div class="palette__content">
    <span style="background-color:#7FB2A7;"></span>
    <p class="lbh-u-p--lede">disabled-button</p>
    <p>#7FB2A7</p>
    <p>rgba(127, 178, 167, 1)</p>
    <p>hsla(167, 25%, 60%, 1)</p>
    <p>Contrast ratio to light background: 19.67</p>
</div>


<!-- Disabled Inner Shadow -->
<div class="palette__content">
    <span style="background-color:#328472;"></span>
    <p class="lbh-u-p--lede">disabled (inner shadow)</p>
    <p>#328472</p>
    <p>rgba(50, 132, 114, 1)</p>
    <p>hsla(167, 45%, 36%, 1)</p>
    <p>Contrast ratio to light background: 19.67</p>
</div>


<!-- Attention Green -->
<div class="palette__content">
    <span style="background-color:#00B140;"></span>
    <p class="lbh-u-p--lede">attention-green</p>
    <p>#00B140</p>
    <p>rgba(0, 177, 64, 1)</p>
    <p>hsla(142, 100%, 35%, 1)</p>
    <p>Contrast ratio to light background: 19.67</p>
</div>


<!-- Confirmation -->
<div class="palette__content">
    <span style="background-color:#A4D65E;"></span>
    <p class="lbh-u-p--lede">confirmation</p>
    <p>#A4D65E</p>
    <p>rgba(164, 214, 94, 1)</p>
    <p>hsla(85, 59%, 60%, 1)</p>
    <p>Contrast ratio to light background: 19.67</p>
</div>


<!-- Bright Green -->
<div class="palette__content">
    <span style="background-color:#84BD00;"></span>
    <p class="lbh-u-p--lede">bright-green</p>
    <p>#84BD00</p>
    <p>rgba(132, 189, 0, 1)</p>
    <p>hsla(78, 100%, 37%, 1)</p>
    <p>Contrast ratio to light background: 19.67</p>
</div>


<!-- Focus Colour -->
<div class="palette__content">
    <span style="background-color:#FFC845;"></span>
    <p class="lbh-u-p--lede">focus-colour</p>
    <p>#FFC845</p>
    <p>rgba(255, 200, 69, 1)</p>
    <p>hsla(42, 100%, 64%, 1)</p>
    <p>Contrast ratio to light background: 19.67</p>
</div>


<!-- Error Colour -->
<div class="palette__content">
    <span style="background-color:#BE3A34;"></span>
    <p class="lbh-u-p--lede">error-colour</p>
    <p>#BE3A34</p>
    <p>rrgba(190, 58, 52, 1)</p>
    <p>hsla(3, 57%, 47%, 1)</p>
    <p>Contrast ratio to light background: 19.67</p>
</div>