Back to Plugins
Color Shade Generator — SREDA 🐸

Color Shade Generator — SREDA 🐸

Build consistent color scales for UI from one color

Plugin Preview

Color Shade Generator — SREDA 🐸 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

Version1
CreatedDecember 10, 2025
Last UpdatedDecember 10, 2025
Categorydesign-tools-other
CreatorRezzzh
Stats14 installs, 2 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none