Skip to content

UI colors: try a Tailwind palette in a real interface

Pick a Tailwind color family and see how it looks on buttons, charts, forms, cards and badges. Adjust the main tones, generate a random palette and export the result.

How to use the color preview

  1. 1

    Pick a family

    Click any of the color dots in the top bar. The page address keeps the chosen family, so you can share the link.

  2. 2

    Adjust the tones

    Change 600 (primary), 500 (secondary) or 200 (soft) with the picker, or generate a random palette. The whole interface updates instantly.

  3. 3

    Export the palette

    When you like it, export the full 50 to 950 scale for Tailwind v4, Tailwind v3, Figma or CSS. Click any shade in the scale to copy it.

Frequently asked questions

To see a palette applied before taking it to your project: how light and dark tones work together, whether buttons stand out enough and whether charts and forms read well.

600 is used for actions and highlighted elements, 500 for secondary elements and charts, 100–200 for backgrounds and soft states, and 700–800 for text on light backgrounds.

Yes. The page address includes the chosen family, for example ?family=yellow, and opening the link loads it directly.

You can export the full scale as Tailwind v4 variables, a Tailwind v3 config, Figma styles, CSS variables or just the HEX, RGB, HSL and OKLCH codes.