DYDevKitYard
← Design tools

Design Tool

Color Palette Generator

Generate color palettes from a base color with harmonies, tints, shades, accessibility previews and export-ready CSS, SCSS, Tailwind and JSON snippets.

Palette workspace

Start with a base colour, choose a palette harmony and export the colours in the format your project needs.

Base colour

Palette options

StatusReady to start

Choose a base colour and harmony type to generate a palette.

Palette typeComplementary
Colours5
Base HEX#E11D48
Seeddevkityard-rose

Your palette is generated in your browser and is not uploaded.

Generated palette

Shades and tints

Shades
Tints

WCAG and theme previews

On white4.66:1AA
On dark3.83:1Large text
Light card

Palette preview

Test headline, body copy and action colour before using the palette in a UI.

Dark card

Palette preview

Test headline, body copy and action colour before using the palette in a UI.

Export palette

:root {
  --palette-1: #e21d48;
  --palette-2: #1de2b7;
  --palette-3: #1daae2;
  --palette-4: #e2551d;
  --palette-5: #1de255;
}

How to Use Color Palette Generator

  1. Choose a base color or enter a HEX, RGB or HSL value.
  2. Select a harmony such as complementary, analogous, triadic or monochromatic.
  3. Review palette swatches, tints, shades and light or dark previews.
  4. Copy individual colors or export the palette as CSS, SCSS, Tailwind config or JSON.

FAQ

Can I export a palette for CSS?

Yes. The palette can be copied as CSS variables, SCSS variables, Tailwind config snippets or JSON.

Does this check accessibility?

It includes WCAG-style previews, and you can use the Contrast Checker for detailed foreground and background testing.

Can I generate tints and shades?

Yes. The tool generates practical tints and shades from the selected base color.

Is the palette generated on a server?

No. Colors and export snippets are generated locally in your browser.