Tailwind CSS base theme comes with a fantastic set of colors. However, relying on them is a surefire way to make sure every Tailwind site looks the same.
Creating 10 harmonious Swatches for a Palette can be hard work. So awhile back I created the first version of this Palette Generator over a weekend – and now am excited to show off version 2!
How it works
Give the tool a hex value for the middle
500 swatch and it will generate a full suite of swatches from
Then you're able to 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 just how light the Palette can get. The values being set here are for the minimum and maximum values of imagined
1000 swatches – which the
900 swatches will be slightly inside of.
These principals are inspired from the excellent Refactoring UI book by Adam Wathan and Steve Schoger. The same book which 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 tailwind.new Playground.
A single Palette can be shared with the pretty URL structure below.
Adding additional swatches will create a set of query strings which will save the entire Palette.
Any single or set of Palettes can be queried via the API. Start your URL with
/api to return a JSON response with the same 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 which has a single hex colour value, but could store all 10 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
- Nicer error handling for invalid URLs
- "Toast" popups to signal user actions
- Demo Layouts to visualise the new colours in action