Colors

BlakeUI Pro uses the same color system as BlakeUI OSS — CSS variables in oklch, semantic naming with foreground pairs, and automatic light/dark switching. Read the full Colors guide on blakeui.com to understand the base color palette, semantic tokens, and how to customize them.

Chart Colors (Pro)

BlakeUI Pro adds a chart color palette for use with chart components (AreaChart, BarChart, LineChart, PieChart, RadarChart, RadialChart). These are defined in @blakeui-pro/react/css and automatically derive from your theme's accent color:

:root {
  --chart-1: oklch(from var(--accent) calc(l - 0.24) c h);
  --chart-2: oklch(from var(--accent) calc(l - 0.12) c h);
  --chart-3: var(--accent);
  --chart-4: oklch(from var(--accent) calc(l + 0.12) c h);
  --chart-5: oklch(from var(--accent) calc(l + 0.24) c h);
}

The palette is centered on your accent (--chart-3) and fans out from darkest (--chart-1) to lightest (--chart-5), giving multi-series charts balanced contrast on either side of your brand color.

Customizing Chart Colors

Override these variables in your theme CSS to use a custom chart palette:

.root,
.light,
[data-theme="light"] {
  --chart-1: oklch(0.35 0.18 220);
  --chart-2: oklch(0.45 0.18 220);
  --chart-3: oklch(0.55 0.18 220);
  --chart-4: oklch(0.7 0.15 220);
  --chart-5: oklch(0.85 0.12 220);
}