Data Visualization
We extend the base color palette and provide a data visualization palette as system tokens. We also define system tokens related to charts, such as legends and ticks.
Last updated 7/17/2025
Mark
Single (monochromatic)
This is the monochromatic palette used for chart marks. When the number of data series is three or fewer, use even-numbered colors.
sd.system.color.chart.mark.primary
| 01 | 02 | 03 | 04 | 05 | 06 | |
|---|---|---|---|---|---|---|
| Primary/Konjo | ||||||
| Primary/Kurikawa | ||||||
| Primary/Tsutsuji | ||||||
| Primary/Sumire | ||||||
| Primary/Asagi |
Semantic
Use the Semantic palette when the data conveys specific meanings or intents, such as success, error, or warning. If the data is nested, use colors according to hierarchy.
sd.system.color.chart.mark
| 01 | 02 | 03 | 04 | 05 | 06 | |
|---|---|---|---|---|---|---|
| Positive | ||||||
| Negative | ||||||
| Notice |
Multi (multi-hue)
This is the multi-hue palette used for chart marks. Use the colors in palette order so each color can be individually distinguished.
sd.system.color.chart.mark.multi
| 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | |
|---|---|---|---|---|---|---|---|---|---|---|
| Multi |
Component
Use this palette for non-mark elements within charts, such as ticks and labels.
sd.system.color.chart.component
| chartSurface | |
|---|---|
| onChartSurface | |
| onMarkLabel | |
| inverseOnMarkLabel | |
| scalemark | |
| threshold |