Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About
  • Foundation
    • Overview
  • Visual foundation
    • Colors
    • Content density
    • Data visualization colors
    • Design tokens
    • Iconography
    • Layout
    • Motion
    • Spacing
    • Theming
    • Typography
    • Visual context
    • Visual modes
    • Visual style
  • Core principles
    • Accessibility
    • Responsive design
  1. Cloudscape Design System
    • Foundation
    • Visual foundation: Data visualization colors

    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
      • Generic categorical palette
      • Threshold colors
      • Building custom palettes
      • General guidelines
      • Accessibility guidelines
      • Implementation

      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-1Yes
          2
          charts-pink-500
          #c33d69
          charts-pink-500
          #e07f9d
          $color-charts-palette-categorical-2Yes
          3
          charts-teal-300
          #2ea597
          charts-teal-300
          #018977
          $color-charts-palette-categorical-3Yes
          4
          charts-purple-500
          #8456ce
          charts-purple-500
          #b088f5
          $color-charts-palette-categorical-4Yes
          5
          charts-orange-300
          #e07941
          charts-orange-300
          #c55305
          $color-charts-palette-categorical-5Yes
          6
          charts-blue-2-600
          #3759ce
          charts-blue-2-600
          #8ea9ff
          $color-charts-palette-categorical-6Yes
          7
          charts-pink-800
          #962249
          charts-pink-800
          #ffb0c8
          $color-charts-palette-categorical-7Yes
          8
          charts-teal-600
          #096f64
          charts-teal-600
          #40bfa9
          $color-charts-palette-categorical-8Yes

          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