Color Shades Generator

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.

FeaturesColor GenerationGenerate 11 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) from a single base colorTwo generation methods:-- HSL Adjustments: Fine-tune lightness and saturation for each shade-- LAB Interpolation: Create perceptually uniform color scalesColor 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 shadeFigma Integration- Generate Figma Color Styles- Generate Figma Color Variables- Visual preview of the palette- Automatic positioning of generated palettesCode snippets:

Copy-paste ready code snippets:- CSS variables- Tailwind CSS- Hex values- HSL valuesHow to Use1. Name your color palette2. Select your base color (500 shade) using the color picker or HSL inputs3. Choose your preferred generation method (HSL Adjustments or LAB Interpolation)4. Customize individual shade adjustments if using HSL method or use contrast slider6. Choose whether to generate Figma Color Styles and Variables7. Click "Generate Palette" to create your color system