Color Scale Generator

How It Works

1. Select a color using a hexcode, color picker, or HSL sliders.

2. Find the closest matching Tailwind color using Chroma's deltaE function. For input #A56F8E, the closest matching Tailwind color is Pink 500, with a deltaE of about 14.

3. Within the Pink color scale, find the shade that is most similar to the input color based on HSL lightness. So input #A56F8E, has an HSL lightness of 54%. The shade in Tailwind's Pink color scale with the closest lightness is Pink 600, which has an HSL lightness of 51%.

Now Pink 600's HSL values become the reference used to calculate the remaining shades in the new scale.

If input color is locked, it will stay unchanged at the 600 position in the new color scale.

Calculate New Scale

4. Calculate the difference in hue between the input color and the closest Tailwind color.

const inputColorHue = 326
const closestTailwindColorHue = 333
const hueDifference = inputColorHue - closestTailwindColorHue = -7

const inputColorHue = 326
const closestTailwindColorHue = 333
const hueDifference = inputColorHue - closestTailwindColorHue = -7

5. Calculate the ratio of saturation between the input color and the the closest Tailwind color.

inputColorSaturation: 0.23
closestTailwindColorSaturation: 0.71
saturationRatio: 0.23 / 0.71 = 0.32

inputColorSaturation: 0.23
closestTailwindColorSaturation: 0.71
saturationRatio: 0.23 / 0.71 = 0.32

6. Adjust each color in the scale by, adding the hue difference, multiplying by the saturation ratio, and maintaining the original lightness values.

const newScale = pinkScale.map(shade => ({
  hue: shade.hue + hueDifference,
  saturation: shade.saturation * saturationRatio,
  lightness: shade.lightness
}))

const newScale = pinkScale.map(shade => ({
  hue: shade.hue + hueDifference,
  saturation: shade.saturation * saturationRatio,
  lightness: shade.lightness
}))