Back to Plugins
Tailwind CSS Color Generator

Tailwind CSS Color Generator

Generate complete Tailwind CSS color palettes as Figma Styles or Variables from a single hex value.

Plugin Preview

Tailwind CSS Color Generator 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

Version2
CreatedOctober 12, 2025
Last UpdatedOctober 12, 2025
Categoryshapes-colors
CreatorJamie
Stats80 installs, 15 likes
PricingFree

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