Addwind

About this plugin

Addwind automates the creation of Tailwind-compatible color scales in Figma. Simply input one brand color, and the plugin generates a full palette of 11 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) that perfectly match Tailwind's color scale structure.

Key Features

• Single color input — Enter one hex color and generate an entire palette

• Automatic shade generation — Uses advanced color science algorithms for mathematically consistent scales

• Optional opacity variants — Generate up to 121 color variables with opacity variants (0%–100%) for each shade

• Manual adjustments — Fine-tune individual shades while maintaining palette structure

• Collection management — Create new variable collections or add to existing ones

• Visual preview — See your complete palette before creating variables

Perfect for designers and developers building design systems, Addwind saves hours of manual color work and ensures your Figma variables match Tailwind's color conventions. Generated variables follow Tailwind naming: {prefix}/{shade} (e.g., brand/500) or with opacity: {prefix}/{shade}/{opacity} (e.g., brand/500/50).