The Color Palette Generator helps you build a colour scheme fast. Press the space bar (or the Generate button) to shuffle a fresh five-colour palette, lock the colours you want to keep, edit any swatch with the colour picker, and copy individual hex codes or export the whole palette. It is the quickest way to explore combinations and land on a set that works together.
Each palette is built around a shared hue with a light-to-dark tonal range, so the colours feel cohesive rather than random. When you are happy, export to CSS custom properties, a Tailwind colour object, or a plain array. Everything runs in your browser.
How to use the color palette generator
- Press Space or click Generate to shuffle a new palette.
- Click the lock icon on any swatch to keep it while you reshuffle the rest.
- Click a swatch’s edit icon to fine-tune it, or click its hex to copy that one colour.
- Choose an export format (CSS variables, Tailwind, or array) and copy the whole palette.
Generate, lock, and refine
The workflow is built around exploration: generate many options quickly, lock the ones you like, and keep reshuffling the rest until the whole set clicks. Locking is the key step — it lets you anchor a brand colour or a background you have already chosen and generate complementary colours around it, rather than starting from scratch each time.
How the palettes are built
Rather than picking five fully random colours (which rarely look good together), this generator chooses one base hue, spreads the hues slightly across the five swatches, and applies a light-to-dark lightness ramp. That gives you a usable range — light tints for backgrounds, mid tones for accents, and dark shades for text — while keeping the palette harmonious. You can always override any swatch by editing it directly.
Exporting your palette
Export as CSS custom properties (--color-1 … --color-5) to drop straight into :root, as a Tailwind colours object to paste into your theme config, or as a plain array of hex strings for use in JavaScript or design tokens. You can also copy a single colour by clicking its hex value. If you need to convert a colour between HEX, RGB, and HSL, the Color Converter is the companion tool.
Frequently Asked Questions
How do I generate a new palette?
Press the space bar or click the Generate button. Each press produces a fresh palette; any swatches you have locked stay the same.
How do I keep a colour I like?
Click the lock icon on that swatch. Locked colours are preserved when you regenerate, so you can build the rest of the palette around them.
Can I set an exact colour?
Yes. Click a swatch’s edit icon to open the colour picker and choose an exact colour, or lock it after editing so it stays put.
What export formats are available?
CSS custom properties, a Tailwind colours object, and a plain array of hex values. You can also click any swatch’s hex code to copy that single colour.
How is this different from the Color Converter?
This tool is for building and exploring whole palettes — generate, lock, and export a set of colours. The Color Converter focuses on converting a single colour between HEX, RGB, HSL, and HSV and showing its harmonies.