Sifency Tools
Let’s Talk

Tailwind colour palette from an image

Tailwind projects want a colour with eleven steps, not one value. Drop an image, and each colour comes with a 50 to 950 scale written as theme variables you can paste straight into your CSS. Nothing is uploaded: your image stays in your browser.

Drop an image here

Or paste one with Ctrl+V. PNG, JPG, WebP, GIF, AVIF or BMP, up to 25 MB.

More palette ideas

How it works

  1. Add an image

    Drop a picture on the page, paste it with Ctrl+V, or browse for a file. A logo, a photo, a screenshot or a product shot all work.

  2. Choose how many colours

    Pick 4, 6, 8 or 10. The most common colours come first, with the share of the image each one covers, so you can see which colour leads.

  3. Pick, scale and copy

    Click the image to pick any exact pixel with a magnifier, open an eleven-step tonal scale for any colour, and show the colours as HEX, RGB, HSL or OKLCH.

  4. Export it

    Copy the palette as CSS variables, a Tailwind theme, SCSS, JSON or plain text, download it as a file, or save a PNG strip of the colours.

Questions about a Tailwind colour palette

How do I get a Tailwind colour palette from an image?

Add your image, and 4 colours are chosen for you. You can change that to 4, 6, 8 or 10. Then open Export, choose Tailwind with tonal scales and copy the code. Rename a variable after pasting, for example from dodger-blue to brand, so class names stay meaningful in your markup.

Where do I paste the Tailwind theme code?

Put the @theme block in the CSS file where you import Tailwind. Classes such as bg-dodger-blue-500 and text-gold-900 are then available straight away.

How many colours should a Tailwind colour palette have?

Four colours is plenty here, because each one expands into eleven steps. A main colour, an accent and two neutrals cover most interfaces.

Is the image I use for my Tailwind colour palette uploaded?

No. The picture is read by your own browser in a background worker, so your Tailwind colour palette stays private and the page keeps working offline once it has loaded.

Next step

Check that these colours are readable

A palette looks fine until text sits on it. Test any pair from your palette against WCAG AA and AAA, and get the closest passing colour when one fails.

Open the Contrast Checker
View all tools
Contrast CheckerCheck WCAG contrast and fix failing colours in one click.Open toolColour Placeholder GeneratorExact-size placeholder images in any colour, named for you.Open toolFavicon and App Icon GeneratorOne image in, every icon and the HTML snippet out.Open toolDevice Mockup GeneratorPut a screenshot in a clean device frame in seconds.Open tool

About these tools

Small tools, made by Sifency

Sifency is a small studio that builds themes, plugins and web apps. These tools began as the things we kept needing ourselves, so we tidied them up and left them open for everyone. There is nothing to sign up for.