Image → Tailwind v4 @theme

Tailwind color palette
from an image

Q: What utilities do the exported colors generate?

Each --color-* entry in an @theme block becomes the full set of color utilities — bg-, text-, border-, ring-, fill- and the rest — using the variable name you see in the export.

Extract the colors from any image and copy out a Tailwind v4@theme block that is ready to paste. No transcribing hex codes into a config file by hand.

Tailwind v4 ready
v3 via CSS variables
Nothing uploaded

Drop an image here

or paste with Ctrl+V — JPG, PNG, WebP, GIF, AVIF or BMP, up to 50 MB

Choose an image

Your image is processed on your device and never uploaded.

Once a palette appears, choose Tailwind v4 in the export panel.

What you get

A theme block, then utilities

Tailwind 4 reads its theme from CSS, so the export is a real stylesheet fragment rather than a JavaScript object.

src/styles/app.css

@import "tailwindcss";

@theme {
  --color-color-1: #2b4a6f;
  --color-color-2: #d98f4e;
  --color-color-3: #f2e6d8;
  --color-color-4: #1d2b36;
}

Any component

<div class="bg-color-3 text-color-4">
  <button class="bg-color-1 text-color-3 ring-color-2">
    Save changes
  </button>
</div>

Steps

Upload your image. Drag in a screenshot, photo or logo, or paste from the clipboard with Ctrl+V.
Choose the color count. Use the slider to pick between 2 and 16 colors, and switch ranking between dominant, vibrant and muted.
Select the Tailwind v4 export. Open the export panel and choose Tailwind v4 to get an @theme block containing every palette color.
Paste it into your CSS. Copy the block into your Tailwind entry CSS file. The colors become bg-, text-, border- and ring- utilities immediately.

If you are still on Tailwind v3

Version 4 moved theme configuration out of tailwind.config.js and into CSS. On v3 the @theme block will do nothing, so take theCSS variables export instead and reference the values in your config:

Put the :root block in your stylesheet, then intailwind.config.js settheme.extend.colors['color-1'] = 'var(--color-1)' for each entry. The utilities behave the same; only the wiring differs.

Why the names are positional

Exports are named color-1 through color-n, ordered by the ranking mode you picked. That is a deliberate choice. Labeling the largest clusterprimary would assert something about your design hierarchy that an image cannot tell us — a photograph's most common color is usually a background, not a brand color.

Rename them as you paste. The point of the export is to skip the transcription, not to decide your semantics.

HEX or OKLCH in your theme?

The export writes HEX, because it works everywhere and diffs cleanly in review. If you intend to generate variations — a hover state one step darker, a disabled state one step lighter — switch the swatch readout to OKLCH and use those values instead.

The reason is perceptual uniformity: subtracting 10% lightness in OKLCH looks like the same size of change on every hue, which is not true of HSL. Tailwind 4 acceptsoklch() values in @theme without any extra setup.

Check contrast before you commit

A palette pulled from an image has no idea which of its colors will end up behind text. Before you wire one to text- utilities, test the pairing in thecontrast checker — it reports the WCAG 2.2 ratio and suggests the nearest passing shade when a combination falls short.

Frequently asked questions

How do I create a Tailwind color palette from an image?

Upload an image, set how many colors you want, then open the export panel and choose Tailwind v4. Copy the generated @theme block into your CSS entry file and the colors become Tailwind utilities.

Does this work with Tailwind v4 or the older config file?

The export targets Tailwind v4, which moved theme configuration out of JavaScript and into CSS via @theme. If you are still on v3, take the CSS variables export instead and map the values into the theme.colors object in tailwind.config.js.

What utilities do the exported colors generate?

Each --color-* entry in an @theme block becomes the full set of color utilities — bg-, text-, border-, ring-, fill- and the rest — using the variable name you see in the export.

Why are the colors named color-1, color-2 and so on?

Names are positional and ordered by the ranking mode you chose. Calling the largest cluster primary would be a claim about your design that the tool has no basis to make, so it stays neutral and leaves the semantics to you.

Should I use HEX or OKLCH in my Tailwind theme?

The export uses HEX for maximum compatibility. If you plan to generate tints and shades programmatically, switch the swatch readout to OKLCH and use those values instead — lightness steps in OKLCH look evenly spaced, which HEX and HSL do not guarantee.

Can I export to SCSS or CSS variables instead?

Yes. The same palette exports as CSS custom properties, SCSS variables with an iterable $palette map, W3C JSON design tokens, an SVG swatch strip, or a plain list of HEX codes.