tints.dev
Star on GitHubFollow me on TwitterAPI
PeLi
50
100
200
300
400
500
600
700
800
900
950
PeLi
50
100
200
300
400
500
600
700
800
900
950
PeLi
50
100
200
300
400
500
600
700
800
900
950
PeLi
50
100
200
300
400
500
600
700
800
900
950
primary
secondary
tertiary
neutral

Lightness 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 hexadecimal colour. By default this is stop 500, but it can be changed to any stop from 50-950.

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 principles are inspired by the excellent Refactoring UI book by Adam Wathan & Steve Schoger. The same book 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-950 Palette from just a single Hex value.

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

Credits

Made by Simeon Griggs

Tailwind CSS Version:
Output color mode:
@theme {
  --color-primary-50: oklch(0.984 0.007 286.46);
  --color-primary-100: oklch(0.94 0.025 288.37);
  --color-primary-200: oklch(0.85 0.068 285.81);
  --color-primary-300: oklch(0.765 0.108 284.76);
  --color-primary-400: oklch(0.674 0.154 283.18);
  --color-primary-500: oklch(0.593 0.193 280.79);
  --color-primary-600: oklch(0.511 0.23 276.97);
  --color-primary-700: oklch(0.421 0.234 273.27);
  --color-primary-800: oklch(0.32 0.179 273.06);
  --color-primary-900: oklch(0.229 0.127 273.39);
  --color-primary-950: oklch(0.158 0.088 274.05);
  --color-secondary-50: oklch(0.984 0.008 27.43);
  --color-secondary-100: oklch(0.95 0.023 24.19);
  --color-secondary-200: oklch(0.878 0.061 25.87);
  --color-secondary-300: oklch(0.814 0.101 27.69);
  --color-secondary-400: oklch(0.749 0.146 30.02);
  --color-secondary-500: oklch(0.687 0.198 34.85);
  --color-secondary-600: oklch(0.61 0.194 36.8);
  --color-secondary-700: oklch(0.5 0.159 36.84);
  --color-secondary-800: oklch(0.383 0.121 36.98);
  --color-secondary-900: oklch(0.276 0.088 36.22);
  --color-secondary-950: oklch(0.215 0.068 37.62);
  --color-tertiary-50: oklch(0.984 0.006 17.54);
  --color-tertiary-100: oklch(0.942 0.023 11.04);
  --color-tertiary-200: oklch(0.861 0.062 11.02);
  --color-tertiary-300: oklch(0.772 0.11 12.13);
  --color-tertiary-400: oklch(0.693 0.163 13.04);
  --color-tertiary-500: oklch(0.613 0.208 14.68);
  --color-tertiary-600: oklch(0.523 0.177 14.77);
  --color-tertiary-700: oklch(0.432 0.147 14.69);
  --color-tertiary-800: oklch(0.334 0.114 14.76);
  --color-tertiary-900: oklch(0.244 0.083 14.99);
  --color-tertiary-950: oklch(0.197 0.068 15.17);
  --color-neutral-50: #fcfcfc;
  --color-neutral-100: #f1f1f1;
  --color-neutral-200: oklch(0.871 0.004 286.58);
  --color-neutral-300: oklch(0.794 0.007 286.38);
  --color-neutral-400: oklch(0.708 0.009 286.28);
  --color-neutral-500: oklch(0.629 0.012 286.12);
  --color-neutral-600: oklch(0.535 0.015 285.91);
  --color-neutral-700: oklch(0.442 0.015 285.82);
  --color-neutral-800: oklch(0.336 0.014 285.66);
  --color-neutral-900: oklch(0.241 0.009 285.7);
  --color-neutral-950: oklch(0.198 0.008 285.68);
}

Paste this into the css file with your Tailwind config