Charts

Tokens de cor das séries de gráfico — paleta categórica de 10 cores (--chart-1 a --chart-10), não-semântica, com light/dark automático.

Paleta categórica para diferenciar séries de um gráfico — não carrega significado. Reserve as cores semânticas (success/warning/error/info) para status: ver Feedback. Regras gerais no hub de Tokens.

Boas Práticas

Quando usar
Diferenciar séries num mesmo gráfico (linhas, barras, fatias) com --chart-1…10.
UI de dado customizada via var(--chart-1) ou utilitários bg-/text-/fill-/stroke-.
Sobrescrever a paleta de um chart — sempre mantendo-se nos --chart-*.
Quando não usar
Cor de série para comunicar status (verde=ok, vermelho=erro) — use os tokens de feedback.
HEX cru no lugar dos tokens --chart-*.
Mais de ~10 séries coloridas — o olho não diferencia; prefira Top N + "Outros".

Tokens

Tom 600 no light, 400 no dark — troca automática com o tema.

Tokens

Token LightDark
--chart-1UIColors/Blue/600UIColors/Blue/400
--chart-2UIColors/Orange/600UIColors/Orange/400
--chart-3UIColors/Teal/600UIColors/Teal/400
--chart-4UIColors/Pink/600UIColors/Pink/400
--chart-5UIColors/Yellow/600UIColors/Yellow/400
--chart-6UIColors/Purple/600UIColors/Purple/400
--chart-7UIColors/Red/600UIColors/Red/400
--chart-8UIColors/Cyan/600UIColors/Cyan/400
--chart-9UIColors/Lime/600UIColors/Lime/400
--chart-10UIColors/Slate/600UIColors/Slate/400

Como usar

A atribuição é automática: cada série recebe --chart-1, --chart-2… em ordem, alternando quente/frio para máxima distinção com 2–4 séries. Os tokens só entram à mão em UI customizada (var(--chart-1) ou utilitários bg-/text-/fill-/stroke-) ou ao sobrescrever a paleta de um chart — sempre nos --chart-* (continuam acessíveis e sensíveis ao tema).

Acessibilidade: cor é indício secundário — combine sempre com rótulo/marcador direto (Yellow no branco e o par quente×frio podem convergir para daltonismo). Se remover a cor torna o gráfico ilegível, adicione rótulo, marcador ou padrão.