Color palette visualizer

See a palette or brand color on a complete website, with real fonts, live contrast checks and light and dark modes.

How to preview colors on a real UI

  1. Start from a palette, for example by opening it from the generator, or switch to From brand color and pick one color.
  2. Choose a preview template: landing page, dashboard, mobile app or article, and switch between light and dark mode.
  3. Click a role such as background or primary to give it a different color from the palette, or press Shuffle roles to try another assignment. Pick a font pair, or shuffle the fonts.
  4. Check the live contrast list and apply a Fix to any failing pair, then copy the roles as CSS variables, Tailwind v4 or shadcn/ui tokens, or copy the link to share the preview.

What you can do

  • Four preview templates

    See your colors on a landing page, a dashboard, a mobile app screen and an article layout.

  • Role assignment

    Decide which palette color is the background, the text, the primary action and the other interface roles, and reset any change.

  • Real fonts

    Pair heading and body fonts from a built-in list and see them in the preview, with a type scale.

  • Live contrast checks

    Key text and background pairs are checked as you edit, with a one-click fix for pairs that fail.

  • Light and dark modes

    Switch the whole preview between light and dark to see both versions of your colors.

  • Export and share

    Copy the roles as CSS variables, Tailwind v4 or shadcn/ui tokens, or copy a link that opens the same preview.

Frequently asked questions

How do I preview a color palette on a website?

Open the visualizer with your palette, choose a template such as a landing page or a dashboard, and see the colors applied to a full layout. Switch between light and dark mode and change which color plays which role.

Why preview a palette on a real layout?

Swatches hide problems. On a page you see how a color behaves as a button, a link, body text or a card background, and whether the text on it stays readable.

Can I use my own brand color instead of a palette?

Yes. Choose From brand color, enter a hex code, and the visualizer derives the interface roles from that one color.

Does the visualizer check accessibility?

Yes. It lists the contrast of the key text and background pairs, marks the ones that fail, and offers a Fix that adjusts the color for that pair.

How do I export the colors?

Use the Share and export section to copy the roles as CSS variables, a Tailwind v4 theme or shadcn/ui tokens, or copy the link to the preview.