Color Shade Generator — SREDA 🐸
Build consistent color scales for UI from one color
Plugin Preview
About this plugin
Plugin for Figma that turns a single chosen color into a professional UI palette for design systems and brand guides. The palette is built with visual harmony and correct positioning of the base color within the 50–900 scale.✨ Key features🎯 Accurate base shade detectionAutomatically identifies where the selected color belongs on the 50–900 scale based on brightness and saturation, ensuring it keeps its intended role: primary action, links, accents, etc.🌈 Consistent palette generationCreates 10 perceptually balanced shades with smooth transitions. Optimized for UI use cases: backgrounds, borders, text, states.🎛️ Fine-tuning via modifiersAdjust brightness and saturation for specific ranges in the scale:• make lighter shades cleaner and softer• boost dark shades for better text contrastAll changes update instantly. Modifiers can be combined.📋 Flexible exportHEX, RGB, HSL, CMYK.Copy individual colors or the entire palette.📌 Insert into FigmaInserts a frame with all generated shades, ready for further styling and use.🚀 How it worksPick a color or enter a HEX codeGenerate a full paletteFine-tune visual balance via modifiers (optional)Copy or insert the palette back into Figma🌍 Interface in English and Russian----------------Плагин для Figma, который из одного выбранного цвета строит профессиональную UI-палитру для дизайн-систем и бренд-гайдов. Палитра формируется с сохранением визуальной гармонии и корректного позиционирования базового оттенка в шкале 50–900.✨ Основные возможности🎯 Точная идентификация базового оттенкаОпределяет позицию цвета в шкале (50–900) по яркости и насыщенности. Базовый оттенок сохраняет правильную роль в системе: основной цвет, цвет кнопок, ссылок и т. д.🌈 Генерация согласованной палитрыСтроит 10 оттенков с логичными переходами по восприятию. Подходит для UI-цветов: фон, бордеры, текст, состояния.🎛️ Тонкая настройка через модификаторыКорректируйте насыщенность и яркость отдельных сегментов палитры:• делайте светлые оттенки чище и спокойнее• усиливайте тёмные для контраста текстаИзменения видны сразу. Модификаторы можно комбинировать.📋 Гибкий экспортHEX, RGB, HSL, CMYK.Копирование одного оттенка или всей палитры.📌 Вставка в FigmaПалитра создается как фрейм со всеми оттенками, готовыми к дальнейшей работе.🚀 Как это работаетВыбираете цвет или вводите HEXГенерируете полную шкалуКорректируете визуальный баланс через модификаторы (опционально)Копируете или вставляете палитру обратно в Figma🌍 Интерфейс: русский и английский
Plugin Details
| Version | 1 |
|---|---|
| Created | December 10, 2025 |
| Last Updated | December 10, 2025 |
| Category | design-tools-other |
| Creator | Rezzzh |
| Stats | 14 installs, 2 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the design-tools-other category.