Data visualization colors
Color can be used as a powerful element to augment a chart or other data visualization when applied with a clear sense of purpose.
On this page
Status and severity palette
The color palette for data that represents status or severity, and made to complement the status-related components such as flashbars and status indicators.
When applying the palette, pick the color values that represents the data best. Not all 7 values need to be used. It can be used to represent a specific set of resource status categories that are independent to each other, or to represent an ordered sequence of severity levels. The color tokens in this palette can be themed and are marked as themeable in the table below.
Example: A pie chart representing resources statuses and a donut chart representing 5 levels of severity.
Status and severity palette colors (7)
Light mode | Dark mode | Name | Description | Themeable |
|---|---|---|---|---|
charts-red-1000 #7d2105 | charts-red-300 #d63f38 | $color-charts-status-critical | Color to represent a critical error or a critically high-level of severity. For example: "Sev-1" | Yes |
charts-red-600 #ba2e0f | charts-red-500 #fe6e73 | $color-charts-status-high | Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: "Failed" or "Sev-2" | Yes |
charts-orange-400 #cc5f21 | charts-orange-600 #f89256 | $color-charts-status-medium | Color to represent a medium-level of severity. For example: "Sev-3" | Yes |
charts-yellow-300 #b2911c | charts-yellow-700 #dfb52c | $color-charts-status-low | Color to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4" | Yes |
charts-green-300 #67a353 | charts-green-500 #69ae34 | $color-charts-status-positive | Color to represent a positive status. *For example: "Success" or "Running" | Yes |
charts-blue-1-400 #3184c2 | charts-blue-1-500 #08aad2 | $color-charts-status-info | Color to represent an informational status. For example: "In-progress" or "Updating" | Yes |
grey-500 #7d8998 | grey-500 #7d8998 | $color-charts-status-neutral | Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5" | Yes |
Generic categorical palette
Categorical color palettes are best used to represent qualitative data with discrete categories or data series with no standard order. Use this palette for data that does not need a specific color association. It uses 5 hues (blue, pink, teal, purple, and orange), and has been ordered to be visually distinguishable to each other when used together. Follow the order of the palette to determine what colors to use based on the number of data series a chart includes.
The palette includes 50 values, ordered by a rotating pattern that allows for contrast between adjacent values. To automate this pattern, follow the development guidelines for building custom palettes. However, when designing a chart, be mindful of the total number of data series displayed at once. Having too many data series and colors will make it harder for users to read a chart and harder to recognize each color from one another. Consider displaying only up to 8 data series for a line chart or bar chart, and up to 5 data points for a pie chart or donut chart. The color tokens in this palette can be themed and are marked as themeable in the table below.
Example: A bar chart with three data series and a line chart with 5 data series.
Generic categorical palette colors (50)
Order | Light mode | Dark mode | Name | Themeable |
|---|---|---|---|---|
| 1 | charts-blue-2-300 #688ae8 | charts-blue-2-300 #486de8 | $color-charts-palette-categorical-1 | Yes |
| 2 | charts-pink-500 #c33d69 | charts-pink-500 #e07f9d | $color-charts-palette-categorical-2 | Yes |
| 3 | charts-teal-300 #2ea597 | charts-teal-300 #018977 | $color-charts-palette-categorical-3 | Yes |
| 4 | charts-purple-500 #8456ce | charts-purple-500 #b088f5 | $color-charts-palette-categorical-4 | Yes |
| 5 | charts-orange-300 #e07941 | charts-orange-300 #c55305 | $color-charts-palette-categorical-5 | Yes |
| 6 | charts-blue-2-600 #3759ce | charts-blue-2-600 #8ea9ff | $color-charts-palette-categorical-6 | Yes |
| 7 | charts-pink-800 #962249 | charts-pink-800 #ffb0c8 | $color-charts-palette-categorical-7 | Yes |
| 8 | charts-teal-600 #096f64 | charts-teal-600 #40bfa9 | $color-charts-palette-categorical-8 | Yes |
Threshold colors
Thresholds can be effective accent elements to provide additional context to a line chart or bar chart. Use the following colors for threshold lines based on what the threshold represents. They can be used on a chart with any color palette. The color tokens in this palette can be themed and are marked as themeable in the table below.
Example: A line chart with a threshold representing a positive metric and a mixed chart with a threshold representing a neutral metric.
Threshold colors (4)
Light mode | Dark mode | Name | Description | Themeable |
|---|---|---|---|---|
red-600 #d91515 | red-500 #eb6f6f | $color-charts-threshold-negative | The color to represent a threshold with a negative outcome. For example: A maximum limit | Yes |
green-600 #037f0c | green-500 #29ad32 | $color-charts-threshold-positive | The color to represent a threshold with a positive outcome. For example: A designated pass rate | Yes |
blue-600 |