Primary palette

“Accessible” colors can be used in combination with white text or backgrounds, since the contrast ratio between the color and white is at least 4.5:1, the WCAG 2.0 level AA compliance ratio for color contrast.

The primary color palette collects the set of colors that are most recognized and closely associated with the visual identity of the NRRD website. The palette draws direct inspiration from the natural environment and different forms of natural resources that the site reports about. Large areas of color always use unsaturated colors. The highly saturated green and blue are primarily used as accents in small spaces, which keeps the overall tone feeling light and associated with transparency.

How colors are used

Blacks and grays

  • $black-light: paragraph text, h2-bar and h3-bar header text, and the footer background color
  • $gray-darker: h2 header text, illustrations, and as the background color for selectors
  • $gray-light: tertiary and disabled buttons, background color for secondary compartments within hero ribbons, and as the color of unselected bars in charts
  • $gray-pale: the background color for large background containers (like hero ribbons), and primary select fields
  • $white: the primary background color on the site, and as the text color over dark backgrounds

Greens

  • $green: background color for year selectors, and as the color of selected/active bars and text in charts
  • $green-light: a rule color with h2-bar and h3-bar header text

Blues

  • $blue: primary buttons and links
<!-- Black Light -->
<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>

<!-- Green -->
<div class="swatch">
    <div class="swatch-color bg-green"></div>
    <div class="label-primary">$green</div>
    <div class="label-secondary">#587f4c</div>
    <div class="icon-ok"></div>
    <div class="label-secondary">Accessible</div>
</div>

<!-- Blue -->
<div class="swatch">
    <div class="swatch-color bg-blue"></div>
    <div class="label-primary">$blue</div>
    <div class="label-secondary">#1478a6</div>
    <div class="icon-ok"></div>
    <div class="label-secondary">Accessible</div>
</div>

<!-- Gray Pale -->
<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>

<!-- White -->
<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>

<!-- Gray Darker -->
<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>

<!-- Green Light -->
<div class="swatch">
    <div class="swatch-color bg-green-light"></div>
    <div class="label-primary">$green-light</div>
    <div class="label-secondary">#cde3c3</div>
    <div class="icon-no"></div>
    <div class="label-secondary">Not accessible</div>
</div>

<!-- Gray Light -->
<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 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>
/* Black Light */
{
  "className": "bg-black-light",
  "colorName": "black-light",
  "colorCode": "#323c42",
  "accessible": true
}

/* Green */
{
  "className": "bg-green",
  "colorName": "green",
  "colorCode": "#587f4c",
  "accessible": true
}

/* Blue */
{
  "className": "bg-blue",
  "colorName": "blue",
  "colorCode": "#1478a6",
  "accessible": true
}

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

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

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

/* Green Light */
{
  "className": "bg-green-light",
  "colorName": "green-light",
  "colorCode": "#cde3c3",
  "accessible": null
}

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