Color Palette Generator

Start from a base colour and build palettes using classic colour-wheel harmonies — complementary, analogous, triadic, tetradic, split-complementary — or monochromatic, shade and tint scales. Press the space bar for a random palette and lock the colours you want to keep. Export the result as CSS variables, a Tailwind config snippet, JSON or a PNG swatch.

How to use the Color Palette Generator

1. Pick a base colour or type one in.
2. Choose a harmony and, for scales, the number of colours.
3. Press Random palette or the space bar to explore ideas.
4. Lock colours you like and fine-tune any swatch.
5. Export as CSS variables, Tailwind, JSON or PNG.

Features

• Eight harmony and scale modes
• Random palettes with locked colours kept in place
• Space bar shortcut
• Readable text colour on every swatch
• CSS variables, Tailwind config and JSON export
• PNG swatch download

Benefits

• Get balanced colour schemes for websites and brands quickly
• Drop palettes straight into your CSS or Tailwind project
• Share palettes as an image with clients

Frequently asked questions

What is the difference between shades and tints?

Shades mix the base colour with black to make it darker; tints mix it with white to make it lighter. Monochromatic varies the lightness while keeping hue and saturation.

How are random palettes chosen?

A random starting hue is picked and further hues are spaced by the golden angle (about 137.5°), with moderate saturation and lightness so the colours work together.

Why does the space bar not work while typing?

The shortcut is ignored while a text field or button has focus so it does not interfere with typing. Click on an empty part of the page first.

Related tools

• Color Picker — Pick a colour with a colour wheel, HSL sliders or a screen eyedropper and get HEX, RGB, HSL, HSV, CMYK and WCAG contrast.
• Color Converter — Convert any colour between HEX, RGB, RGBA, HSL, HSV, CMYK and all 148 CSS colour names, including alpha transparency.
• Percentage Calculator — Work out X% of Y, what percent one number is of another, percentage change, or increase and decrease a value by a percent.
• Loan EMI Calculator — Calculate the monthly EMI for any loan, plus total interest, total payment and a year-by-year repayment breakdown.
• Invoice Generator — Create a professional invoice with your details, line items, discounts, tax and shipping, then download it as a PDF or print it.
• Word Counter — Count words, characters, sentences and paragraphs live, with reading time and top keywords.