Free UI Color Palette Generator Tool

How to use it

1. Set your four colors, or hit Generate palette (or the spacebar) to shuffle.
2. Lock the swatches you want to keep, then shuffle the rest until the preview clicks.
3. Watch the contrast panel. Aim for AA on body text before you commit.
4. Pick a harmony rule if you want the accent to relate to the primary mathematically.
5. Copy the CSS variables straight into your stylesheet, or copy the share link.

Why preview colors in context

Five swatches on a white background tell you almost nothing about whether a palette works on a dashboard or a landing page. The 60-30-10 rule only makes sense once you see it: the background carries about 60% of the surface, text and cards take 30%, and the accent gets the remaining 10% on the button and the tag. Overload the accent and the screen turns into a carnival. This tool shows you that the moment you shuffle.

A worked example: one brand color to a full UI palette

Say a client hands you a single hex value and a logo. That's the whole brand guide. I had exactly this on a scheduling app last spring: the founder sent #2F6BFF and a PNG, and asked for "something clean". Here is the route I took, and you can follow it in the generator above without changing anything else.

First I set the primary to #2F6BFF and locked it. Locking matters more than people think, because the shuffle is random and the one color you cannot negotiate should never move. Then I checked the button contrast immediately, before picking anything else. White text on #2F6BFF lands at 4.62:1, which squeaks past the 4.5:1 AA threshold for normal text. That's fine for a button label at 16px, but I would not put 14px white text on that blue in a table cell. Black text on the same blue is worse at 4.54:1, so white stays.

Next the background. The instinct is pure white, and pure white is usually wrong for an app people stare at for six hours. I went to #FAFAFB, a hair off white, which drops the glare without reading as grey. Body text at #1A2233 against that background gives roughly 15.6:1, which is deep into AAA territory and leaves headroom for the secondary text color I'd derive later, usually around #5B6478 at about 5.1:1.

The accent is the fun part and the part most people ruin. With the harmony rule set to complementary, the tool pushed toward orange near #FF8A2F. On the preview that combination screamed. Too hot next to the blue, and both fighting for the same attention. So I switched to a split complement and landed on #17B8A6, a teal that sits about 150 degrees off the primary. Teal on the off-white background hits about 2.4:1, which fails as text but is perfectly legal as a border, an icon at 24px, or a chart series. That distinction is where the contrast panel earns its keep: contrast requirements attach to the role, not the color.

Total time, maybe nine minutes. What made it fast wasn't the generator picking good colors. It was seeing all four in a button, a card, a tag and a paragraph at once, so the bad combinations died in seconds instead of surviving into a Figma file.

Mistakes I see constantly, and how to catch them

The first one is testing contrast on the wrong pairing. Designers check body text on background, declare victory, and ship a placeholder color, a disabled button and a link hover that all fail. Every color pair a user actually reads needs its own check. If your palette has four colors, you have at least six meaningful pairings, not one.

The second is a saturation mismatch nobody can name but everyone feels. You pick a primary at 85% saturation and an accent at 40%, and the interface looks broken in a way that no single element explains. The OKLCH readout under each swatch is the fastest diagnostic here. If the chroma values are wildly apart while the lightness values match, that's your problem. Nudge them within about 0.05 of each other and the screen settles down.

Third: too many accents. The moment a palette carries two accents, every future decision becomes an argument about which one goes on the button. One accent. Derive tints and shades from it if you need variety. I'd rather ship a slightly boring palette that a team of five can apply consistently than a gorgeous six-color set that turns every pull request into a debate.

Fourth, and this one is subtle: picking colors at full screen brightness in a dark room. Your off-white will look grey and your greys will look black. I set the laptop to about 60% before locking anything.

Where the standard advice stops working

Dark mode is not an inversion

Flipping the background to #121212 and the text to white produces a palette that hurts. Saturated colors bloom against dark backgrounds, so that #2F6BFF primary will vibrate and look neon. The fix is to lower chroma and raise lightness for dark surfaces: something near #6E9BFF keeps the brand identity while reading calmly. Contrast flips direction too, so a color that passed on white can fail on near-black. Build the dark palette as its own pass through the tool, using the same hue but different lightness targets, rather than trusting a filter.

When the brand color simply fails

Plenty of real brand colors cannot carry text. A mid yellow like #F2C400 gives about 1.8:1 with white, nowhere near legal. Do not change the brand color, and do not ship the failure. Use it as a surface, a fill, or a large graphic element, and pair the actual text with a dark neutral from the same hue family. The brand stays recognizable and the page stays readable. I've had that conversation with three clients and none of them minded once I showed the button with white text on it.

Data visualization has different rules

UI palettes optimize for hierarchy. Chart palettes optimize for distinguishability between adjacent categories, including for the eight percent of men with red-green color vision deficiency. A four-color UI palette rarely stretches to six chart series. Build the chart set separately, vary lightness as well as hue so the series survive greyscale printing, and keep one of your UI colors in there as the "primary metric" so the chart still feels like part of the product.

Getting the palette into a real workflow

The CSS variables the tool copies are a starting point, not a design system. What I do next is rename them by role rather than by color. Nobody should write the word blue in a component; they should write surface, surface raised, text primary, text muted, interactive, and interactive hover. The day the brand changes, and it will, you edit four values instead of hunting for every place someone typed a hex.

In Figma those role names become variables in a collection with two modes, light and dark, so a frame flips context with one dropdown. Getting the naming right before you build components saves a painful rename later, and Figma's rename tooling is still not good enough to make that painless. In Tailwind the same names go into the theme colors object, and from that point on a class like bg-surface is the only approved way to paint a background. Any raw hex that shows up in a review is a bug, not a preference.

For handoff, the share link does more work than a screenshot. Engineers can open the exact palette, read the contrast numbers, and see which pairings were checked. On a kickoff call I'll paste the link in chat and shuffle live while people react, which kills the two week email thread where everyone describes colors in words. Three rounds of that and you have consensus before anyone opens a design file.

Common questions

Is this UI color palette generator free?

Yes. It is completely free with no sign-up, no email gate, and no watermark. The whole tool runs in your browser, so nothing is uploaded anywhere. Generate as many palettes as you want.

Can I share a palette I generated?

Yes. Every palette is encoded in the page URL, so the "Copy share link" button gives you a direct link that reopens the exact colors you built. Send it to a client or teammate and they see the same live preview.

Does it check WCAG contrast?

It does. The tool shows the contrast ratio for body text on the background, the button label on the primary color, and the accent on the background, with an AA or AAA badge next to each. WCAG 2.1 AA needs 4.5:1 for normal text and 3:1 for large text.

Does it support OKLCH?

Each swatch shows its OKLCH value under the hex code. OKLCH is useful for building perceptually even tonal scales, and CSS supports it natively in every current browser.

How many colors should a UI palette actually have?

Four decisions: background, text, primary, accent. Everything else is derived. From those four you generate tints, shades and a muted text color, which is usually enough for an entire product. If you find yourself wanting a second accent, that is normally a hierarchy problem in the layout rather than a missing color.

Can I build a dark mode palette with this tool?

Yes, but build it as a separate pass rather than inverting the light one. Set a dark background around #121212 to #1B1B1F, then raise the lightness and lower the chroma of your brand hue so it does not glow. Check contrast again from scratch, because a color that passed on white often fails on near-black and the other way round.

What if my brand color fails contrast for text?

Keep the brand color and change its job. Use it for fills, large graphic shapes, borders and icons at 24px or larger, and pair actual reading text with a dark neutral drawn from the same hue family. A mid yellow like #F2C400 sits near 1.8:1 against white, so it can never carry small text, but it works fine as a surface.

How do I turn the exported CSS variables into design tokens?

Rename them by role before anything else: surface, surface raised, text primary, text muted, interactive, interactive hover. Those names go into Figma variables with light and dark modes, and into the theme colors of your Tailwind config. After that, a raw hex in a component is a bug rather than a style choice.

Want the full breakdown of Coolors, Adobe Color, Realtime Colors, and Huemint? Read the guide: Color palette generators for UI design, tested.