Color Palette Generator
Generate, tweak, and export beautiful color combinations instantly.
How it works
Press spacebar
Hit spacebar or click Generate to instantly create a new random palette.
Lock what you like
Click the lock icon on any swatch to pin it — it stays while the rest randomize.
Copy or export
Click any swatch to copy its hex, or export as CSS variables or Tailwind config.
What designers use it for
Building a brand from scratch
Starting a brand from scratch is one of the best uses. When no colors are locked in yet, generating a few random palettes and keeping a color you like is often faster than staring at a color wheel. You end up with something unexpected that still works together.
Designing a website theme
Building a website or app theme. Most design systems need at least five tones — a primary, a secondary, a neutral, and lighter and darker variations. Exporting directly to CSS custom properties or a Tailwind config saves the manual copy-paste step.
Consistent visual content colors
Finding color combinations for illustrations, presentations, or social graphics. Three or four consistent colors make visual content look deliberate rather than random, and this tool lets you find that combination without needing formal design training.
Frequently asked questions
How do I generate a color palette?
Press the spacebar or click "Generate" to create a new random palette. Lock any colors you want to keep, then generate again — locked colors stay while the rest change.
How do I export the palette for use in code?
Click any color to copy its hex code instantly. You can also export the full palette as CSS custom properties or Tailwind config — both options are available via the Export button.
Can I adjust individual colors manually?
Yes. Click on any color swatch to open the color picker and choose a specific color. Lock that swatch before generating and your chosen color stays while the rest change.
Are the generated palettes accessible (WCAG compliant)?
The tool shows contrast ratios for each color against white and black backgrounds so you can judge accessibility yourself. For WCAG AA compliance, aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
Can I use these palettes in commercial projects?
Yes. Colors cannot be copyrighted, and there are no restrictions on using palettes generated here in any personal or commercial project.
Can I start from a specific color I already have?
Yes. Click any color swatch to open the color picker and choose the color you want. Lock that swatch before generating and new palettes will be built around it while the locked color stays exactly as you set it.
What does locking a color do?
Locking pins a color in place so it does not change when you generate a new palette. Everything unlocked randomizes; locked swatches stay exactly as they are. This lets you keep one or two colors you like while exploring different combinations for the rest.
How do I save a palette I like?
Copy the CSS variables or Tailwind config from the Export button, or copy individual hex codes by clicking any swatch. There is no account system — save directly into your project files.