Developer Basic principles
- Use colors thoughtfully and avoid excessive brightness without a valid reason, always considering the visual hierarchy.
- When multiple widgets on a page reference the same entity, ensure consistent color usage for that entity across all widgets on the page.
- Be mindful that green and red are often associated with positive and negative connotations, such as growth and decline.
TIP
We recommend using red carefully, as it is typically reserved for destructive actions and invalid states.
Chart tokens
For chart-related elements, refer to the tokens list containing tokens with chart in their names.
Tokens for text and additional information
| Token | Usage |
|---|---|
--text-primary | Primary text information |
--text-secondary | Additional text information |
--chart-grid-line | Grid lines for the X-axis and accent lines, if necessary |
--chart-grid-x-axis | Additional guide lines for X-axis |
Colors usage
There are two approaches for applying colors from our palette:
Categorical order
This method assists in selecting colors in a predefined order with suitable 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
Total amount
Use --intergalactic-chart-palette-order-total-amount token to indicate total values.
Other data
Use --intergalactic-chart-palette-order-other-data token to indicate voids, missing or some other data.
Null and n/a data
Use --intergalactic-chart-palette-order-null token to indicate null or not available data when applicable (for example, in Donut chart).
Sequental order
This method 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.
Using 30 or more colors is reserved for exceptionally complex scenarios when a large number of colors must be assigned by the system for data representation.
To create a usable palette for such situations, begin by using tokens from the base palette with a hue of 300, followed by 200, and then 400. Continue this process until you achieve the desired quantity of colors.
Accessibility
To make charts more visually accessible, you can fill them with patterns (patterns property in our D3 chart components). Refer to D3 chart's accessibility section, for more details on usage of the feature.