Pattern Library

Greyscale palette

Guidelines

To do

  • Contrast ratio to be checked.
  • 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">black</p>
    <p>#0B0C0C</p>
    <p>rgba(11, 12, 12, 1)</p>
    <p>hsla(180, 4%, 5%, 1)</p>
</div>


<!-- Grey 1 -->
<div class="palette__content">
    <span style="background-color:#6F777B;"></span>
    <p class="lbh-u-p--lede">grey-1</p>
    <p>#6F777B</p>
    <p>rgba(111, 119, 123, 1)</p>
    <p>hsla(200, 5%, 46%, 1)</p>
</div>


<!-- Grey 2 -->
<div class="palette__content">
    <span style="background-color:#BFC1C3;"></span>
    <p class="lbh-u-p--lede">grey-2</p>
    <p>#BFC1C3</p>
    <p>rgba(191, 193, 195, 1)</p>
    <p>hsla(210, 3%, 76%, 1)</p>
</div>


<!-- Grey 3 -->
<div class="palette__content">
    <span style="background-color:#DEE0E2;"></span>
    <p class="lbh-u-p--lede">grey-3</p>
    <p>#DEE0E2</p>
    <p>rgba(222, 224, 226, 1)</p>
    <p>hsla(210, 6%, 88%, 1)</p>
</div>


<!-- Grey 4 -->
<div class="palette__content">
    <span style="background-color:#F8F8F8;"></span>
    <p class="lbh-u-p--lede">grey-4</p>
    <p>#F8F8F8</p>
    <p>rgba(248, 248, 248, 1)</p>
    <p>hsla(0, 0%, 97%, 1)</p>
</div>