Color Shade Generator — SREDA 🐸

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 detection

Automatically 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 generation

Creates 10 perceptually balanced shades with smooth transitions. Optimized for UI use cases: backgrounds, borders, text, states.

🎛️ Fine-tuning via modifiers

Adjust brightness and saturation for specific ranges in the scale:

• make lighter shades cleaner and softer

• boost dark shades for better text contrast

All changes update instantly. Modifiers can be combined.

📋 Flexible export

HEX, RGB, HSL, CMYK.

Copy individual colors or the entire palette.

📌 Insert into Figma

Inserts a frame with all generated shades, ready for further styling and use.

🚀 How it works

1. Pick a color or enter a HEX code
2. Generate a full palette
3. Fine-tune visual balance via modifiers (optional)
4. 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

Палитра создается как фрейм со всеми оттенками, готовыми к дальнейшей работе.

🚀 Как это работает

1. Выбираете цвет или вводите HEX
2. Генерируете полную шкалу
3. Корректируете визуальный баланс через модификаторы (опционально)
4. Копируете или вставляете палитру обратно в Figma

🌍 Интерфейс: русский и английский