Tom Southall
Published on

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.

Tailwind colour palettes

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.


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.

  1. First I visit

    Screenshot of
  2. I choose the By Hex option

  3. I enter the hex value of my colour (#A1CDD8) and click the magnifying glass icon to search.

    Screenshot of displaying your colour name
  4. 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.

Triadic palette

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.


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.

  1. I visit the Palette Generator

  2. I click the Add button in the top right twice as I have three palettes to create, one for each colour.

    Palette Generator
  3. 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.

  4. 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
Styled Example