Use color consistently in charts while preserving meaning through labels, shapes, and readable contrast.
Chart color can identify a series, highlight an observation, or show a meaningful progression. Define that purpose before assigning colors. A visually varied palette is not necessarily understandable or accessible.
Liquidify supplies semantic interface colors and system color tokens. It does not supply a validated categorical, sequential, or diverging chart palette. Choosing a chart palette and testing its encodings remain application responsibilities.
Use the same series name and visual treatment wherever the same data appears. If a dashboard and its detail view represent the same series, preserve that relationship when people move between them.
Distinguish category identity from ordered magnitude. Different categories need recognizable identities; a progression needs an understandable order. Do not use a stronger color to imply a larger value unless that is the intended encoding and the legend explains it.
Reserve warning or destructive meanings for data that actually carries that meaning. A red series is not automatically a problem, but readers may interpret it that way if the rest of the interface uses red for errors.
Pair series colors with direct labels, distinct point shapes, or line patterns. Keep those cues consistent with the legend. This gives readers more than one way to identify a series when colors are difficult to distinguish.
Figure in preparation
Keep series recognizable without hue
Show redundant series identification without suggesting an approved chart palette.
Separate adjacent filled areas when their boundaries would otherwise be hard to perceive. Test the marks against the actual plot surface, including selected, muted, and unavailable states. Avoid using transparency over a busy background as the only means of distinguishing series.
| Presentation role | Installed token starting point |
|---|---|
| Base plot surface | --lq-color-bg-primary |
| Base foreground | --lq-color-fg-primary |
| Base secondary foreground | --lq-color-fg-secondary |
| Subtle region boundary | --lq-color-separator |
| A deliberately emphasized item | --lq-color-accent |
These tokens express UI roles, not chart-series assignments. Their base values do not switch simply because Theme becomes dark. For appearance-responsive text, compose --lq-color-label-primary-light and --lq-color-label-primary-dark with CSS light-dark(), and choose a corresponding surface pair. The Color example shows that application-owned choice. A subtle separator is not automatically suitable for an essential axis or mark. Reusing the accent for every category does not produce distinguishable series. See Color for theme and contrast scope behavior.
Review light and dark appearances, the product's contrast requirements, enlarged text, and cases where hue cannot distinguish the series. Check labels, marks, and adjacent regions separately. System color names and semantic tokens do not certify that a particular chart has sufficient contrast.
The planned figure uses labels and different line patterns to explain redundant encoding. Its token choices illustrate presentation roles; they are not a recommended multi-series palette or proof of an implemented chart component.
Read color tokens for available identifiers and Legends for explaining series meaning. No chart palette API or palette-generation service is exported by Liquidify.