---
title: "Chart Colors"
description: "Categorical, semantic, sequential and map palettes: CSS variables switch with the theme, ChartPalette provides literals."
category: Charts
status: beta
since: 0.1.0
tags: [chart, color, palette, theme]
syncStatus: reviewed
verified: true
---

## API Reference

### ChartPalette

| Method | Returns | Description |
|------|------|------|
| `categorical(index, isDarkMode?)` | `string` | Categorical color at `index` (wraps modulo 6). |
| `categoricalVar(index)` | `string` | Same slot as a theme-following `var(--tx-chart-categorical-N, #hex)` reference. |
| `semantic(name, isDarkMode?)` | `string` | Semantic color; `name` is one of the six names. |
| `sequential('blues', isDarkMode?)` | `string[]` | Five sequential steps (a fresh array each call). |
| `text('primary' \| 'secondary', isDarkMode?)` | `string` | Axis/label text colors. |
| `mapColors(isDarkMode?)` | `MapColors` | `{ area, bubble, scale[] }` for maps. |

### CSS Variables

| Variable | Description |
|------|------|
| `--tx-chart-categorical-1..6` | Categorical palette. |
| `--tx-chart-semantic-attention/-warning/-success/-neutral/-disabled/-skeleton` | Semantic colors. |
| `--tx-chart-sequential-blues-1..5` | Sequential ramp. |
| `--tx-chart-text-primary/-secondary` | Text colors. |
| `--tx-chart-grid-line` | Grid lines (primary text at 20% opacity). |
| `--tx-chart-map-area` / `--tx-chart-map-scale-1..5` | Map land fill and shading ramp. |

Every variable ships a light-mode fallback, so charts render correctly without the host theme; hosts rebrand by overriding variables with zero component changes.

## Two Tracks

Chart components read **only** the `--tx-chart-*` CSS variables, which flip automatically under `.dark` or `[data-theme='dark']` — hence no `isDarkMode` prop. `ChartPalette` serves the out-of-chart cases (matching series colors in surrounding UI, image export, canvas) with hex literals; its functions are name-compatible with kumo and take an `isDarkMode` flag, and `categoricalVar()` is an extra in the charts entry that returns the theme-variable `var()` reference.

### Palette overview

:::TuffDemoWrapper{demo="ChartColorsPaletteDemo" code-lang="vue" title="Categorical / Semantic / Sequential" description="Toggle the site theme to watch the variables flip."}
---
code: |
  <script setup lang="ts">
  import { ChartPalette } from '@talex-touch/tuffex/charts'

  const sequential = ChartPalette.sequential('blues')
  </script>

  <template>
    <span
      v-for="index in 6"
      :key="index"
      :style="{ background: ChartPalette.categoricalVar(index - 1) }"
    />
  </template>
---
:::

## The Three Palettes

- **Categorical**: 6 colors cycled by series position (modulo 6) — `#4290F0` blue, `#F5B647` yellow, `#E8649D` pink, `#8D58EE` purple, `#50C3B6` teal, `#D37536` orange; slot 1 blue anchors the whole family (it is the middle step of both the sequential and the map ramp). Only yellow changes in dark mode, to `#EEB720`; the other five match light mode exactly.
- **Semantic**: `Attention` / `Warning` / `Success` / `Neutral` / `Disabled` / `Skeleton` — status, not series identity; Neutral / Disabled / Skeleton change in dark mode.
- **Sequential**: `blues`, five steps low → high; dark mode reverses direction with a dark-tuned step 4 (not a plain mirror).

Maps carry their own `--tx-chart-map-*` set (land fill + five-step shading ramp) — see [Maps](/docs/dev/components/maps).