Perceptually balanced colors
Palettes are built in the modern OKLCH color space, so lightness and saturation steps look even to the human eye.
Press space for a new palette
Color Palette Generator Beautiful, accessible color schemes in one tap
Generate harmonious color palettes, lock the colors you love and keep exploring. Check contrast, preview your palette in a real interface, simulate color blindness and export to CSS, Tailwind, JSON or PNG.
- Lock and regenerate
- 8 color harmonies
- Contrast and color-blind checks
- CSS, Tailwind, JSON, PNG
Palette generator
5 colors
BrandHomePricingAboutSign up
New release
Design with colors that work together
This preview uses your palette for the background, text, buttons and accents, so you can judge it in context before you commit.
Get startedLearn more
Fast setupPrimary color used for key actions and links.Clear accentsAccent color draws attention to highlights.Readable textText color picked for strong contrast.
Rows are text colors, columns are backgrounds. AA needs 4.5:1 for normal text (3:1 for large text); AAA needs 7:1.
Tips: press Space for a new palette, Ctrl + Z to undo. Click a hex code to copy it, the lock to keep a color, and the pencil to pick your own.
Why it's better
Why this color palette generator is better
Random palettes are easy. Palettes that look balanced, stay readable and work for every visitor take more care. This tool builds that in.
Lock and explore
Lock the colors you love, pick your own with the color picker, and regenerate the rest around them. Undo and redo any step.
Eight harmony rules
Analogous, monochromatic, complementary, split complementary, triadic, tetradic, pastel, vibrant and dark palettes on demand.
Real UI preview
See your palette applied to a website header, buttons and cards, with roles picked automatically for readability.
Accessibility built in
Every swatch shows its WCAG contrast, the contrast grid checks every pair, and a simulator shows four types of color blindness.
Export anywhere
Copy CSS variables, SCSS, a Tailwind config, JSON or hex codes, download a PNG or SVG, or share a link to the exact palette.
How it compares with typical palette generators
| Feature | This palette generator | Typical palette tools |
|---|---|---|
| Lock colors and regenerate | Yes, with undo and redo | Sometimes |
| Perceptual OKLCH color model | Yes | Rarely |
| Contrast checks on every color | Yes, plus a full grid | Often a paid feature |
| Color-blind simulation | 4 types | Rarely |
| Live UI preview | Yes | Rarely |
| Tailwind and CSS export | Yes, free | Sometimes behind sign-up |
| Account needed to save | No | Often |
How to use
How to create a color palette
Find a palette you love in a minute, then take it straight into your design or code.
Have a photo you love? Pull its colors with the image color picker, convert between HEX, RGB and HSL with the color converter, or blend two colors with the CSS gradient generator.
Generate
Press Generate or the space bar. Choose a harmony rule, or leave it on Surprise me.
Lock your favorites
Click the lock on any color you want to keep, or use the pencil to enter a brand color. Keep generating to fill the rest.
Adjust the size
Use the plus and minus buttons for three to eight colors, and move colors left or right to reorder them.
Check it works
Look at the UI preview and contrast grid, and try the vision simulator to make sure the palette works for everyone.
Export or save
Copy the code for CSS or Tailwind, download a PNG, save it in your browser or share a link.
Color theory
Color harmonies explained
Harmonies are rules for picking hues that look good together, based on where they sit on the color wheel.
| Harmony | How it works | Best for |
|---|---|---|
| Analogous | Neighbouring hues on the color wheel | Calm, natural designs and backgrounds |
| Monochromatic | One hue in different lightness and saturation | Clean, minimal brands and dashboards |
| Complementary | Two hues opposite each other | Strong contrast and eye-catching calls to action |
| Split complementary | A hue plus the two neighbours of its opposite | Contrast that's easier to balance than complementary |
| Triadic | Three hues evenly spaced around the wheel | Playful, vibrant brands and illustrations |
| Tetradic | Two complementary pairs, four hues in total | Rich designs with one dominant color |
Using your palette
The 60-30-10 rule and other tips
A great palette can still look messy if every color gets equal space. Designers often use the 60-30-10 rule: a dominant color for about 60% of the design, a secondary color for 30% and an accent for the final 10%.
60%30%10%
- Pick one light and one dark color for backgrounds and text.
- Keep body text at a contrast ratio of at least 4.5:1.
- Reserve your brightest color for buttons and key actions.
- Don't rely on color alone to show meaning, such as errors.
- Test your palette in light and dark mode.
- Use tints and shades of your palette instead of adding new colors.
FAQ
Color palette generator FAQ
How does the color palette generator work?
Press Generate or the space bar to create a new palette. Lock the colors you like and keep generating; only the unlocked colors change.
What is a color harmony?
It's a rule for choosing hues that look good together, based on their positions on the color wheel. Analogous colors sit side by side, complementary colors are opposite, and triadic colors are evenly spaced.
How do I build a palette around one color?
Click the pencil on any swatch to enter your color, lock it, and choose a harmony such as Analogous or Monochromatic. New colors are built around the locked color's hue.
How do I use the palette in my code?
Open Export to copy CSS variables, SCSS, a Tailwind config, JSON or a plain hex list, or download the palette as a PNG or SVG image.
How can I check that text will be readable?
Each swatch shows its contrast with white or black text, and the Contrast grid shows the ratio for every pair of colors. Aim for at least 4.5:1 for normal text.
Can I see how my palette looks to color-blind people?
Yes. Use the vision menu to simulate protanopia, deuteranopia, tritanopia or complete color blindness. The swatches and previews update instantly.
Can I save or share my palettes?
Yes. Save palettes in this browser without an account, or copy a share link that opens the exact same colors for anyone.
What is the 60-30-10 rule?
Use a dominant color for about 60% of a design, a secondary color for 30% and an accent for 10%. It keeps designs balanced while letting the accent stand out.
Why does this tool use OKLCH?
OKLCH is a modern color space designed so equal steps look equally different to the eye. It gives smoother, more balanced palettes than older HSL-based generators.
Find your perfect palette
Press space, lock what you love and export when you're ready. Free, instant and no account needed.
Generate a paletteMore color and design tools