Tailwind CSS Color Generator
Generate complete Tailwind CSS color palettes as Figma Styles or Variables from a single hex value.
Plugin Preview
About this plugin
Create professional 11-shade color palettes (50-950) instantly.Choose between Perceived (HSLuv) or Linear (HSL) color modes, adjust hue, saturation, and lightness, and export as Figma Styles or Variables. Perfect for design systems and Tailwind CSS projects.✨ Features:Generate 11-shade Tailwind CSS palettes (50-950) from any hex colorCreate as Figma Styles or VariablesTwo color modes: Perceived (HSLuv) for perceptually uniform colors, or Linear (HSL)Adjustable hue shift, saturation shift, and lightness rangeChoose which stop (50-950) your base color representsReal-time preview of generated paletteCreate in existing variable collections or make new onesSmart updates: re-run with same name to update existing styles/variablesDark mode supportFree to use, no paywalls or signupsPerfect for:Building design systemsCreating brand color palettesTailwind CSS integrationConsistent color scales across projectsBrought to you by Crumb Digital (crumb.com.au)
Plugin Details
| Version | 2 |
|---|---|
| Created | October 12, 2025 |
| Last Updated | October 12, 2025 |
| Category | shapes-colors |
| Creator | Jamie |
| Stats | 80 installs, 15 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/index.html
- main:dist/code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- https://emailsig.crumb.soy
More Like This
Discover other plugins in the shapes-colors category.