Text to palette

Color palette generator that reads your words

Describe a mood, a brand, a season or a place. You get five colors with a job each (background, surface, primary, secondary and accent), checked for readable contrast and ready to paste into CSS, Tailwind or Figma.

Live UI preview

WCAG 2.2 contrast

Export

How the palette generator works

Most palette generators hand you five random colors and leave the hard part to you: deciding which one is the background, which one the button, and whether the text will still be readable. This one starts from what you want the design to feel like and works backwards to a palette you can ship.

01 · READYour description is matched against more than 110 moods, scenes, seasons, festivals and brand words, each tied to the hues people associate with it. Modifiers such as pastel, neon, muted, dark, warm and cool push saturation, lightness and temperature.

02 · ASSIGN ROLESThe colors are built for a job: a quiet background and surface, a confident primary, a supporting secondary and one accent to draw the eye. A low-key mood becomes a dark interface, a bright one a light interface.

03 · CHECK CONTRASTEvery pairing that carries text is measured with the WCAG 2.2 contrast formula. 4.5:1 passes AA for body copy, 3:1 passes for large headings, 7:1 is AAA.

04 · EXPORTLock the colors you like, shuffle the rest, then copy CSS custom properties, a Tailwind theme block or JSON with HEX, RGB and HSL values.

What makes a palette usable, not just pretty

Proportion matters more than the colors themselves. The 60-30-10 rule is a reliable starting point: about 60% background and surface, 30% primary and secondary, 10% accent. That is why the generator gives the background and surface low saturation and saves the strongest color for the accent.

Contrast is not optional. Around one in twelve men has some form of color vision deficiency, and everyone reads worse on a phone in sunlight. If a pairing fails AA, use it for decoration rather than for text.

Start from an image when you have one. If the brand already has a hero photo or a product shot, the image color picker pulls out its dominant colors and sends them straight back here as a palette. To explore schemes by color theory instead, try the color wheel.

Frequently asked questions

Is the color palette generator free?

Yes. There is no sign-up and no limit on how many palettes you generate or export.

How does it turn a description into colors?

It reads your words against a vocabulary of more than 110 moods, scenes, seasons and brand terms, each linked to the hues, saturation and lightness people associate with it, then builds the five colors with color-theory rules. It runs in your browser, so your prompt is never sent anywhere.

What do AA and AAA mean in the contrast check?

They are WCAG 2.2 accessibility levels. AA needs a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1. A pairing marked Fail should not carry text.

Can I keep some colors and change the others?

Yes. Click LOCK on any swatch, then press Shuffle unlocked. Locked colors stay put while the rest are regenerated around them.

How do I use the palette in Figma, CSS or Tailwind?

Choose CSS variables, Tailwind or JSON in the Export panel and press Copy code. For Figma, click any swatch to copy its HEX value and paste it into the fill field.

Can I generate a palette from a photo?

Yes. Open the image color picker, upload a photo and press Turn into a UI palette. The colors open here with roles already assigned.