Chart colors in Kumo are split into three systems — semantic tokens for data with inherent polarity, a categorical palette for nominal series, and a sequential scale for density encoding. Using the right system for the data type is the most important color decision in a chart.

Color systems

Charts in the dashboard serve different jobs, so color is not “one-size-fits-all.” To avoid misreading data, we use different color systems based on the data task.

Semantic

Status, severity, and health data.

Categorical

Nominal series with no inherent order.

Sequential

Density or magnitude encoded by intensity.

Semantic tokens

Semantic chart colors should be used when the data has inherent polarity: status, severity, and health data. Semantic colors communicate to the user that this data needs their attention and an action might be required.

Attention

Warning

Success

Neutral

Disabled

Skeleton

<script lang="ts">
  import { ChartPalette } from "kumo-svelte/components/chart";
  const colors = ["Attention", "Warning", "Success", "Neutral", "Disabled", "Skeleton"] as const;
</script>

<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
  {#each colors as color}
    <div class="flex items-center gap-3 rounded-lg border border-kumo-hairline bg-kumo-base p-3">
      <span class="size-8 rounded-md" style:background-color={ChartPalette.semantic(color)}></span>
      <span class="font-mono text-sm">{color}</span>
    </div>
  {/each}
</div>

Categorical palette

Use the categorical palette when the data has no inherent polarity. The palette is ordered for perceptual distance between adjacent slots so the data is distinguishable.

categorical(0)

categorical(1)

categorical(2)

categorical(3)

categorical(4)

categorical(5)

<script lang="ts">
  import { ChartPalette } from "kumo-svelte/components/chart";
</script>

<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
  {#each Array.from({ length: 6 }) as _, index}
    <div class="rounded-lg border border-kumo-hairline bg-kumo-base p-3">
      <div class="mb-2 h-12 rounded-md" style:background-color={ChartPalette.categorical(index)}></div>
      <div class="font-mono text-xs">categorical({index})</div>
    </div>
  {/each}
</div>

We use a small categorical set because most charts intentionally surface only top categories at once. When a chart needs more series, cycle these tokens with modulo: color = tokens[i % tokens.length].

Sequential scale

A 5-step single-hue scale encodes density. Use it when a single metric varies in magnitude across a set of values and color intensity should reinforce that magnitude.

<script lang="ts">
  import { ChartPalette } from "kumo-svelte/components/chart";
  const steps = ChartPalette.sequential("blues");
</script>

<div class="overflow-hidden rounded-lg border border-kumo-hairline">
  <div class="grid grid-cols-5">
    {#each steps as color, index}
      <div class="flex h-24 items-end p-3" style:background-color={color}>
        <span class="rounded bg-black/50 px-1.5 py-0.5 font-mono text-xs text-white">{index + 1}</span>
      </div>
    {/each}
  </div>
</div>

API Reference

import { ChartPalette } from "kumo-svelte/components/chart";
ChartPalette.semantic("Success");
ChartPalette.categorical(0);
ChartPalette.sequential("blues");
ChartPalette.text("primary");