Tailwind CSS Color Palette Generator

About this plugin

The Tailwind CSS Color Palette Generator helps designers create advanced multi-palette color systems from any base color, complete with paint styles, variables, and built-in opacity support while ensuring WCAG accessibility compliance. It automatically generates reusable Figma paint styles organized hierarchically (for example, “Vivid Blue/500”), along with variables and canvas frames, and offers triple output modes for one-click generation. The tool also exports complete color palettes with opacity variants across six formats: CSS, SCSS, Tailwind, Style Dictionary, Tokens Studio, and JSON making it easy to integrate professional design tokens into any design or development workflow without extra configuration. 🎨✨ Key Features:Generate and manage multiple Tailwind-style color palettesNEW: Create Paint Styles - reusable Figma local paint styles with hierarchical namingTriple Output Modes: Canvas frames, Figma variables, and paint stylesOpacity Variables with customizable transparency ranges (5-95% in configurable steps)Export design tokens with opacity variants in all 6 formatsIntelligent color controls with native color picker and HSL slidersAlgorithmic color naming with lock and rename optionsWCAG Contrast Checker with real-time accessibility validationExport to JSON, CSS, SCSS, Tailwind, Style Dictionary, and Tokens StudioBatch palette generation and live customizationDual preview modes for flexible palette viewingClean, fast, and scalable interface🎨 Paint Styles (NEW in v1.2.0):Create local paint styles organized as "Color Name/Shade" (e.g., "Vivid Blue/500")Opacity paint styles with alpha values (e.g., "Vivid Blue/Opacity 50")Updates existing styles when re-run - no duplicatesBatch creation for all palettes at onceApply styles to any fill, stroke, or effect in Figma🎨 Opacity Variables:Flexible opacity ranges with min/max/step configurationSeparate "Tailwind Opacity Colors" collection to avoid naming conflictsLive preview with checkerboard transparency indicatorsRGBA support with full alpha channel in Figma variablesPer-palette opacity control (enable/disable independently)Canvas integration with visual opacity swatchesAutomatic export in all design token formats📤 Design Token Export:When you enable opacity variables, they're automatically included in your exported tokens:CSS Custom Properties: --color-name-opacity-50: rgba(147, 51, 234, 0.5)SCSS Variables: $color-name-opacity-50 with nested map structureTailwind Config: Nested opacity object for utility classesStyle Dictionary: Proper attributes for multi-platform supportTokens Studio: Compatible structure for Figma Tokens StudioJSON: Clean nested structure with value and type propertiesAll formats include helpful usage examples!♿ Accessibility Tools:Real-time contrast ratio calculation (WCAG 2.1)AA and AAA compliance level indicatorsAuto-fix suggestions that preserve color hueSmart application: foreground to text and background to shapesPick colors directly from Figma layers👥 Perfect for:UI and product designersFrontend developersDesign system teamsAccessibility-focused projectsMulti-platform design token workflows🚀 How to use:Add or select a base color and generate palettesEnable opacity variables for transparent color variants (optional)Check accessibility using the Contrast Checker to ensure WCAG complianceCustomize and organize your palettesClick Generate (frames), Variables, or Styles to create outputExport tokens (opacity variants automatically included!) or apply to your designs📝 What's New in v1.2.0:✅ Create Paint Styles — reusable Figma local paint styles✅ Opacity paint styles with configurable alpha values✅ Triple output modes: frames, variables, and paint styles✅ Improved button UX with descriptive tooltips and visual grouping✅ Clickable author link in generated palette frames📝 What's New in v1.1.0:✅ Opacity variant export across all 6 formats✅ RGBA format with proper alpha channel values✅ Nested structure for organized token access✅ Format-specific usage examples✅ 100% backward compatible - existing workflows unchangedBuilt with Tailwind CSS v4 and TypeScript. No external dependencies. All color calculations done locally for speed and privacy.❤️ Love this plugin? Rate, comment, and follow @iamponsiva for updates!