CSS Palette Visualizer

It shows your colors on realistic page layouts instead of as flat swatches. A color that looks great in a row of five can be too loud as a background or too faint as body text, and seeing it on a real interface makes that obvious.

Roles describe what each color does: Background fills the page (white by default), Surface is for cards and panels, Primary is for main buttons and links, Accent is for badges and highlights, Text is for headings and body copy (black by default), and Muted text is for captions. Exporting by role gives you variables like --color-primary that read clearly in your CSS.

It swaps Background and Text, then rebuilds Surface and Muted text from the new pair so cards and captions keep the same relationship. Primary and Accent stay the same. When the dark preview is on, the CSS output adds a prefers-color-scheme: dark block.

The pairs the mockups actually use: text and muted text on the background, text on surfaces, button text on Primary, badge text on Accent (all need 4.5:1 for WCAG AA), and Primary links and icons on the background (3:1). Click Fix to open a failing pair in the Contrast Checker.

Yes. The roles are saved in the page URL, so copying the address shares the exact palette. Palettes you send here from the Color Palette Generator or Image Color Picker are assigned to roles automatically: the most colorful become primary and accent, a light one becomes the surface. Background and Text start locked to white and black — unlock them if you want to change them.