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 echo

❄️ Cool Tone
Base text: 19.79:1 · AA normal text

Text color against the base surface only

Base

White

#F4F9FA

Primary

Cadet Blue

#009CB0

Accent

Slate Blue

#235CCD

Secondary

Dark Slate Blue

#0056A9

Neutral

Dark Slate Gray

#3D5148

Info

Teal

#007987

Success

Medium Sea Green

#A0A900

Warning

Peru

#DD7D00

Error

Crimson

#C03F57

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.