Colors

The following demonstrates what variables and classes are available for use of color. Note that any class can be turned into a foreground color class by removing the bg- part. Hover over any swatch to see it’s class.

Theme colors

All these colors are managed in the $theme SASS variable. The brand-specific primary and secondary greens are the following:

Alternatives and other colors available to follow the pallet if needed:

Grays

All these colors are managed in the $grays SASS variable.

Black and white

Black and white are stored as vairables, $color-black and $color-white. The black is a specific off-black color.

Data colors

All these colors are managed in the $colors-data SASS variable, but note that that each one is a list of colors to be possibly used as a ramp. Only including background versions for brevity, forground versions exist.

Considering using Color Oracle to test how colorblind uses might see colors used for data. For alternative sets, look at Color Brewer.

.color-bg-data-reds-*

.color-bg-data-oranges-*

.color-bg-data-blues-*

.color-bg-data-greens-*

.color-bg-data-grays-*

.color-bg-data-light-blue-*

.color-bg-data-categories-*

.color-bg-data-divergent-* Note that this set is colorblind safe.

.color-bg-data-political-parties-*

Political colors

Stored in the $colors-political variable.