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: color-mix(in oklch, var(--accent) 25%, white);
--chart-2: color-mix(in oklch, var(--accent) 55%, white);
--chart-3: var(--accent);
--chart-4: color-mix(in oklch, var(--accent) 70%, black);
}The palette goes from lightest (--chart-1) to darkest (--chart-4), giving multi-series charts natural visual hierarchy.
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.85 0.12 220);
--chart-2: oklch(0.7 0.15 220);
--chart-3: oklch(0.55 0.18 220);
--chart-4: oklch(0.4 0.15 220);
}
.dark, [data-theme="dark"] {
--chart-1: oklch(0.85 0.12 220);
--chart-2: oklch(0.7 0.15 220);
--chart-3: oklch(0.55 0.18 220);
--chart-4: oklch(0.4 0.15 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.