Inspiration

Sample palettes to start from

Click any color combo to load it into the builder.

Sunset

Warm

#ff6b6b · #ffa94d · #ffd43b · #ff8787 · #fab005

Ocean

Cool

#1b4965 · #3d5a80 · #45b7d1 · #4ecdc4 · #a8dadc

Forest

Natural

#2d6a4f · #40916c · #52b788 · #74c69d · #b7e4c7

Pastel

Soft

#ffadad · #ffd6a5 · #fdffb6 · #caffbf · #9bf6ff

Monochrome

Neutral

#212529 · #495057 · #6c757d · #adb5bd · #dee2e6

Neon

Vibrant

#ff006e · #8338ec · #3a86ff · #06ffa5 · #ffbe0b

Color Palette Generator

A fast color palette builder and color combo generator for designers and developers. Start from scratch or generate a color palette from a seed color, lock the shades you like, and export as CSS, Tailwind, JSON, or PNG.

Designers and developers use this color palette builder to lock a seed hex, explore matching shades, and export the final palette to CSS, Tailwind, SCSS, JSON, or PNG in one click - no account, no install.

Tweak individual colors, drag to reorder, and share the result through a URL that encodes the exact palette. Prefer preset inspiration? The sample color combos below load into the builder in one click so you can iterate from a known starting point.

Color palette generator interface - five color swatches with lock, drag, and edit controls

Getting started

How to use it

Build a palette in a few seconds.

1. Generate

Press Space or click Generate to get a new palette.

2. Lock colors

Lock the ones you like - they stay when you regenerate.

3. Tweak hex values

Click a swatch to enter a specific hex code.

4. Export or share

Export to CSS, Tailwind, JSON, or PNG. Or copy a share URL.

Starting point

Generate a color palette from a color

Use any hex as a seed to build the rest of the palette.

If you already have a brand color, a photo accent, or a mood color in mind, you can generate a color palette from that one color in four steps:

Click the first swatch and enter your seed hex (for example #4ecdc4).
Lock that swatch using the lock icon so it stays fixed.
Press Space to regenerate the remaining colors around it.
Repeat until the full palette fits - lock more shades as you like them.

This turns the tool into a color palette scheme generator centered on your anchor color, and it is often faster than trying to hand-pick every shade.

Workflow

Shortcuts & gestures

Small interactions that speed up your workflow.

Space

Generate a new palette (unlocked colors regenerate).

Drag

Reorder colors (horizontal on desktop, vertical on mobile).

Click hex

Edit a color directly with a specific hex value.

Lock icon

Lock the color so it stays when you generate.

Export

Supported export formats

Use the same palette across your design and code stack.

CSS

Root custom properties for use across your stylesheet.

:root {
  --color-1: #ff6b6b;
  --color-2: #4ecdc4;
}

SCSS

SCSS variables, ready to import into your design system.

$color-1: #ff6b6b;
$color-2: #4ecdc4;

Tailwind

A colors block you can paste into your tailwind.config.

colors: {
  'color-1': '#ff6b6b',
  'color-2': '#4ecdc4'
}

JSON

A JSON object with hex codes - good for scripts and tools.

{
  "color1": "#ff6b6b",
  "color2": "#4ecdc4"
}

PNG

Download the palette as an image to share in mockups or slides.

palette.png

Pro tip

Lock colors to explore variations

Locking is the fastest way to keep a base color (brand or background) while exploring accents and neutrals. Lock your brand hex first, then press Space repeatedly to scan through companion colors.

Want all colors fresh? Make sure no locks are on and press Space.

Accessibility

Contrast & accessibility notes

Palette aesthetics and accessibility are two different things. Before shipping a palette, check contrast for any text/background pair you plan to use against WCAG AA: 4.5:1 for body text, 3:1 for large text.

A few practical tips:

Pair a darker accent with a light background (or vice versa) for body text.
Colors that sit very close on the color wheel often fail contrast - pick one and use the other as an accent.
Test real UI states: default, hover, focus, disabled. Many palettes look great on a canvas but break on buttons.

Heads up

Common pitfalls

Locking every color

If every swatch is locked, Generate has nothing to change. Unlock at least one to explore variations.

Too many similar hues

Five similar blues look elegant but limit contrast options. Include at least one neutral and one accent.

Forgetting dark mode

Export your palette, then preview in a dark theme to catch unreadable pairs before shipping.

Skipping semantic names

In CSS or Tailwind, rename generated variables to semantic tokens (primary, accent, neutral) before using in a real project.

Overview

What this tool supports

Feature checklist

A factual summary of what the color palette generator does.

Feature	Supported	Notes
Generate a 5-color palette	Yes	Press Space or click Generate.
Lock individual colors	Yes	Keep a color fixed while regenerating others.
Drag to reorder	Yes	Horizontal on desktop, vertical on mobile.
Edit hex directly	Yes	Click a swatch to enter a specific hex code.
Add / remove colors (2–10)	Yes	Insert between colors or remove when more than two exist.
Undo / redo	Yes	Step back and forward through palette history.
Export formats	Yes	CSS, SCSS, Tailwind, JSON, Array, PNG.
Shareable URL	Yes	URL encodes colors (e.g. ?colors=ff6b6b-4ecdc4-...).
Account required	No	No signup, no install.

Palette generator vs color picker

Use a color picker when you already know the exact color you want (from a brand, image, or mockup) and just need its hex, RGB, or HSL values.

Use a color palette generator when you’re starting fresh and want a set of colors that look good together - ideal for landing pages, illustrations, brand guidelines, or quick design explorations.

Need a picker? Try the Color Picker tool.

Frequently Asked Questions

Is the color palette generator free to use?

Yes. It’s free and runs in your browser - no signup, no install.

How do I generate a new palette?

Press the Spacebar or click Generate. Lock any color you want to keep before you regenerate.

Can I generate a color palette from one base color?

Yes. Click the first swatch, enter your seed hex code, lock it with the lock icon, then press Space to generate matching companion colors around it.

Can I choose exact hex codes?

Yes. Click a swatch to open the color input and type (or paste) a specific hex code.

What export formats are supported?

CSS custom properties, SCSS variables, a Tailwind colors block, JSON, Array, and a PNG image.

Can I share a palette?

Yes. Click Share to copy a URL that encodes your palette. Opening the URL recreates the same palette.

How many colors can the palette have?

Between 2 and 10 colors. You can add a color between existing ones or remove any color when there are more than two.

Is it accessible for users with visual impairments?

The interface is keyboard-accessible with screen-reader labels. For accessible output, verify text/background contrast against WCAG AA (4.5:1 body text, 3:1 large text).

Community

User reviews

No reviews yet. If you used the tool, you can share feedback on our feedback page.

Ready to build your palette?

Press Space to generate, lock the colors you like, then export to your format of choice.