Color Palette Generator

What is a color palette?

A color palette is a curated set of colors that work together harmoniously. Designers, developers, and creators use color palettes to ensure visual consistency across websites, apps, branding, and content. A well-chosen palette communicates mood, establishes hierarchy, and improves user experience. This free color palette generator gives you two modes: color harmonies (pick a base color and get 6 mathematically-derived palettes — complementary, analogous, triadic, split-complementary, tetradic, monochromatic) and random palette (Coolors-style: 5 swatches you can lock, regenerate with spacebar, and export as CSS variables, Tailwind config, JSON, or GIMP .gpl).

Color harmony types explained

Color harmonies are specific arrangements of hues on the color wheel. Each creates a different visual effect and serves different design purposes.

How to use the Coolors-style random mode

1. Click the "Random palette" tab above.
2. Press the Space bar to regenerate all 5 swatches.
3. Like a specific color? Click the lock icon below it. Locked colors stay; the rest regenerate.
4. Click any color picker to fine-tune individual swatches.
5. When you're happy with the palette, click any swatch to copy its hex code — or use the export buttons.
6. Each output format is below the palette: CSS variables for direct paste into stylesheets, Tailwind config JSON, JSON for design tools, or GIMP .gpl for import into Photoshop / Affinity / Krita.

Color theory for designers and developers

The HSL (Hue, Saturation, Lightness) color model maps directly to the color wheel: hueis the angle (0-360°), saturation controls vividness (0% = gray, 100% = pure color),lightness controls brightness (0% = black, 100% = white). When you pick a base color and ask for a complementary palette, the math is straightforward: take the hue, rotate 180°, keep saturation and lightness the same.

Most professional design systems are built monochromatically (single hue, many lightness steps) because it's the cleanest way to communicate hierarchy. Tailwind's default palette is exactly this: 50, 100, 200, ..., 900 are all lightness steps within the same hue family.

The 60-30-10 rule of color in design

When you have a 3-5 color palette, distribute them roughly as:

• 60% dominant color — backgrounds, large surfaces
• 30% secondary color — supporting surfaces, secondary buttons
• 10% accent color — primary CTAs, links, highlights

This ratio is borrowed from interior design and works for any visual layout. The accent color is where you put your complementary or contrasting color — it's used sparingly, which is exactly what makes it pop.

Accessibility: WCAG contrast ratios

The Random palette mode includes a contrast checker that shows the WCAG ratio between every pair of swatches in your palette. Requirements:

• WCAG AA: 4.5:1 for body text, 3:1 for large text (18pt+ or 14pt+ bold)
• WCAG AAA: 7:1 for body text, 4.5:1 for large text

Any pair under 4.5:1 will fail accessibility audits and is hard to read for users with low vision. The checker flags failing pairs in amber so you can adjust before exporting.

Frequently Asked Questions

Is this color palette generator free?

Yes, completely free with no signup. Generate and export unlimited palettes.

What does "lock" do?

In Random palette mode, clicking the lock icon below a swatch keeps that color when you regenerate the palette (via spacebar or the Generate button). Unlocked swatches get new random colors; locked ones stay. This is the standard Coolors workflow — get a great single color, lock it, then iterate on the rest of the palette around it.

What output formats are supported?

• CSS variables — --color-1: #hex; ready to paste into :root{...}
• Tailwind config — JSON ready for theme.extend.colors
• JSON — plain array for use in any design tool or build script
• GIMP .gpl — palette file importable into GIMP, Photoshop, Affinity, Krita, Inkscape

How do complementary colors work?

Complementary colors sit directly opposite each other on the color wheel (180° apart). They create maximum visual contrast — blue + orange, red + green, purple + yellow. Use complementary colors for maximum visual impact: a blue site with an orange call-to-action button is the textbook example.

How do I import a .gpl file into Photoshop?

Photoshop doesn't natively read .gpl. Use a free converter (e.g. convertio.co) to turn .gpl into .aco (Photoshop's native swatch format), then open Window → Swatches → Import Swatches. Or paste hex codes manually into the Swatches panel.

Why did my random palette generate similar shades each time?

The random generator constrains saturation to 35-85% and lightness to 35-75% to avoid washed-out or nearly-black/white colors. If you want fully random, use the "Random base" button on the Color harmonies tab — that uses unconstrained random.