Color shade generator

About this plugin

A comprehensive Figma plugin that generates complete color systems from a single accent color, creating both primary color palettes and semantically meaningful traffic light colors (success, warning, danger) that maintain visual harmony with your brand. Features direct integration with Figma Variables for instant design token creation.

My UX\UI dribbble shots https://dribbble.com/danilefremov

Key Features

Intelligent Color Generation

Single Input System: Enter any accent color in HEX, RGB, or HSL format

10-Shade Primary Palette: Automatically generates shades from 50 (lightest) to 900 (darkest)

Smart Accent Positioning: Intelligently places your original accent color within the appropriate shade level

Non-Linear Distribution: Uses perceptually uniform lightness progression for better visual hierarchy

Semantic Color System

Traffic Light Colors: Generates red (danger), yellow (warning), and green (success) colors

Style Inheritance: Traffic light colors adopt the visual characteristics of your accent color

Temperature Adaptation: Adjusts hue ranges based on whether your accent is warm or cool-toned

Consistent Saturation: Maintains visual harmony while preserving semantic meaning

Interactive Preview Interface

Visual Color Swatches: See all generated colors with clear labels and hex values

Accent Identification: Original accent color is clearly marked with a star badge

Copy to Clipboard: One-click copying of any color value

Organized Layout: Primary colors and semantic colors displayed in separate, logical sections

Real-time Feedback: Instant visual updates when regenerating palettes

Dual Export Options

1. Add to File

Visual Frames: Creates organized color frames directly on your Figma canvas

Smart Labeling: Each frame includes shade name and hex value with auto-contrast text

Grouped Organization: All colors organized in a container frame with proper spacing

Auto-positioning: Places new palette frames without overlapping existing content

2. Add to Variables ⭐

One-Click Variable Export: Instantly add generated colors to your Figma file's Variables system

Structured Variable Collections: Creates organized collections with professional naming conventions

Design Token Ready: Variables are immediately ready for design system implementation

Automatic Organization: Primary colors and semantic colors properly categorized