Multi-Theme Color Palette Generator

Generate harmonious light and dark theme palettes from a single base color.
Export as CSS variables, Tailwind config, or JSON.

Base Color

Quick presets:

Preview theme:

WCAG Contrast

Text on background:16.03 (AAA)

Primary on background:5.68 (AA)

Light Theme Preview

Surface Card

This is muted text on a surface background.

Accent Color

Complementary to primary

Generated Palette

background

#f9fafb

surface

#ffffff

surfaceAlt

#f4f5f6

primary

#0058e6

primaryHover

#004ecc

text

#1a1e23

textMuted

#67707e

border

#dde0e4

accent

#e18c05

Export

:root {
  /* Light Theme */
  --background: #f9fafb;
  --surface: #ffffff;
  --surface-alt: #f4f5f6;
  --primary: #0058e6;
  --primary-hover: #004ecc;
  --text: #1a1e23;
  --text-muted: #67707e;
  --border: #dde0e4;
  --accent: #e18c05;
}

.dark, [data-theme="dark"] {
  /* Dark Theme */
  --background: #111417;
  --surface: #1b1e22;
  --surface-alt: #25282d;
  --primary: #1a71ff;
  --primary-hover: #3381ff;
  --text: #f1f2f4;
  --text-muted: #9fa4ad;
  --border: #32373e;
  --accent: #faa61e;
}

How It Works

1. Pick Base Color

Choose your brand's primary color. All other colors will be derived from it.

2. Auto-Generate

Light and dark palettes are generated with proper contrast ratios for accessibility.

3. Export & Use

Copy CSS variables, Tailwind config, or JSON and use in your project.

Tips for Theme Colors

✓
Test both themes: Toggle between light and dark to ensure both look good.
✓
Check contrast: Aim for AA rating (4.5:1) for body text and AA Large (3:1) for large text.
✓
Use CSS variables: They make theme switching easy with JavaScript or prefers-color-scheme.
✓
Avoid pure black/white: Slightly tinted backgrounds are easier on the eyes.

Extract any color palette style in 2 clicks

Click any element on any website to get its color palette styles instantly. Frontend Hero gives you 10+ essential developer tools in one browser extension.

Get Frontend Hero now →

Explore more CSS tools

CSS Gradient Generator

Create custom gradients

CSS Text Gradient

Gradient text effects

CSS Selection Generator

Style text highlight colors

CSS Grid Generator

Create grid layouts visually

CSS Flexbox Generator

Create flex layouts visually

CSS Gradients Collection

275+ ready-to-use gradients

CSS Box Shadow Generator

Design multi-layer shadows

CSS Scrollbar Generator

Style custom scrollbars

CSS Blend Mode Generator

Mix colors with blend modes

CSS Cursor Generator

Preview all cursor styles

CSS Loader Generator

Create loading animations

BTN

CSS Button Generator

Design buttons with hover effects

✨

CSS Glow Generator

Create neon glow effects

Fluid Typography

Scale text across screen sizes

Browse all free CSS tools →