Using the Tailwind CSS Palette Generator and API

Creating hand-tooled 10-color Palettes can be tough. Get a head start by rapidly generating a full suite of Swatches from a single base value.

View in Sanity Studio


The Tailwind CSS base theme comes with a fantastic set of colours. However, relying on them is a surefire way to ensure every Tailwind site looks the same.

Creating ten harmonious Swatches for a Palette can be hard work. So a while back, I made the first version of this Palette Generator over a weekend – and now I am excited to show off version 2!

Try it out!

How it works

Tailwind CSS Palette Generator Walkthrough
Tailwind CSS Palette Generator Walkthrough

Give the tool a hex value for the middle 500 swatch, and it will generate a full suite of swatches from 50 to 900.

Then you can make the palette more interesting by adjusting the Hue, Saturation and Lightness values.

Adjusting the Hue will change the Swatches at the extremes of the Palette away from the base colour. This can make a Palette much more interesting as it is no longer monotone.

Adjusting the Saturation can help brighten up Swatches at the extremes instead of a washed-out Palette. Particularly useful for base colours with little Saturation to begin with.

Finally, Lightness or Luminance can be modified to set just how dark or light the Palette can get. The values being developed here are for the minimum and maximum values of imagined 0 and 1000 swatches – of which the 50 and 900 swatches will be slightly inside.

The excellent Refactoring UI book by Adam Wathan and Steve Schoger inspires these principles. The same book recommends against automated tools, just like this one!

Updating your Tailwind Config

I'll defer to the Tailwind CSS Docs for adding these colours to your tailwind.config.js file. If you scroll to the bottom of your Palette, you'll see the output and can copy the config settings.

For a quick experiment, you could paste your new Palette into a Playground.

Sharable URLs

Tweak my Brand Colour

A single Palette can be shared with the pretty URL structure below.


Adding additional swatches will create a set of query strings that will save the entire Palette.

Palette API

API Response Example

Any single or set of Palettes can be queried via the API. You can start your URL with /api to return a JSON response with the exact colour swatches.


Purpose of the API

Since Tailwind colours are evaluated ahead of time, the API isn't designed to integrate directly with your tailwind.config.js – but rather for custom widgets or design tools which need to generate a 10-colour palette from a single hex value.

Imagine a Sanity Custom Input that has a single hex colour value but could store all ten colours as a Palette to "theme" something ... this is something I'll probably build at some point as a demo.


There's so much I still want to do!

  • So many Cypress tests
  • Save H/S/L tweaks to the URL for better sharing
  • Save settings to Local Storage
  • Meta share images for more than one palette
  • More excellent error handling for invalid URLs
  • "Toast" popups to signal user actions
  • Demo Layouts to visualise the new colours in action