Home›Tools›Recharts Color Palette Generator
🎨 Design System Tool

Recharts Color Palette & Theme Generator

Curated, high-contrast dark mode palettes tested specifically on data visualization components. Preview across live charts and export clean code.

Emerald SaaSModern Tech / Stripe Vibe
Cyberpunk NeonHigh Contrast / Web3
Midnight SlateClean Corporate / Tailwind UI
Sunset HorizonWarm Analytics / Finance
Tokyo NightDeveloper Terminal Vibe
Monokai ProCode Editor Classic
Custom Brand Color:Generates a coordinated theme using your primary brand color.
Live Palette Preview (Emerald SaaS)
Donut Proportions
Bar Chart Series
Gradient Area
1. COLOR ARRAY (TSX)
const COLORS = [
  "#00e5a0",
  "#4a9eff",
  "#ffd166",
  "#c77dff",
  "#ff6b6b"
];
2. SVG GRADIENT DEFS
<defs>
  <linearGradient id="primaryGradient" x1="0" y1="0" x2="0" y2="1">
    <stop offset="5%" stopColor="#00e5a0" stopOpacity={0.4} />
    <stop offset="95%" stopColor="#00e5a0" stopOpacity={0} />
  </linearGradient>
</defs>