Tailwind CSS Color Palette Generator

About this plugin

Tailwind CSS Color Palette Generator helps designers create advanced multi-palette color systems with transparency support, export professional design tokens, and ensure accessibility compliance from any base color.

Features:

1. Generate and manage multiple Tailwind-style color palettes
2. Opacity Variables with customizable transparency ranges (5-95% in configurable steps)
3. Intelligent color controls with native color picker and HSL sliders
4. Algorithmic color naming with lock and rename options
5. WCAG Contrast Checker with real-time accessibility validation
6. Export design tokens to JSON, CSS, SCSS, Tailwind, Style Dictionary, and Tokens Studio
7. Batch palette generation and live customization
8. Dual preview modes for flexible palette viewing
9. Clean, fast, and scalable interface

Opacity Variables:

1. Flexible opacity ranges with min/max/step configuration
2. Separate "Tailwind Opacity Colors" collection to avoid naming conflicts
3. Live preview with checkerboard transparency indicators
4. RGBA support with full alpha channel in Figma variables
5. Per-palette opacity control (enable/disable independently)
6. Canvas integration with visual opacity swatches

Accessibility Tools:

1. Real-time contrast ratio calculation (WCAG 2.1)
2. AA and AAA compliance level indicators
3. Auto-fix suggestions that preserve color hue
4. Smart application: foreground to text and background to shapes
5. Pick colors directly from Figma layers

Perfect for:

1. UI and product designers
2. Frontend developers
3. Design system teams
4. Accessibility-focused projects

How to use:

1. Add or select a base color and generate palettes
2. Enable opacity variables for transparent color variants (optional)
3. Check accessibility using the Contrast Checker to ensure WCAG compliance
4. Customize and organize your palettes
5. Export or apply the tokens to your designs