Palettes
Generate a starting direction from a vibe, then see how your colors balance by role. Set each swatch's role in the palette bar above and pick a ratio.
Legible pairings
Each color as a background, every other color as text on top. The badge shows what that pairing is safe for, based on WCAG contrast ratios.
AA
4.5 : 1 and up
Body text: paragraphs, labels, buttons, anything small.
LG
3 : 1 to 4.5 : 1
Large text only (headings 24px+, or bold 19px+).
✕
Under 3 : 1
Don't pair. Too low to read comfortably.
Mesh gradient
A soft, blended gradient built live from your palette. Drag the points to reshape the flow, tune the spread, then export a clean PNG for backgrounds, hero art, or social.
Your browser blocked WebGL, so the mesh can't render here. It'll work in any standard browser.
One point per palette color. Add or remove colors above to change the mesh.