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.
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.
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.
Shortcuts & gestures
Small interactions that speed up your workflow.
Generate a new palette (unlocked colors regenerate).
Reorder colors (horizontal on desktop, vertical on mobile).
Edit a color directly with a specific hex value.
Lock the color so it stays when you generate.
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
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.
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.
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.
What this tool supports
| 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
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.