Skip to content

DFT Color Palettes

Status: draft Scope: DFT chart-library palette introduction Source: Default Categorical Palette, Hero Palette, Chart Design Notes, Tonal Foundations

This page introduces the current DFT chart palettes in one place so readers can see what shipped, how the palettes differ, and why they look the way they do. It is a practical summary rather than a replacement for the deeper palette notes.

Why DFT Has Its Own Palettes

DFT's palette work does not treat chart colors as isolated swatches. It grows out of the broader chart-language direction already documented across DFT:

  • charts should feel calm, editorial, and product-grade rather than loud by default
  • unordered categories should read as distinct identities, not as a hidden ramp or intensity scale
  • blue remains the lead hue because it is both perceptually reliable and familiar in BI tooling
  • later palette slots do not need to become a rainbow if earths and neutrals create a more coherent system
  • palette work is evaluated on real light-theme surfaces and under practical accessibility checks, not only on isolated swatches

That same posture aligns with the neutral-frame thinking in Tonal Foundations: soften the surrounding product frame, preserve white chart surfaces, and make the chart colors feel deliberate inside that calmer shell.

Default Categorical Palette

The main DFT default palette is a ten-color categorical set designed for everyday chart work. It prioritizes the first five positions most aggressively, then broadens into earths and quieter support colors instead of forcing ten equally vivid hues.

blue#2d74b3
cyan#4cb6d3
green#4e9c78
brown#8a6744
gold#bf9638
purple#9c6fa7
orange#cd6d40
moss#6d8a47
gray#87909d
charcoal#56616f

Key characteristics:

  • blue-first ordering that stays close to BI-tool convention without copying louder competitor palettes
  • a strong first-five core for the common 2-5 category chart, with two early blues before the warmer break
  • earth, moss, and neutral expansion slots that keep the system calm on light surfaces
  • a practical accessibility posture based on simulated vision checks and real-surface evaluation

Read the full rationale in Default Categorical Palette.

Single-Series Default

DFT also has a dedicated single-series default color for charts that do not need the full categorical sequence:

blue-strong#296ca8

This color intentionally stays close to the palette lead blue while becoming a bit darker and more concentrated. The goal is to preserve family resemblance without making the single-series default feel brighter or more UI-like than the main categorical system.

Hero Palette

The stable hero palette, hero-6, is for charts where one series should win clearly and the rest should behave like a supporting field. It is intentionally not a balanced rainbow set.

hero-blue#2768a3
light-gray#acb7c2
gray#929aa6
brown#a68d72
beige#b8a593
sand#c7a987

Key characteristics:

  • one dark, saturated blue hero color
  • five lighter support colors limited to grays and browns
  • emphasis created through both saturation and lightness rather than hue chaos
  • a better fit for charts with one focal series than for generic many-category work

Read the full rationale in Hero Palette.

Tonal Categorical (single-hue option)

For dashboards that want one hue throughout — "the all-blue dashboard," "the all-green dashboard" — DFT ships a tonal categorical family: five single-hue 6-stop palettes anchored on category-10 slots, with a layered strict-safe-core / form-redundant-extended contract.

Palette Anchor (slot 0)
category-6-tonal-blue #0375c4
category-6-tonal-green #00875a
category-6-tonal-purple #9650a8
category-6-tonal-orange #b74c1f
category-6-tonal-brown #9a642b (extended slots bridge into the cream scaffold)

Tonal palettes are an option, not the default. Use them only for editorial / brand-restrained dashboards where chromatic restraint matters more than category count. Hard cap: 6 categories.

Read the full rationale in Tonal Categorical Palette.

Choosing Between Them

  • Use the default categorical palette for general multi-series category charts.
  • Use blue-strong for single-series bars, lines, and areas when you want the default DFT accent without introducing multi-series palette logic.
  • Use hero-6 when one series should dominate and the others should recede.
  • Use category-6-tonal-{blue|green|purple|orange|brown} when a dashboard wants one hue throughout for editorial reasons.