UI Color Palette Generator

Generate a draft palette for a web interface, inspect its color roles, and copy values in common CSS formats. Check text contrast and review the colors in your own layout before using them.

Edit the palette directly

Click any swatch to change its color.

prismatic wave

🔥 Hot Tone
Base text: 17.21:1 · AA normal text

Text color against the base surface only

Base

Light Gray

#EBE8E7

Primary

Sienna

#B04741

Accent

Olive

#707300

Secondary

Saddle Brown

#814200

Neutral

Charcoal

#484044

Info

Cadet Blue

#009AB4

Success

Forest Green

#008627

Warning

Chocolate

#CB5F00

Error

Deep Pink

#EE4C84

How does the UI Palette Generator work?

The generator creates a randomized theme with base, primary, secondary, accent, and status colors. These roles are a useful starting point, but they do not replace decisions about your product's hierarchy, brand, or interface states.

Perceptual Uniformity (OKLCH)

The generator represents colors in OKLCH, which can make lightness and chroma easier to adjust consistently across hues. The generated colors may still need tuning for your screen, brand, or framework.

Built-in Accessibility Checks

The contrast indicator at the top compares the theme's base text color with its base surface. It does not test every text and background pair in the palette or guarantee that the whole interface meets WCAG. Check the combinations used in your actual components.

Frequently Asked Questions

How do I export this palette?

Hover over any color to see export options. You can click to copy the color in HEX, HSL, or OKLCH formats directly to your clipboard. To fully export a complete TailwindCSS or DaisyUI theme, you can use our Full Theme Editor.

What is the "Tone"?

Tone is a rough warm/cool/neutral color description based on the palette's hues. It is a visual label, not an assessment of how a palette will feel to every viewer or how well it suits a product.