Visual Preview Lab

See your palette doing real work — rendered as programmatic UI mockups. Every scene is pure CSS/SVG; no images, no AI. Change the palette and the scenes repaint instantly.

Palette

Paste three to six colors, separated by spaces or commas.

Semantic roles

background#FBFAF8surface#2F9E63text#16161Dtext-muted#1F7A8Cprimary#E4572Esecondary#1F7A8Caccent#2F9E63

Palette

#FBFAF8
#16161D
#E4572E
#1F7A8C
#2F9E63

Preview

● brand
HomeDocsPricingSign up

Design that ships

Your palette in a real marketing page — headline contrast, muted body copy, one primary action.

Get startedLearn more

Roles are assigned automatically: lightest = background, darkest = text, most saturated = primary. Adjust any role from the palette generator.

Visual Preview Lab — See Your Palette in Real UIs — Tintiva