- Use color to display shapes, encode data, or identify categories.
- Make sure the color contrast ratios meet accessibility guidelines. Check the ratios using the contrast checker tool.
- Use a limited color palette when possible and select colours purposefully.
Primary
- Use green for an active state, for positive values, and success.
- Use white for the primary text color on a black background.
- Use black for the primary background color.
Background
Black is the preferred background color but depending on the page context, you can use grays or whites.
Secondary
- Dark background
Frame 76
- Light background
Frame 77
- Use to compare variables when multiple colors represent data.
- Use when data variables have distinct labels and no natural order.
- Do not use brilliant green because it could indicate a preference for a specific category.
Tertiary
- Dark background
Frame 78
- Light background
Frame 79
- Use to increase color contrast and legibility when comparing variables.
- Use when data variables have distinct labels and no natural order.
- Do not use brilliant green because it could indicate a preference for a specific category.
Sequential
- Dark background
Frame 81
- Age group example
Frame 80
- Light background
Frame 82
- Age group example
Frame 83
- Gradually assigns colors to values based on lightness in single or multiple hues.
- Use for numeric variables or variables with a natural order.
Diverging
- Dark background
Frame 87
- Numerical example
Frame 88
- Light example
Frame 84
- Numerical example
Frame 85
Frame 85
- 2 sequential palettes with a shared endpoint.
- Use for numeric variables with a significant center value.
Gray
Frame 86
- Use for neutrality, empty states, or empty space.
- Use to show inactive data, or combine with brilliant green to highlight important data.
Semantic
Frame 861
Use sparingly for danger or negative facts, ideas, and data.
Sources: