Generate tints and shades

Color tints add white to a base color while shades add black. Select a base color to generate any number of tints and shades.

Face with waiting expression Nothing to see yet!

Loading takeymakey...
TakeyMakey code
Want this tool to do something else? Edit the code below and make it do whatever you want.
({
  take: [
    { label: "Number of tints and shades", type: "number", value: 12 },
    { label: "Base color", type: "color" },
  ],
  make: ({ 0: length, 1: color }) => {
    let value
    if (length <= 1) {
      value = [color]
    } else {
      const base10 = (v) => parseInt(v, 16)
      const base16 = (v) => ("0" + Math.round(v).toString(16)).slice(-2)

      let [r, g, b] = color.match(/[\dA-F]{2}/gi).map(base10)

      value = Array.from({ length }, (e, i) => {
        const s = i >= length / 2
        const f = (2 * i) / (length - 1) - (s ? 1 : 0)

        const c = [
          s ? r + f * (255 - r) : f * r,
          s ? g + f * (255 - g) : f * g,
          s ? b + f * (255 - b) : f * b,
        ]

        return "#" + c.map(base16).join("")
      })
    }

    return [
      {
        label: "Tints and shades",
        type: "colorlist",
        value,
      },
    ]
  },
})