Color Shades Generator

About this plugin

A simple Figma plugin that helps you generate beautiful color palettes with customizable shades. Perfect for creating consistent color systems as it will generate Styles and/or Variables.

Features

Color Generation

Generate 11 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) from a single base color

Two generation methods:

-- HSL Adjustments: Fine-tune lightness and saturation for each shade

-- LAB Interpolation: Create perceptually uniform color scales

Color Control

- Input base color using a color picker or HSL values

- Customize color name for your palette

- Real-time preview of all generated shades

- Adjust individual shade properties (lightness and saturation)

- Adjust contrast between each shade

Figma Integration

- Generate Figma Color Styles

- Generate Figma Color Variables

- Visual preview of the palette

- Automatic positioning of generated palettes

Code snippets:

Copy-paste ready code snippets:

- CSS variables

- Tailwind CSS

- Hex values

- HSL values

How to Use

1. Name your color palette

2. Select your base color (500 shade) using the color picker or HSL inputs

3. Choose your preferred generation method (HSL Adjustments or LAB Interpolation)

4. Customize individual shade adjustments if using HSL method or use contrast slider

6. Choose whether to generate Figma Color Styles and Variables

7. Click "Generate Palette" to create your color system