Black and grays

Blacks and grays

Cool grays are used widely in the site, predominantly for large background fills.

‘“Accessible” colors can be used as text fills over white backgrounds, since the contrast ratio between the color and white is at least 4.5:1.’

<!-- Black -->
<div>
    <div class="swatch">
        <div class="swatch-color bg-black"></div>
        <div class="label-primary">$black</div>
        <div class="label-secondary">#1c2326</div>
        <div class="icon-ok"></div>
        <div class="label-secondary">Accessible</div>
    </div>
</div>

<!-- Black Light -->
<div>
    <div class="swatch">
        <div class="swatch-color bg-black-light"></div>
        <div class="label-primary">$black-light</div>
        <div class="label-secondary">#323c42</div>
        <div class="icon-ok"></div>
        <div class="label-secondary">Accessible</div>
    </div>
</div>

<!-- Gray Darkest -->
<div>
    <div class="swatch">
        <div class="swatch-color bg-gray-darkest"></div>
        <div class="label-primary">$gray-darkest</div>
        <div class="label-secondary">#435159</div>
        <div class="icon-ok"></div>
        <div class="label-secondary">Accessible</div>
    </div>
</div>

<!-- Gray Darker -->
<div>
    <div class="swatch">
        <div class="swatch-color bg-gray-darker"></div>
        <div class="label-primary">$gray-darker</div>
        <div class="label-secondary">#5c737f</div>
        <div class="icon-ok"></div>
        <div class="label-secondary">Accessible</div>
    </div>
</div>

<!-- Gray Dark -->
<div>
    <div class="swatch">
        <div class="swatch-color bg-gray-dark"></div>
        <div class="label-primary">$gray-dark</div>
        <div class="label-secondary">#768d99</div>
        <div class="icon-no"></div>
        <div class="label-secondary">Not accessible</div>
    </div>
</div>

<!-- Gray -->
<div>
    <div class="swatch">
        <div class="swatch-color bg-gray"></div>
        <div class="label-primary">$gray</div>
        <div class="label-secondary">#a7bcc7</div>
        <div class="icon-no"></div>
        <div class="label-secondary">Not accessible</div>
    </div>
</div>

<!-- Gray Light -->
<div>
    <div class="swatch">
        <div class="swatch-color bg-gray-light"></div>
        <div class="label-primary">$gray-light</div>
        <div class="label-secondary">#d3dfe6</div>
        <div class="icon-no"></div>
        <div class="label-secondary">Not accessible</div>
    </div>
</div>

<!-- Gray Lighter -->
<div>
    <div class="swatch">
        <div class="swatch-color bg-gray-lighter"></div>
        <div class="label-primary">$gray-lighter</div>
        <div class="label-secondary">#ebf3f7</div>
        <div class="icon-no"></div>
        <div class="label-secondary">Not accessible</div>
    </div>
</div>

<!-- Gray Pale -->
<div>
    <div class="swatch">
        <div class="swatch-color bg-gray-pale"></div>
        <div class="label-primary">$gray-pale</div>
        <div class="label-secondary">#f0f6fa</div>
        <div class="icon-no"></div>
        <div class="label-secondary">Not accessible</div>
    </div>
</div>

<!-- White -->
<div>
    <div class="swatch">
        <div class="swatch-color bg-white"></div>
        <div class="label-primary">$white</div>
        <div class="label-secondary">#ffffff</div>
        <div class="icon-no"></div>
        <div class="label-secondary">Not accessible</div>
    </div>
</div>

<div>
  <div class="swatch">
    <div class="swatch-color {{ className }}"></div>
    <div class="label-primary">${{ colorName }}</div>
    <div class="label-secondary">{{ colorCode }}</div>
    {{#if accessible }}
      <div class="icon-ok"></div>
      <div class="label-secondary">Accessible</div>
    {{else}}
      <div class="icon-no"></div>
      <div class="label-secondary">Not accessible</div>
    {{/if}}
  </div>
</div>
/* Black */
{
  "className": "bg-black",
  "colorName": "black",
  "colorCode": "#1c2326",
  "accessible": true
}

/* Black Light */
{
  "className": "bg-black-light",
  "colorName": "black-light",
  "colorCode": "#323c42",
  "accessible": true
}

/* Gray Darkest */
{
  "className": "bg-gray-darkest",
  "colorName": "gray-darkest",
  "colorCode": "#435159",
  "accessible": true
}

/* Gray Darker */
{
  "className": "bg-gray-darker",
  "colorName": "gray-darker",
  "colorCode": "#5c737f",
  "accessible": true
}

/* Gray Dark */
{
  "className": "bg-gray-dark",
  "colorName": "gray-dark",
  "colorCode": "#768d99",
  "accessible": null
}

/* Gray */
{
  "className": "bg-gray",
  "colorName": "gray",
  "colorCode": "#a7bcc7",
  "accessible": null
}

/* Gray Light */
{
  "className": "bg-gray-light",
  "colorName": "gray-light",
  "colorCode": "#d3dfe6",
  "accessible": null
}

/* Gray Lighter */
{
  "className": "bg-gray-lighter",
  "colorName": "gray-lighter",
  "colorCode": "#ebf3f7",
  "accessible": null
}

/* Gray Pale */
{
  "className": "bg-gray-pale",
  "colorName": "gray-pale",
  "colorCode": "#f0f6fa",
  "accessible": null
}

/* White */
{
  "className": "bg-white",
  "colorName": "white",
  "colorCode": "#ffffff",
  "accessible": null
}