Colors
Pro-specific color variables that extend the HeroUI color system
HeroUI Pro uses the same color system as HeroUI OSS — CSS variables in oklch, semantic naming with foreground pairs, and automatic light/dark switching.
Read the full Colors guide on heroui.com to understand the base color palette, semantic tokens, and how to customize them.
Chart Colors (Pro)
HeroUI Pro adds a chart color palette for use with chart components (AreaChart, BarChart, LineChart, PieChart, RadarChart, RadialChart). These are defined in @heroui-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);
}
.dark, [data-theme="dark"] {
--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);
}Want to create your own theme? The Theme Builder lets you visually customize colors (including chart colors), radius, fonts, and more — then export the CSS.