dragoon0x /palette — Full Shade Palette Generator
Usage
/palette [hex-color]
Algorithm
Given a single brand color:
- Convert to HSL
- Generate 11 stops (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950)
- 500 = the input color
- Lighter stops: increase lightness, slightly decrease saturation
- Darker stops: decrease lightness, slightly increase saturation, shift hue toward blue
- 50 = near white with hue tint, 950 = near black with hue tint
Output
- CSS custom properties: --color-primary-50 through --color-primary-950
- Tailwind config extension
- Hex values table
- Contrast ratio of each shade against white and black backgrounds
Quality Checks
- Every shade must be visually distinct from adjacent shades
- 50 must work as a subtle background color
- 500-700 must pass AA contrast against white text
- 800-950 must work as dark mode surface colors