Generate tints and shades

({
  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,
      },
    ]
  },
})