Color Palette Generator

Color Scheme Generator

A color scheme is more than five colors that look nice next to each other — it's a palette with roles: background, text, accents. Roll here, lock what works, then export the whole scheme as CSS variables or a Tailwind theme.

Export palette

5 colors · pick a format, copy or download

Format7 lines
:root {
  --color-1: #37e6b5;
  --color-2: #ed6eec;
  --color-3: #93c819;
  --color-4: #377fe6;
  --color-5: #ed6e7d;
}
palette.css

Turning a palette into a scheme

Give each color a job. One dark color becomes text, one light color becomes the background, and the loudest colors become accents for buttons and links. A classic web split is 60% background, 30% text and surfaces, 10% accent.

The workflow

  1. Roll until the palette feels right.
  2. Lock the colors you'll keep and re-roll the rest.
  3. Decide roles before you export — it's easier to name --color-1 by job than by hue.
  4. Copy the CSS variables or Tailwind config straight into your project.

Frequently asked questions

How many colors should a scheme have?

Three to five. Fewer than three gets boring; more than five gets hard to keep consistent.

Does this tool save my schemes?

No account, no storage — nothing is uploaded. Copy the link to keep a palette, or export the code and keep it in your project.

Related tools

Website palettesBrand palettesComplementary palettesTailwind palettes