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
• Criticality color scale

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.

Copy#053a8d

Copy#0b9dce

Copy#098945

Copy#83bf1c

Copy#ec000b

Copy#ff872e

Copy#7b45b5

Copy#d883fc

Copy#a45700

Copy#ffbf00

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>