Color
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.
Neutral
- •0
hsl(198, 0%, 100%) - •50
hsl(198, 0%, 98%) - 100
hsl(198, 0%, 95%) - •200
hsl(198, 0%, 91%) - 300
hsl(198, 0%, 87%) - •400
hsl(198, 0%, 80%) - •500
hsl(198, 0%, 70%) - •600
hsl(198, 0%, 55%) - •700
hsl(198, 0%, 40%) - 800
hsl(198, 0%, 27%) - •900
hsl(198, 0%, 20%) - •1000
hsl(198, 0%, 0%)
Action
- 50
hsl(198, 83%, 94%) - 100
hsl(198, 81%, 88%) - 200
hsl(198, 78%, 78%) - •300
hsl(198, 69%, 69%) - 400
hsl(198, 66%, 57%) - 500
hsl(198, 80%, 46%) - •600
hsl(198, 100%, 32%) - •700
hsl(198, 100%, 28%) - •800
hsl(198, 100%, 24%) - 900
hsl(198, 100%, 21%) - •1000
hsl(198, 100%, 15%)
Secondary Action
- 50
hsl(282, 100%, 95%) - 100
hsl(282, 59%, 87%) - 200
hsl(282, 51%, 78%) - 300
hsl(282, 45%, 70%) - 400
hsl(282, 44%, 62%) - •500
hsl(282, 43%, 54%) - 600
hsl(282, 50%, 45%) - 700
hsl(282, 69%, 37%) - 800
hsl(282, 100%, 29%) - 900
hsl(282, 100%, 22%) - •1000
hsl(282, 100%, 14%)
Danger
- 50
hsl(9, 100%, 97%) - •100
hsl(9, 95%, 92%) - 200
hsl(9, 91%, 86%) - 300
hsl(9, 83%, 76%) - 400
hsl(9, 85%, 67%) - 500
hsl(9, 88%, 61%) - 600
hsl(9, 92%, 50%) - •700
hsl(9, 100%, 43%) - 800
hsl(9, 100%, 38%) - 900
hsl(9, 100%, 30%) - 1000
hsl(9, 100%, 20%)
Warning
- 50
hsl(48, 100%, 95%) - •100
hsl(48, 100%, 89%) - 200
hsl(48, 100%, 83%) - •300
hsl(48, 98%, 72%) - 400
hsl(48, 94%, 57%) - •500
hsl(48, 95%, 48%) - 600
hsl(46, 100%, 45%) - 700
hsl(43, 100%, 42%) - 800
hsl(41, 100%, 36%) - 900
hsl(38, 100%, 28%) - 1000
hsl(31, 100%, 19%)
Success
- 50
hsl(93, 52%, 88%) - 100
hsl(93, 58%, 75%) - 200
hsl(93, 76%, 49%) - 300
hsl(93, 77%, 44%) - 400
hsl(93, 79%, 40%) - •500
hsl(93, 67%, 38%) - 600
hsl(93, 85%, 32%) - 700
hsl(93, 100%, 26%) - 800
hsl(93, 100%, 21%) - 900
hsl(93, 100%, 16%) - •1000
hsl(93, 100%, 13%)
Functional Colors
Clarity components use a set of colors to convey certain functions and meanings. These colors have been vetted and tested to meet the accessibility standard for low vision.
Light Theme Functional Colors
Backgrounds and borders
- 0
hsl(198, 0%, 100%) - 50
hsl(198, 0%, 98%) - 200
hsl(198, 0%, 91%) - 400
hsl(198, 0%, 80%) - 500
hsl(198, 0%, 70%) - 600
hsl(198, 0%, 55%) - 700
hsl(198, 0%, 40%)
Row hover, selection
- 200
hsl(198, 0%, 91%) - n/a
hsl(201, 29%, 88%)
Typography
- 700
hsl(198, 0%, 40%) - 900
hsl(198, 0%, 20%) - 1000
hsl(198, 0%, 0%)
Buttons and app-level alerts
- 600
hsl(198, 100%, 32%) - 700
hsl(9, 100%, 43%) - 500
hsl(93, 67%, 38%) - 700
hsl(93, 100%, 26%) - 400
hsl(198, 0%, 80%)
Standard alerts
- 50
hsl(198, 83%, 94%) - 50
hsl(93, 52%, 88%) - 100
hsl(9, 95%, 92%) - 100
hsl(48, 100%, 89%)
Headers
- 900
hsl(198, 0%, 20%) - 1000
hsl(282, 100%, 14%) - 700
hsl(198, 100%, 28%) - 800
hsl(198, 100%, 24%) - 1000
hsl(198, 100%, 15%)
Labels & badges
- 600
hsl(198, 0%, 55%) - 50
hsl(198, 83%, 94%) - 300
hsl(198, 69%, 69%) - 600
hsl(198, 100%, 32%) - 800
hsl(198, 100%, 24%) - 500
hsl(282, 43%, 54%) - 100
hsl(9, 95%, 92%) - 700
hsl(9, 100%, 43%) - 100
hsl(48, 100%, 89%) - 300
hsl(48, 98%, 72%) - 500
hsl(48, 95%, 48%) - 50
hsl(93, 52%, 88%) - 700
hsl(93, 100%, 26%)
Dark Theme Functional Colors
Backgrounds and borders
hsl(203, 30%, 8%) hsl(201, 30%, 13%) hsl(201, 30%, 15%) hsl(198, 28%, 18%) hsl(208, 16%, 34%) hsl(208, 14%, 39%) hsl(211, 10%, 47%)
Row hover, selection
hsl(201, 31%, 23%) hsl(203, 32%, 29%)
Typography
hsl(204, 10%, 60%) hsl(203, 16%, 72%) hsl(210, 16%, 93%) hsl(0, 0%, 100%) hsl(0, 0%, 0%)
Buttons and app-level alerts
hsl(198, 65%, 57%) hsl(3, 90%, 62%) hsl(49, 98%, 51%) hsl(92, 79%, 40%) hsl(211, 10%, 47%)
Standard alerts
hsl(198, 79%, 28%) hsl(357, 50%, 35%) hsl(122, 45%, 23%) hsl(47, 87%, 27%)
Headers
hsl(214, 20%, 31%) hsl(195, 65%, 24%) hsl(206, 63%, 27%) hsl(315, 27%, 28%) hsl(233, 26%, 33%) hsl(0, 0%, 0%)
Labels & badges
hsl(198, 79%, 28%) hsl(357, 50%, 35%) hsl(122, 45%, 23%) hsl(47, 87%, 27%) hsl(0, 0%, 45%) hsl(281, 44%, 62%) hsl(201, 100%, 36%) hsl(31, 100%, 60%) hsl(194, 57%, 71%)
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.