Function Signature

js

generateTailwindPalette(baseHex: string, options?: {
  baseStop?: number,
  stops?: Record<string | number, number | null>,
  chromaFactor?: number
}): object

Parameters

baseHex (string): Base HEX color. Defaults to the 500 stop.
baseStop (number, optional): Stop that should keep the exact base color. Defaults to 500.
stops (object, optional): Custom stop-to-lightness map. Defaults to Tailwind-style 50..950 stops.
chromaFactor (number, optional): Multiplier for chroma intensity. Defaults to 1.

Return Value

An object whose keys are Tailwind color stops and whose values are HEX strings.

js

generateTailwindPalette("#ff6600");
// {
//   50: "#ffe6cf",
//   100: "#ffd1af",
//   500: "#ff6600",
//   950: "#220000"
// }

Usage Notes

Designed for design tokens, Tailwind themes, charts, and UI color systems.
The base color is preserved exactly at the configured base stop.
Very light and very dark stops reduce chroma to stay more usable in UI surfaces.