How does the visualizer decide which color goes where?

Each scene has role slots. The lightest, least saturated colors are assigned to backgrounds and walls; the most saturated go to accents; the rest fill mid-tones. Text is chosen last, against its final background, so it always meets WCAG AA contrast.

Can I change the assignment?

Yes. Tap any role slot, then tap a palette color to assign it. Tap Auto-assign to return to the computed layout.

Where does the palette come from?

Pass a palette in the URL (a list of hex codes), hand one off from the generator or the image extractor, or edit it here. The default shows a sample palette to start from.

Palette visualizer

A flat row of swatches never tells you how a palette will feel. Drop one into a real scene and it does. Every scene keeps its text readable no matter which colors you feed it.

How this works

1 Bring a palette in from a link, or pick colors here.
2 See it in a room, a web UI, a dashboard, an outfit, a brand kit, or fabric.
3 Switch the view lens to check print and color-blindness, then reassign roles until it feels right.

Wall, trim, sofa, accent pillows, and rug.

View

Roles : tap a role, then a color

Palette

Guide

How role assignment works

Coolors and Adobe Color show palettes as swatches or, at most, an abstract mockup. This visualizer puts a palette into six everyday contexts: a living room, a website interface, a data dashboard, an outfit, a brand kit, and woven fabric, because that is where color decisions actually get made. A view lens re-renders any scene as it would print, or through the three common types of color blindness.

Assignment is not random. Each color is measured in OKLCH, a perceptually even color space. The lightest, least saturated colors become backgrounds and walls, where a strong color would overwhelm. The most saturated colors become accents, the pillows and buttons that should catch the eye. Everything in between fills the mid-tones.

Text is the part most mockups get wrong. Here, each text slot is resolved last, after its background is known: we take the palette color with the best contrast on that background, and if it still falls short of the WCAG AA threshold of 4.5:1 we walk its lightness until it passes, keeping the hue. If nothing in the palette can be made to work, we fall back to black or white. The upshot is that a scene can never render unreadable text, whatever palette you throw at it.

You are not stuck with the computed layout. Tap any role slot, then tap a palette color, to assign it by hand; tap Auto-assign to reset. When a scene looks right, download it as a PNG to share, or copy a link that reopens the exact palette here.

FAQ

Common questions

Which palette formats can I paste in the URL?: Any list of six-digit hex codes works, separated by dashes or run together. The generator and the image extractor both hand palettes off in this form.
Do the scenes reflect real design rules?: They follow the usual heavy/light balance (quiet backgrounds, one or two accents), but they are a starting point for feel, not a prescription. Reassign roles to test alternatives.
Is anything uploaded?: No. Everything runs in your browser; the palette lives only in the page and the link you choose to copy.