https://www.tints.dev/

tints.devPalette Generator + API for Tailwind CSS
541 Stars on GitHubOpen Project on GitHubSay hello on TwitterCopy URL
Open API LinkDemoAdd
hexp-3oklch
 Sponsor tints.dev
Name
[blue                ]
Value
[3B82F6              ]
Open Color Picker
500
Copy this Palette's URL to clipboardOpen this Palette's API URLShow
GraphsDelete blue
Hue[0                   ]
Saturation[0                   ]
Lightness Maximum[100                 ]
Lightness Minimum[0                   ]
LuLuminanceToggle Lightness or LuminanceLiLightness
50
100
200
300
400
500
600
700
800
900
950

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 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

  * Contributions by kevnk
  * Designed with Tailwind CSS (obvs)
      + with a sprinkling of Headless UI
      + and a dash of HeroIcons
  * Built with Remix
  * Hosted on Vercel
  * Content in Sanity.io

Paste this into your tailwind.config.js

Copy to Clipboard

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