simeonGriggs.dev
Twitter
GitHub

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.

2022-01-01

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!

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'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 0 and 1000 swatches – which the 50 and 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.

Sharable URLs

Tweak my Brand Colour

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

Syntax:
https://tailwind.simeongriggs.dev/{name}/{hex-value}
Example:
https://tailwind.simeongriggs.dev/brand/2522FC

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

Palette API

API Response Example

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.

Syntax:
https://tailwind.simeongriggs.dev/api/{name}/{hex-value}
Example:
https://tailwind.simeongriggs.dev/api/brand/2522FC

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.

Roadmap

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