“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 supporting color palette is composed of lightest and darkest variations of the primary color palette. A broad supporting color palette adds nuance and depth to illustrations, data visualizations, and complex components.

How colors are used

Blacks and grays

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

  • $black: h1, h3, and h4 header text
  • $gray-darkest: h5 header text
  • $gray-dark: the text on disabled buttons
  • $gray: maps, as rules with custom headline styles on Revenue pages
  • $gray-lighter: primarily in flowcharts, and as an option for large background containers

Greens

Green represents land-ownership in maps, and data in charts. It also serves to add a bit of color to the site here and there, and helps make hierarchy more distinct when used as a rule with some headers.

  • $green-dark: complex bar charts
  • $green-state-hex: for maps only
  • $green-land: for maps only
  • $green-mid: for maps only

Blues

Blues do not feature heavily in the site design. They’re mainly reserved for links, buttons, and the county-level maps on state Explore pages.

  • $blue-dark: the text color over the $blue-cthru background color (on the filter panel for Federal Revenue by Company), to achieve sufficient color contrast
  • $blue-mid-dark: for maps only
  • $blue-mid: for maps only
  • $blue-cthru is semi-transparent, and used as the background color for filter panel overlays
  • $blue-light: for maps only
<!-- Black -->
<div class="pl-swatch">
    <div class="pl-swatch-color bg-black"></div>
    <div class="pl-label-primary">$black</div>
    <div class="pl-label-secondary">#1c2326</div>
    <div class="pl-icon-ok"></div>
    <div class="pl-label-secondary">Accessible</div>
</div>

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

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

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

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

<!-- Green Dark -->
<div class="pl-swatch">
    <div class="pl-swatch-color bg-green-dark"></div>
    <div class="pl-label-primary">$green-dark</div>
    <div class="pl-label-secondary">#2f4d26</div>
    <div class="pl-icon-ok"></div>
    <div class="pl-label-secondary">Accessible</div>
</div>

<!-- Green State -->
<div class="pl-swatch">
    <div class="pl-swatch-color bg-green-state-hex"></div>
    <div class="pl-label-primary">$green-state-hex</div>
    <div class="pl-label-secondary">#46653c</div>
    <div class="pl-icon-ok"></div>
    <div class="pl-label-secondary">Accessible</div>
</div>

<!-- Green Land -->
<div class="pl-swatch">
    <div class="pl-swatch-color bg-green-land"></div>
    <div class="pl-label-primary">$green-land</div>
    <div class="pl-label-secondary">#69995a</div>
    <div class="pl-icon-no"></div>
    <div class="pl-label-secondary">Not accessible</div>
</div>

<!-- Green Mid -->
<div class="pl-swatch">
    <div class="pl-swatch-color bg-green-mid"></div>
    <div class="pl-label-primary">$green-mid</div>
    <div class="pl-label-secondary">#9dbd92</div>
    <div class="pl-icon-no"></div>
    <div class="pl-label-secondary">Not accessible</div>
</div>

<!-- Blue Dark -->
<div class="pl-swatch">
    <div class="pl-swatch-color bg-blue-dark"></div>
    <div class="pl-label-primary">$blue-dark</div>
    <div class="pl-label-secondary">#086996</div>
    <div class="pl-icon-ok"></div>
    <div class="pl-label-secondary">Accessible</div>
</div>

<!-- Blue Mid Dark -->
<div class="pl-swatch">
    <div class="pl-swatch-color bg-blue-mid-dark"></div>
    <div class="pl-label-primary">$blue-mid-dark</div>
    <div class="pl-label-secondary">#3d95bd</div>
    <div class="pl-icon-no"></div>
    <div class="pl-label-secondary">Not accessible</div>
</div>

<!-- Blue Mid -->
<div class="pl-swatch">
    <div class="pl-swatch-color bg-blue-mid"></div>
    <div class="pl-label-primary">$blue-mid</div>
    <div class="pl-label-secondary">#79bbda</div>
    <div class="pl-icon-no"></div>
    <div class="pl-label-secondary">Not accessible</div>
</div>

<!-- Blue Cthru -->
<div class="pl-swatch">
    <div class="pl-swatch-color bg-blue-cthru"></div>
    <div class="pl-label-primary">$blue-cthru</div>
    <div class="pl-label-secondary">rgba(198, 233, 255, 0.93)</div>
    <div class="pl-icon-no"></div>
    <div class="pl-label-secondary">Not accessible</div>
</div>

<!-- Blue Light -->
<div class="pl-swatch">
    <div class="pl-swatch-color bg-blue-light"></div>
    <div class="pl-label-primary">$blue-light</div>
    <div class="pl-label-secondary">#dcf4fd</div>
    <div class="pl-icon-no"></div>
    <div class="pl-label-secondary">Not accessible</div>
</div>

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

/* Gray Darkest */
{
  "className": "bg-gray-darkest",
  "colorName": "gray-darkest",
  "colorCode": "#435159",
  "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 Lighter */
{
  "className": "bg-gray-lighter",
  "colorName": "gray-lighter",
  "colorCode": "#ebf3f7",
  "accessible": null
}

/* Green Dark */
{
  "className": "bg-green-dark",
  "colorName": "green-dark",
  "colorCode": "#2f4d26",
  "accessible": true
}

/* Green State */
{
  "className": "bg-green-state-hex",
  "colorName": "green-state-hex",
  "colorCode": "#46653c",
  "accessible": true
}

/* Green Land */
{
  "className": "bg-green-land",
  "colorName": "green-land",
  "colorCode": "#69995a",
  "accessible": null
}

/* Green Mid */
{
  "className": "bg-green-mid",
  "colorName": "green-mid",
  "colorCode": "#9dbd92",
  "accessible": null
}

/* Blue Dark */
{
  "className": "bg-blue-dark",
  "colorName": "blue-dark",
  "colorCode": "#086996",
  "accessible": true
}

/* Blue Mid Dark */
{
  "className": "bg-blue-mid-dark",
  "colorName": "blue-mid-dark",
  "colorCode": "#3d95bd",
  "accessible": null
}

/* Blue Mid */
{
  "className": "bg-blue-mid",
  "colorName": "blue-mid",
  "colorCode": "#79bbda",
  "accessible": null
}

/* Blue Cthru */
{
  "className": "bg-blue-cthru",
  "colorName": "blue-cthru",
  "colorCode": "rgba(198, 233, 255, 0.93)",
  "accessible": null
}

/* Blue Light */
{
  "className": "bg-blue-light",
  "colorName": "blue-light",
  "colorCode": "#dcf4fd",
  "accessible": null
}