This version of Clarity is no longer supported. We recommend that you update to the latest version of Clarity.
The Clarity color palette is a full spectrum of bold hues and neutrals to meet all your design needs.

The Clarity Color Palette

The Clarity color palette is aligned with color use in web applications and support for accessibility. The colors below constitute the expanded color palette for Clarity. Text colors displayed in light or dark tints represent Clarity's recommended accessible pairing with the color.

Base, Primary and Secondary Colors

The bulleted color swatches indicate colors that are part of the Clarity base color palette. You will find these colors in use throughout Clarity's components and design recommendations.

The large color swatches represent Clarity primary colors, recommended for use as the main color for your design. The remaining colors are considered secondary. They may be used for charts, graphs, illustrations and other areas that call for color accent.

  • Red
    Copied! #F52F22
  • A
    Copied! #A32100
  • A
    Copied! #C92100
  • A
    Copied! #E12200
  • A
    Copied! #F52F22
  • A
    Copied! #F54F47
  • A
    Copied! #F76F6C
  • A
    Copied! #F89997
  • A
    Copied! #F8B7B6
  • A
    Copied! #F5DBD9
  • A
    Copied! #FFF0EE
  • Pink
    Copied! #F1428A
  • A
    Copied! #9B0D54
  • A
    Copied! #B0105B
  • A
    Copied! #C41261
  • A
    Copied! #D91468
  • A
    Copied! #ED186F
  • A
    Copied! #F1428A
  • A
    Copied! #F46CA5
  • A
    Copied! #F897BF
  • A
    Copied! #FBC1DA
  • A
    Copied! #FFEBF5
  • Purple
    Copied! #781DA0
  • A
    Copied! #4D007A
  • A
    Copied! #660092
  • A
    Copied! #781DA0
  • A
    Copied! #8939AD
  • A
    Copied! #9B56BB
  • A
    Copied! #AD73C8
  • A
    Copied! #BE90D6
  • A
    Copied! #D0ACE4
  • A
    Copied! #E1C9F1
  • A
    Copied! #F3E6FF
  • Ultramarine
    Copied! #343DAC
  • A
    Copied! #0F1E82
  • A
    Copied! #1A23A0
  • A
    Copied! #343DAC
  • A
    Copied! #4E56B8
  • A
    Copied! #6870C4
  • A
    Copied! #838ACF
  • A
    Copied! #9DA3DB
  • A
    Copied! #B7BDE7
  • A
    Copied! #D1D6F3
  • A
    Copied! #EBF0FF
  • Blue
    Copied! #0065AB
  • A
    Copied! #003D79
  • A
    Copied! #004D8A
  • A
    Copied! #0065AB
  • A
    Copied! #0079B8
  • A
    Copied! #0095D3
  • A
    Copied! #49AFD9
  • A
    Copied! #89CBDF
  • A
    Copied! #A6D8E7
  • A
    Copied! #C5E5EF
  • A
    Copied! #E1F1F6
  • Cyan
    Copied! #00B7D6
  • A
    Copied! #004A70
  • A
    Copied! #005680
  • A
    Copied! #006690
  • A
    Copied! #0081A7
  • A
    Copied! #009CBF
  • A
    Copied! #00B7D6
  • A
    Copied! #36C9E1
  • A
    Copied! #6DDBEB
  • A
    Copied! #A3EDF6
  • A
    Copied! #CCFBFF
  • Teal
    Copied! #00968B
  • A
    Copied! #006668
  • A
    Copied! #007E7A
  • A
    Copied! #00968B
  • A
    Copied! #00AB9A
  • A
    Copied! #00BFA9
  • A
    Copied! #00D4B8
  • A
    Copied! #38DFC8
  • A
    Copied! #6FEAD9
  • A
    Copied! #A7F4E9
  • A
    Copied! #DEFFF9
  • Green
    Copied! #48960C
  • A
    Copied! #1D5100
  • A
    Copied! #266900
  • A A
    Copied! #318700
  • A
    Copied! #48960C
  • A
    Copied! #62A420
  • A
    Copied! #60B515
  • A
    Copied! #85C81A
  • A
    Copied! #AADB1E
  • A
    Copied! #C7E59C
  • A
    Copied! #DFF0D0
  • Yellow
    Copied! #FFDC0B
  • A
    Copied! #C47D00
  • A
    Copied! #D28F00
  • A
    Copied! #DFA100
  • A
    Copied! #EDB200
  • A
    Copied! #FAC400
  • A
    Copied! #FDD006
  • A
    Copied! #FFDC0B
  • A
    Copied! #FFE860
  • A
    Copied! #FEF3B5
  • A
    Copied! #FFFCE8
  • Orange
    Copied! #F57600
  • A
    Copied! #AA4500
  • A A
    Copied! #C25400
  • A
    Copied! #D36000
  • A
    Copied! #E46C00
  • A
    Copied! #F57600
  • A
    Copied! #FF8400
  • A
    Copied! #FF9C32
  • A
    Copied! #FFB565
  • A
    Copied! #FFCD97
  • A
    Copied! #FFE5C9
  • Red-orange
    Copied! #EE4A08
  • A
    Copied! #CD3517
  • A
    Copied! #DE400F
  • A
    Copied! #EE4A08
  • A
    Copied! #FF5500
  • A
    Copied! #FF681C
  • A
    Copied! #FF8142
  • A
    Copied! #FF9A69
  • A
    Copied! #FFB38F
  • A
    Copied! #FFCCB5
  • A
    Copied! #FFE5DC
  • Warm-grey
    Copied! #80746D
  • A
    Copied! #5B4D47
  • A
    Copied! #6C5F59
  • A A
    Copied! #80746D
  • A
    Copied! #948981
  • A
    Copied! #A89E95
  • A
    Copied! #BBB3A9
  • A
    Copied! #CFC8BD
  • A
    Copied! #E3DDD1
  • A
    Copied! #F4F1E6
  • A
    Copied! #FAF9F5
  • Neutral-grey
    Copied! #737373
  • A
    Copied! #313131
  • A
    Copied! #444444
  • A
    Copied! #565656
  • A
    Copied! #737373
  • A
    Copied! #9A9A9A
  • A
    Copied! #CCCCCC
  • A
    Copied! #DDDDDD
  • A
    Copied! #EEEEEE
  • A
    Copied! #F2F2F2
  • A
    Copied! #FAFAFA
  • Cool-grey
    Copied! #61717D
  • A
    Copied! #25333D
  • A
    Copied! #314351
  • A
    Copied! #495A67
  • A
    Copied! #61717D
  • A
    Copied! #798893
  • A
    Copied! #919FA8
  • A
    Copied! #A9B6BE
  • A
    Copied! #C1CDD4
  • A
    Copied! #D9E4EA
  • A
    Copied! #F3F6FA
  • A
    Copied! #000000
  • A
    Copied! #FFFFFF

Color Usage

Base Colors

Colors used in Clarity's components and design recommendations.

  • Neutral colors are for text and backgrounds.
  • Action colors are for clickable items, such as buttons and links. Action Blue is reserved for buttons and links.
  • Stoplight colors are for indicating error conditions, warnings, and successes. Significant colors include: Stoplight Green for positive actions; Stoplight Red for warnings and errors.

Choosing Colors

Text Contrast

Each color swatch in the palette is labeled with a black or white letter A to indicate its accessibility on the background color. Other text colors should be tested for contrast using an online contrast checker to make sure it passes the WCAG AA requirement for accessibility.

Charting Colors

The large secondary palette allows for distinguishable markers in charts and graphs. With charts, it’s important to choose colors that have clear contrast for easy readability. The more colors that are used, the harder it is to distinguish each marker. For this reason, we recommend a maximum of six colors per chart.

Colorblind Accessibility

It’s a good idea to test the color scheme you plan to use with a colorblind simulation app, such as Color Oracle. Alternatively, Adobe Photoshop and Illustrator come with a colorblind proofing view. You can use the simulation to adjust your color combinations to be accessible. In the example below, the image on right simulates how a person with colorblindness (Deuteranopia) would see the image on the left.

Normal vision
Colorblind simulation

Some examples of color pairs that are difficult to distinguish for those with colorblindness:

difficult color pairs for colorblindness

If these combinations can’t be avoided, leverage use of light and dark values. For instance, Red and green both appear as brown to someone with red-green colorblindness. But a light green paired with a dark red would be distinguishable in value.

Do
Do
Don't
Don't

Using light and dark values also helps in showing a clear division between fields. Follow a pattern of alternating placement of light and dark colors. A simple way to ensure sufficient contrast is to use a palette that is monochromatic.

Do
Do
Don't
Don't

Create contrast by using a range of light and dark values.

Use a palette with colors of similar values and saturation levels.

Basic Tips

Avoid the temptation to use color as decoration. Colors should be used meaningfully to support the purpose of the chart.

  • A monochromatic palette is a great place to start. It ensures contrast in values and doesn’t distract the user with a clashing color combination. If more colors are needed add a neutral or almost neutral scale.
  • When using multiple colors, select one as a main color, then choose some supporting colors-complementaries, analogous or neutrals.
  • Complementary combinations such as blue and orange or yellow and purple work well together aesthetically. Analogous colors - colors next to each other on the color wheel - such as blue and green also look nice.
  • Test your colors for accessibility with a colorblind simulator.
  • Test your text and background color for accessibility with an online contrast checker.
  • Avoid using your project’s primary color or Clarity base colors in charts or graphics, e.g., the blue bars in your bar chart should not be the same blue as the primary buttons.
  • Optional: Choose a palette from the color scheme examples.

Color Scheme Examples for Charts

These color schemes are designed to address contrast and colorblind accessibility. Feel free to use them just as they are or as a starting point for a customized palette.

Click color to display hex number

Monochrome + neutral
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Multicolor
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

Charting Example

Charting Example