Color scales

Color scales have been developed to replace classification labels in cases where space is limited to accommodate large text labels.

Categorical color scale

The categorical color scale is an ordinal scale of 10 discrete colors, designed to be easily distinguishable between each other. A color scale helper element - either a color-square or a color-dot - is assigned one of the discrete colors, by applying a class color-categorical-{value} to a helper, where value is a number 1-10. The color HEX codes below are displayed for convenience.


In the example below, on the left the color scale is applied to a group of square helper elements and on the right to a group of a dot helper elements.

Code output
HTML Markup
Copy<i class="color-square color-categorical-1"></i>
<i class="color-square color-categorical-2"></i>
<i class="color-square color-categorical-3"></i>
<i class="color-square color-categorical-4"></i>
<i class="color-square color-categorical-5"></i>
<i class="color-square color-categorical-6"></i>
<i class="color-square color-categorical-7"></i>
<i class="color-square color-categorical-8"></i>
<i class="color-square color-categorical-9"></i>
<i class="color-square color-categorical-10"></i>

<i class="color-dot color-categorical-1"></i>
<i class="color-dot color-categorical-2"></i>
<i class="color-dot color-categorical-3"></i>
<i class="color-dot color-categorical-4"></i>
<i class="color-dot color-categorical-5"></i>
<i class="color-dot color-categorical-6"></i>
<i class="color-dot color-categorical-7"></i>
<i class="color-dot color-categorical-8"></i>
<i class="color-dot color-categorical-9"></i>
<i class="color-dot color-categorical-10"></i>

Criticality color scale

The criticality color scale consists of 5 different contextual colors ranging from green to red, designed to replace severity or urgency based text labels.

Code output
HTML Markup
Copy<i class="color-square color-criticality-1"></i>
<i class="color-square color-criticality-2"></i>
<i class="color-square color-criticality-3"></i>
<i class="color-square color-criticality-4"></i>
<i class="color-square color-criticality-5"></i>

<i class="color-dot color-criticality-1"></i>
<i class="color-dot color-criticality-2"></i>
<i class="color-dot color-criticality-3"></i>
<i class="color-dot color-criticality-4"></i>
<i class="color-dot color-criticality-5"></i>