Alpha — color palette variables with HSLA/RGBA opacity

About this plugin

🎨 CONVERT COLOR SWATCHES INTO COLOR VARIABLES WITH ALPHA CHANNEL SUPPORT

Unlike others, this plugin preserves HSLA/RGBA alpha channel values when generating color variables from swatch layers.

KEY FEATURES

✅ Preserves HSLA/RGBA alpha channel value

✅ Automatically maps Light and Dark theme value pairs

✅ Generates new tokens OR updates existing ones

✅ Exports to Tailwind theme JSON

📝 HOW IT WORKS

1. Create swatch layers → use frames with desired values

2. Name swatches → use ColorName/Theme/ShadeValue format (e.g., RubyRed/Light/500)

3. Select swatches & run plugin

4. Generate variables → create new or update existing variable collection

5. Export values → copy or download values in JSON format for development (optional)

✨ WHY WORK WITH AN OPACITY-BASED COLOR SYSTEM?

Create modern design systems whereby shades are mixed as opacity percentage of the same base color value. This way the UI elements blend with their container backgrounds which ensures that:

1. Components are rendered with a consistent contrast regardless of the container background color

2. Colors never clash during interactive state changes

🚀 ALL FEATURES

📊 Smart Color Palette Generator

- Convert color swatches to color variables

- Support for alpha channel/transparency value (HSLA/RGBA)

- Support for HEX, RGB, HSL color formats

- Automatic Light/Dark theme mapping

🔄 Design System Maintenance

- Batch-update existing variables’ values without breaking changes

- Preserve variable names, token IDs, and links to layers

- No need to reapply variables to components and layers

📦 Tailwind-Ready Export

- Generate JSON config for Tailwind CSS

- Separate Light/Dark theme exports

- Copy values to clipboard or download files

💡 Smart Features

- Support for custom number of shade steps

- Support for custom color names

- Support for custom shade value numeric sequencing

- Support for pure black and white grayscale with 0-1000 values

- Support for tinted grayscale with 0-1000 values

- Maintains order of colors as defined with swatches

❌ Say goodbye to:

- Manually re-applying variables’ alpha channel values

- Manually mapping light/dark variable value pairs

- Manually updating variables values 1-by-1

- Manually reapplying variables due to broken links after batch- updating values

----------------------

CHANGELOG

v3

- Support for case-insensitive layer names (red/light/500; Red/light/500; red/Light/500; ...)

- Universal compatibility for updating existing variables created with other plugins

- Clearer success/error messages