Skip to content

Color palette

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.


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

Tokens for text and additional information
--text-primaryPrimary text information
--text-secondaryAdditional text information
--chart-grid-lineGrid lines for the X-axis and accent lines, if necessary
--chart-grid-x-axisAdditional 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.










Need more colors?


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.


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.

Released under the MIT License.

Released under the MIT License.