Is the palette visualizer free?

Yes: the board, the palette panel, Inspect and Export are free, with no account and no limit. Generating a palette from a sentence, or tracing a PNG, JPG or WebP you drop in, uses one of your 20 AI credits a day.

Can I see my palette on my own design?

Yes: drop an SVG on the board and it is repainted from your palette without leaving your browser. A PNG, JPG or WebP is traced to vector first, which uses one AI credit.

Can I get a color palette from an image?

Yes: drop an image on the palette panel's import field, or pick one with its image button, and the visualizer reads as many colors as your palette has now, 3 to 5, most-used first. An SVG gives the colors it declares instead. The image is read in your browser and never uploaded. Dropping a PNG, JPG or WebP on the board itself is a different thing: it is traced into vector artwork, which uses one AI credit.

How do I get the palette out?

Open Export and take it as CSS custom properties, a Tailwind theme, W3C design tokens, ASE or SVG swatches, written in slot order so each color keeps its role.

Color Palette Visualizer on Real Mockups

About this toolwhat it does, and what it costs

Home › Tools › Palette visualizer

The palette visualizer previews a color palette on real designs — app screens, logos and illustrations — instead of five rectangles in a row. Set a palette in the dock and the whole board repaints; drop in your own artwork and it is painted the same way.

How to preview a color palette on real designs

Put a palette in the dock. Open the palette panel and paste hex, CSS, Tailwind or tokens, drop an image on its import field to pull its colors out, browse 44 categories of ready-made palettes, or generate ten from a sentence.
Judge it on the board. Every app screen, logo and illustration on the board is recolored from the palette. Drop your own SVG — or a PNG, JPG or WebP, which is traced to vector first — and it joins the board painted the same way. Pan, zoom, or click a group on the minimap to fly to it.
Reorder the slots. Drag a row in the palette panel to change which color drives which slot. The mockups are painted through those slots, so the whole board repaints.
Inspect it. Variations, harmonies, a color-vision pass and a pass-fail contrast grid for every ordered pair, in one scroll.
Export with the roles. Take the palette out as CSS custom properties, a Tailwind theme, W3C design tokens, ASE or SVG swatches — written in slot order so the next person knows which color drives what.

What it costs

The board, the palette panel, Inspect and Export are free and run in your browser, with no account and no limit: nothing on the board is uploaded anywhere. Two steps call a model and spend one of your 20 AI credits a day, shared across the AI tools — generating a palette from a sentence, and tracing a PNG, JPG or WebP into vector when you drop one. An SVG never leaves your browser. Credits refill at 00:00 UTC, and a call that fails or is canceled is not charged.

Questions

Is the palette visualizer free?: Yes: the board, the palette panel, Inspect and Export are free, with no account and no limit. Generating a palette from a sentence, or tracing a PNG, JPG or WebP you drop in, uses one of your 20 AI credits a day.
Can I see my palette on my own design?: Yes: drop an SVG on the board and it is repainted from your palette without leaving your browser. A PNG, JPG or WebP is traced to vector first, which uses one AI credit.
Can I get a color palette from an image?: Yes: drop an image on the palette panel's import field, or pick one with its image button, and the visualizer reads as many colors as your palette has now, 3 to 5, most-used first. An SVG gives the colors it declares instead. The image is read in your browser and never uploaded. Dropping a PNG, JPG or WebP on the board itself is a different thing: it is traced into vector artwork, which uses one AI credit.
How do I get the palette out?: Open Export and take it as CSS custom properties, a Tailwind theme, W3C design tokens, ASE or SVG swatches, written in slot order so each color keeps its role.

More free tools

Contrast checkerWCAG ratios
Palette generatorPalettes from a prompt
Image compressorSmaller JPG, PNG, WebP
Image resizerEvery size, every photo
Image converterHEIC, RAW, PSD, TIFF
Remove backgroundTransparent PNG
Image to SVG converterRaster to vector
SVG editorRecolor, erase, export

All online color and image tools

Color palette visualizer: preview a palette on real app screens, logos and illustrations