How to produce custom colour palettes in Tailwind CSS

The default Tailwind colour schemes are pretty nice but usually I want to come up with my own colour schemes.

There are a set of very handy online tools that I use to make this a very simple process.

Step 1: Choose a base colour

The default Tailwind colour palettes are numbered from 50 to 900. The higher the number, the darker the shade.

First, I pick the colour that will be my middle-range 500 shade.

This will be the base colour from which I develop my colour scheme. For this example, I have chosen #A1CDD8.

If you need one, Google has a colour picker.

#A1CDD8

Step 2: Name your colour

In Tailwind CSS class names, colours are referred to by name, for example:

<div class="bg-slate-100 text-blue-800">Some text</div>

I need to come up with a name as well. So what do I call my lovely colour?

Rather than scratch my head inventing a nice sounding colour name, I use the handy tool at Color-Name to do it for me. It takes any hex code and provides a colour name.

First I visit www.color-name.com.
I choose the By Hex option
I enter the hex value of my colour (#A1CDD8) and click the magnifying glass icon to search.
My colour name is now revealed. In this case it is Crystal.

A quick Google comes up with plenty of other colour naming sites you may want to try. For example, for #A1CDD8:

Name that Color came up with "Sinbad". It does evoke a sparkling Arabian sea I suppose, if you squint at it.
Color Namer suggested "Children's Soft Blue". A bit wordy perhaps.

I'll stick with Crystal.

Step 3: Choose a colour combination

For my colour scheme, I want one or more additional colours that look good alongside my base colour.

Very usefully, the Color-Name tool I just used to name my colour also lists a whole load of palettes relating to my named colour including Complementary, Analagous, Triadic and more.

I tend to like the triadic palette as it produces a nice set of contrasting colours.

As you can see from the screenshot above, Color-Name also provides me with (rather more lengthy) names for the other colours, which I'll shorten as follows.

crystal

orchid

springbud

There are plenty of other great colour wheel tools online. Here are a couple of good ones:

Step 4: Generate a palette for each colour

For this final step, I use the excellent Tailwind Palette Generator by Simeon Griggs.

I visit the Palette Generator
I click the Add button in the top right twice as I have three palettes to create, one for each colour.
For each colour I enter the colour name and corresponding hex value.
There are tons of other settings I could play with using this tool, but for my purposes, I'm all set.

I then copy the generated code and paste it into my tailwind.config.js, so my theme.extend.colors entry looks like this:

colors: {
  "crystal": {
    "50": "#F4F9FB",
    "100": "#EDF5F8",
    "200": "#DBECF0",
    "300": "#C5E0E7",
    "400": "#B3D7E0",
    "500": "#A1CDD8",
    "600": "#6BB0C2",
    "700": "#428C9F",
    "800": "#2D606C",
    "900": "#163036"
  },
  "orchid": {
    "50": "#FBF4F9",
    "100": "#F8EDF5",
    "200": "#F0DBEC",
    "300": "#E7C5E0",
    "400": "#E0B3D7",
    "500": "#D8A1CD",
    "600": "#C26BB0",
    "700": "#9F428C",
    "800": "#6C2D60",
    "900": "#361630"
  },
  "springbud": {
    "50": "#F9FBF4",
    "100": "#F5F8ED",
    "200": "#ECF0DB",
    "300": "#E0E7C5",
    "400": "#D7E0B3",
    "500": "#CDD8A1",
    "600": "#B0C26B",
    "700": "#8C9F42",
    "800": "#606C2D",
    "900": "#303616"
  }
}

Now I can refer to these colours in my Tailwind classes, just like any of the default colours.

<div class="bg-springbud-200 p-4 w-96">
  <div class="bg-crystal-100 p-4">
    <h1 class="text-orchid-600">Metamorphosis</h1>
    <p class="text-crystal-600">
      As Gregor Samsa awoke one morning from uneasy dreams
      he found himself transformed in his bed into a gigantic insect
    </p>
  </div>
</div>