Beautiful Charts
Get the charts

Colour · free

Colours that survive
dark mode and real eyes.

Pick a kind and a hue. Every colour is checked against your surfaces in light and dark, and for the three common kinds of colour blindness, and the results are said in words. Copy a shadcn ChartConfig, --chart-N variables or theme tokens.

Palette tool and previews

Chart palette

Distinct colours for separate series.

Light
Dark

Every check passes, in light and dark.

  • Every colour reaches 3:1 against the light surface (lowest 3.2:1).
  • All 5 colours are clearly different from each other (light).
  • With protanopia (light), every neighbouring pair stays distinguishable.
  • With deuteranopia (light), every neighbouring pair stays distinguishable.
  • With tritanopia (light), every neighbouring pair stays distinguishable.
  • Every colour reaches 3:1 against the dark surface (lowest 5.1:1).
  • All 5 colours are clearly different from each other (dark).
  • With protanopia (dark), every neighbouring pair stays distinguishable.
  • With deuteranopia (dark), every neighbouring pair stays distinguishable.
  • With tritanopia (dark), every neighbouring pair stays distinguishable.
import type { ChartConfig } from "@/components/ui/chart";

export const chartConfig = {
  web: { label: "web", theme: { light: "#365db8", dark: "#77a2fc" } },
  ios: { label: "ios", theme: { light: "#c77600", dark: "#cc712b" } },
  android: { label: "android", theme: { light: "#009bc2", dark: "#1fe6e5" } },
  "series-4": { label: "series-4", theme: { light: "#893400", dark: "#e7963e" } },
  "series-5": { label: "series-5", theme: { light: "#b54154", dark: "#f5c252" } },
} satisfies ChartConfig;

Previews use the palette through --bc-series-N, which every Instrument chart reads first. The heatmap preview shows sequential and diverging scales with its own ramp; the scale legend beside it uses your exact colours.

Put the tool in your own app

The palette tool and the colour scale legend install like any chart. No chart engine, MIT.

npx shadcn@latest add https://beautifulcharts.dev/r/instrument-chart-palette.json
npx shadcn@latest add https://beautifulcharts.dev/r/instrument-color-scale.json

How series colours are chosen is in the colour guide.