Free · Private · No sign-up

Color Palette Generator

Generate accessible color palettes from one HEX color and export CSS variables, Tailwind colors or JSON. Every calculation stays on your device.

Color harmony
Live preview

See the palette in a real interface

COLOR SYSTEMDesign with confidence

A practical preview for buttons, surfaces and accents.

Weekly activity84%

CSS variables

:root {
  --color-1: #12C18A;
  --color-2: #2FC0E1;
  --color-3: #2563EB;
  --color-4: #451DF3;
  --color-5: #C25DF0;
}

Tailwind config

colors: {
  'brand-100': '#12C18A',
  'brand-200': '#2FC0E1',
  'brand-300': '#2563EB',
  'brand-400': '#451DF3',
  'brand-500': '#C25DF0',
}

JSON

{
  "base": "#2563EB",
  "harmony": "analogous",
  "colors": [
    "#12C18A",
    "#2FC0E1",
    "#2563EB",
    "#451DF3",
    "#C25DF0"
  ]
}

Build a usable palette, not just five pretty colors

Start with the color that already represents your brand or interface. Analogous palettes feel calm and cohesive, complementary palettes create strong emphasis, and monochrome palettes are useful for product UI states and design tokens.

Check contrast before publishing

The ratio on each swatch compares that color with its most readable black or white text. For a specific foreground and background pair, verify it in the full WCAG contrast checker.

Open the WCAG contrast checker

Color palette questions

How does the color palette generator work?

Choose a base HEX color and a harmony. The tool calculates five related colors using hue, saturation and lightness, entirely in your browser.

Can I export the palette for a web project?

Yes. Copy the palette as CSS custom properties, a Tailwind color object or JSON.

Are the generated colors accessible?

Each swatch displays its best contrast ratio against black or white and indicates WCAG AA or AAA compatibility.