Developer Basic rules
- Use color thoughtfully and don't make colors too bright without a reason. Keep in mind the visual hierarchy.
- If there are several widgets on a page that mention the same entity, then use the same color for the entity in all widgets on the same page.
- Keep in mind that green and red are often associated with good and bad, growth and decline.
TIP
We recommend using red carefully. It is usually used for destructive actions and invalid states.
Chart tokens
You can find all tokens for charts in the tokens list. They all have chart in their token name.
Tokens for text and additional information
| Token | Usage |
|---|---|
--text-primary | Basic text information |
--text-secondary | Additional text information |
--chart-grid-line | The X-axis and the accent lines on the grid when, if needed |
--chart-grid-x-axis | Additional guide lines |
Colors usage
There are two ways of coloring your data with our palette.
Categorical order
This way helps to choose colors with a predefined order and contrast for your data. Use chart tokens from the semantic tokens list or tokens from the base palette in the base tokens list.
Basic pack
Second pack
Third pack
Other data
Use --chart-palette-order-other-data token to indicate voids, missing or some other data.
Sequental order
This way helps to color your data in a monochromatic way. In this case use tokens from the base palette in the tokens list.
Blue
Green
Salad
Orange
Yellow
Red
Pink
Violet
Gray
Need more colors?
TIP
The recommended maximum number of colors on a chart is 30.
30 and more colors are for the really complex cases where you need a large number of colors that will be set for the data by the system.
To make a usable palette for this case first use tokens from the base palette with a hue of 300, then 200, then 400 and repeat this steps until you get the desired number of colors.