tints.dev
744 Stars on GitHubOpen Project on GitHubSay hello on Twitter
🤙 Sponsor tints.dev
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
LuLi
50
100
200
300
400
500
600
700
800
900
950
red
pink
fuchsia
purple
amethyst
indigo
blue
sky
cyan
teal
emerald
green
olive
lime
yellow
amber
orange
brown
stone
asphalt
grey

Lightness/Luminance Distribution 0-100

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

Hue Shift

-
Lightness/Luminance
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

Paste this into your tailwind.config.js

{
  "colors": {
    "red": {
      50: "#FFEFEB",
      100: "#FFDCD1",
      200: "#FFBDA8",
      300: "#FF997A",
      400: "#FF764D",
      500: "#FF5722",
      600: "#E63600",
      700: "#AD2800",
      800: "#751B00",
      900: "#380D00",
      950: "#1F0700"
    },
    "pink": {
      50: "#FDEDF5",
      100: "#FBDAEB",
      200: "#F7B5D6",
      300: "#F390C2",
      400: "#F06BAD",
      500: "#EC4899",
      600: "#DE177A",
      700: "#A6115C",
      800: "#6F0C3D",
      900: "#37061F",
      950: "#1C030F"
    },
    "fuchsia": {
      50: "#FBECFD",
      100: "#F7D9FC",
      200: "#EFB4F9",
      300: "#E88EF5",
      400: "#E069F2",
      500: "#D946EF",
      600: "#C613E1",
      700: "#940FA9",
      800: "#630A71",
      900: "#310538",
      950: "#19021C"
    },
    "purple": {
      50: "#F8F0FE",
      100: "#EEDDFD",
      200: "#DCBBFC",
      300: "#CB99FA",
      400: "#BA77F9",
      500: "#A855F7",
      600: "#8815F4",
      700: "#6609BE",
      800: "#44067F",
      900: "#22033F",
      950: "#120222"
    },
    "amethyst": {
      50: "#F4EDF7",
      100: "#ECDFF1",
      200: "#D7BCE1",
      300: "#C49CD3",
      400: "#AE78C4",
      500: "#9B59B6",
      600: "#7D4195",
      700: "#5F3271",
      800: "#3F214A",
      900: "#211127",
      950: "#0F0812"
    },
    "indigo": {
      50: "#F1F1FE",
      100: "#DEDFFC",
      200: "#C2C3FA",
      300: "#A1A3F7",
      400: "#8183F4",
      500: "#6366F1",
      600: "#2326EB",
      700: "#1114BB",
      800: "#0B0D7E",
      900: "#05063D",
      950: "#030321"
    },
    "blue": {
      50: "#EBF3FE",
      100: "#D8E6FD",
      200: "#B1CEFB",
      300: "#8AB5FA",
      400: "#639CF8",
      500: "#3B82F6",
      600: "#0B60EA",
      700: "#0848B0",
      800: "#053075",
      900: "#03183B",
      950: "#010C1D"
    },
    "sky": {
      50: "#E7F6FE",
      100: "#CFEEFC",
      200: "#9ADBF9",
      300: "#6ACAF6",
      400: "#3AB8F3",
      500: "#0EA5E9",
      600: "#0B84BC",
      700: "#08628C",
      800: "#05405B",
      900: "#032230",
      950: "#011118"
    },
    "cyan": {
      50: "#E1FAFE",
      100: "#C8F6FD",
      200: "#8DEBFC",
      300: "#56E2FA",
      400: "#1BD7F9",
      500: "#06B6D4",
      600: "#0590A9",
      700: "#046E81",
      800: "#024854",
      900: "#01262D",
      950: "#011114"
    },
    "teal": {
      50: "#E3FCF9",
      100: "#C8F9F3",
      200: "#91F3E8",
      300: "#59EDDC",
      400: "#22E7D0",
      500: "#14B8A6",
      600: "#109384",
      700: "#0C6E63",
      800: "#084A42",
      900: "#042521",
      950: "#021210"
    },
    "emerald": {
      50: "#E3FDF4",
      100: "#C7FAE9",
      200: "#8EF5D3",
      300: "#56F0BD",
      400: "#1EECA7",
      500: "#10B981",
      600: "#0D9668",
      700: "#0A714E",
      800: "#064B34",
      900: "#03261A",
      950: "#02130D"
    },
    "green": {
      50: "#E9FBF0",
      100: "#CFF7DE",
      200: "#9FEFBC",
      300: "#6FE69B",
      400: "#40DE7A",
      500: "#22C55E",
      600: "#1B9D4B",
      700: "#147538",
      800: "#0D4E25",
      900: "#072713",
      950: "#04160A"
    },
    "olive": {
      50: "#F3F9EC",
      100: "#E9F4DD",
      200: "#D0E7B6",
      300: "#BADB94",
      400: "#A1CF6D",
      500: "#8BC34A",
      600: "#6FA135",
      700: "#547B29",
      800: "#37501B",
      900: "#1D2A0E",
      950: "#0D1306"
    },
    "lime": {
      50: "#F9FBE9",
      100: "#F5F8D8",
      200: "#EBF1B1",
      300: "#E1EA8A",
      400: "#D5E35F",
      500: "#CDDC39",
      600: "#ABBA21",
      700: "#838F19",
      800: "#585F11",
      900: "#2C3008",
      950: "#141604"
    },
    "yellow": {
      50: "#FFFDEB",
      100: "#FFFBD6",
      200: "#FFF7B3",
      300: "#FFF38A",
      400: "#FFEF61",
      500: "#FFEB3B",
      600: "#FAE100",
      700: "#BDAA00",
      800: "#807300",
      900: "#3D3700",
      950: "#1F1C00"
    },
    "amber": {
      50: "#FFF9E5",
      100: "#FFF2CC",
      200: "#FFE79E",
      300: "#FFDA6B",
      400: "#FFCD38",
      500: "#FFC107",
      600: "#D19D00",
      700: "#9E7700",
      800: "#6B5000",
      900: "#332600",
      950: "#191300"
    },
    "orange": {
      50: "#FFF5E5",
      100: "#FFEBCC",
      200: "#FFD699",
      300: "#FFC266",
      400: "#FFAD33",
      500: "#FF9800",
      600: "#CC7A00",
      700: "#995C00",
      800: "#663D00",
      900: "#331F00",
      950: "#190F00"
    },
    "brown": {
      50: "#F4EEEC",
      100: "#E8DDD9",
      200: "#CFB8AF",
      300: "#B99589",
      400: "#A0705F",
      500: "#795548",
      600: "#604339",
      700: "#4A342C",
      800: "#30221D",
      900: "#1A120F",
      950: "#0D0908"
    },
    "stone": {
      50: "#F1F0EF",
      100: "#E4E3E1",
      200: "#CAC6C4",
      300: "#AFAAA6",
      400: "#958E89",
      500: "#78716C",
      600: "#615B57",
      700: "#484441",
      800: "#302D2B",
      900: "#181716",
      950: "#0B0A0A"
    },
    "asphalt": {
      50: "#E8EDF2",
      100: "#D1DBE6",
      200: "#A0B5CA",
      300: "#7291B1",
      400: "#4E6E8D",
      500: "#34495E",
      600: "#2A3B4C",
      700: "#1F2B38",
      800: "#141C24",
      900: "#0B0F14",
      950: "#05080A"
    },
    "grey": {
      50: "#F5F5F5",
      100: "#EBEBEB",
      200: "#D9D9D9",
      300: "#C4C4C4",
      400: "#B3B3B3",
      500: "#9E9E9E",
      600: "#808080",
      700: "#5E5E5E",
      800: "#404040",
      900: "#1F1F1F",
      950: "#0F0F0F"
    }
  }
}