Skip to content
EVOA Toolbox

Color Palette Generator

Generate colour harmonies from a base colour, lock favourites, check WCAG contrast and export to CSS, Tailwind, JSON or PNG.

Processed locally in your browser. Your text is not uploaded.

Loading tool…

What this tool does

Pick a base colour and instantly get a palette built with colour-theory rules: complementary, analogous, triadic, tetradic, split-complementary, monochromatic, or a run of shades and tints. The hue maths happens in HSL, and every swatch shows its value as HEX, RGB, HSL and OKLCH so you can copy whichever your stack uses.

Every swatch also reports its contrast ratio against white and black text and whether it reaches WCAG AA (4.5:1), AAA (7:1) or only the large-text threshold (3:1), which helps when choosing button and background colours. Press Random to explore: lock the colours you like and the rest will change around them.

When you are happy, export the palette as CSS custom properties, a Tailwind v4 @theme block, a Tailwind v3 config extension, JSON, or a PNG swatch image. Everything runs locally and nothing is sent anywhere.

How to use it

  1. 1Choose a base colour with the picker or type a hex value such as #2f5bea.
  2. 2Select a harmony. Use the count slider for monochromatic, shades and tints.
  3. 3Press Random to explore, and lock colours you want to keep.
  4. 4Check the contrast labels on each swatch before using it for text or buttons.
  5. 5Copy values per swatch or export the whole palette in the format you need.

Supported formats

Input: HEX colours (#rgb or #rrggbb). Output: CSS variables, Tailwind v3/v4 snippets, JSON and PNG.

Privacy

This tool runs in your browser. The data you provide is processed on your device and is not sent to our servers.

Limitations

  • Harmonies are mathematical suggestions, not finished designs; adjust by eye and test in context.
  • Contrast is measured for the swatch colour against pure white and pure black only. Check your real text and background pairs separately.
  • Colour appearance varies between screens and colour profiles; values are sRGB.
  • Alpha/opacity values are not part of the palette.

FAQ

What is the difference between analogous and triadic?

Analogous colours sit next to each other on the colour wheel (30 degrees apart) and feel calm and cohesive. Triadic colours are 120 degrees apart and give more variety and contrast.

What do AA and AAA mean?

They are WCAG 2 contrast levels for text. AA needs 4.5:1 for normal text (3:1 for large text); AAA needs 7:1 for normal text. The tool shows the highest level each swatch reaches against white and against black.

How does locking work?

A locked swatch keeps its colour when you press Random or change the base colour or harmony, so you can build a palette around colours you already like.

Which export should I use for Tailwind?

Use the v4 @theme output with Tailwind 4 (CSS-first configuration) and the v3 config output for projects that still use tailwind.config.js.

Related tools