LuLi
50
#EBF3FE
100
#D8E6FD
200
#B1CEFB
300
#8AB5FA
400
#639CF8
500
#3B82F6
600
#0B60EA
700
#0848B0
800
#053075
900
#03183B

Lightness/Luminance Distribution 0-100

100 (White)
0 (Black)
-
Lightness
Hue
+

Hue Shift

-
Lightness
Saturation
+

Saturation Shift

Palette Generator and API for Tailwind CSS

Read the launch blog post for full details on how this works.

Palette Creator

Set the initial Value as a valid hexidecimal colour, this is swatch 500.

For colours that have 100% Saturation, make the Palette more interesting by shifting the Hue up or down.

Palettes starting from a Base colour with little Saturation get more interesting by increasing Saturation at the extremes.

Shift the Minimum/Maximum Lightness/Luminance to spread out the rest of the colours to the extremes of white and black. Switch between Lightness and Luminance to produce a different spread of colours at the extremes.

These principals are inspired from the excellent Refactoring UI book by Adam Wathan & Steve Schoger. The same book which recommends against automated tools, just like this one!

This tool exists to fast track the creation of new palettes.

Palette API

Any set of Palettes can be fetched via an API. You may find this useful for design tools that need to generate a 50-900 Palette from just a single Hex value.

Currently the API wil only return a Palette using the base hex value, with no options to had HSL tweaks.

Credits

Made by Simeon Griggs

Paste this into your tailwind.config.js

{
  "colors": {
    "blue": {
      "50": "#EBF3FE",
      "100": "#D8E6FD",
      "200": "#B1CEFB",
      "300": "#8AB5FA",
      "400": "#639CF8",
      "500": "#3B82F6",
      "600": "#0B60EA",
      "700": "#0848B0",
      "800": "#053075",
      "900": "#03183B"
    }
  }
}