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 Studio2022-01-01
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!
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!
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.
Syntax:https://www.tints.dev/{name}/{hex-value}
Example:https://www.tints.dev/brand/2522FCAdding additional swatches will create a set of query strings that will save the entire Palette.
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.
Syntax:https://tailwind.simeongriggs.dev/api/{name}/{hex-value}
Example:https://tailwind.simeongriggs.dev/api/brand/2522FCSince 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!