Drop any 5-color palette into three real interfaces — dashboard, landing page, mobile app — and see it as an actual product. Roles are assigned automatically: primary, accent, surface and text all find their place.
Edit palette (click a swatch to replace)
Five colors dropped into three real interfaces, with roles assigned automatically.
Hit "Visualize" on any community palette or the palette board to carry it in, or edit the five HEX values by hand.
The engine assigns primary, secondary, accent, surface and text by lightness and chroma - see where each one lands in every mockup.
Flip between dashboard, landing page and mobile app in real time; click any swatch to replace a color on the spot.
Four questions people actually ask about palette preview.
Keep going from here and put the colors to work.
Spacebar to randomize, lock, drag to reorder, share by URL - everything a palette board should do.
Any color into an 11-step design-system scale, perceptually even in OKLCH, WCAG contrast per step, export to Tailwind/CSS/SCSS/JSON.
WCAG 2.1 contrast validation between any foreground and background color.
Describe a scene or mood in one line — get a five-role palette with rationale.