Генератор цветовlink

Для создания цветовой палитры SIMAI Framework предлагает собственный генератор, построенный на основе генератора Google.

Процесс генерации:

  1. Пользователь выбирает цвет с помощью пикера или загружает изображение. При загрузке изображения на основе квантования выделяется основной цвет.
  2. Выбранный цвет конвертируется в цветовую схему HCT и формирует палитры Primary, Secondary, Tertiary.

HCT-параметры:

  • Hue (оттенок): цветовой круг (0–360°).
  • Chroma (насыщенность): чем выше, тем "чище" цвет.
  • Tone (тон): яркость или светлота (0 – чёрный, 100 – белый).

Пример значений для генерации цветов (по умолчанию):

Цвет Hue Chroma
Primary Задаётся пользователем Задаётся пользователем
Secondary Как у Primary 20 (можно менять от 15 до 30)
Tertiary Primary + 60. Если значение больше 360, то вычитается 360. 40 (можно менять от 30 до 50)
Neutral Как у Primary 5 (можно менять от 0 до 10)
Error 25 (можно менять от 20 до 30) 85 (можно менять от 50 до 100)
Warning 60 (можно менять от 55 до 80) 60 (можно менять от 40 до 60)
Success 145 (можно менять от 135 до 165) 65 (можно менять от 30 до 100)

Применяя настройки яркости, оттенка и насыщенности, дизайнеры и разработчики могут получить желаемую палитру для интерфейса.

При создании UI Kit были использованы следующие значения:

Цвет Hue Chroma
Primary 265 85
Secondary 265 20
Tertiary 325 40
Error 25 85
Warning 60 60
Success 145 65

Для Neutral доступны три варианта (Grey Primary, Gray Blue, Grey) с настроечными параметрами Hue и Chroma:

Цвет Hue Croma
Grey Primary 265 5
Gray Blue 235 10
Grey 0 0

Благодаря гибкой системе формирования палитры и токенов, а также поддержке различных тематик (светлой и тёмной), SIMAI Framework упрощает работу с цветом и делает интерфейсы более понятными, функциональными и эстетичными.