GGogotem
Вернуться на главную

Генератор CSS по основным цветам

Превратите изображение в практичную CSS-тему: основные цвета, читаемый текст, переменные, градиенты и готовые правила классов.

Категории Ожидание результата
Сообщить о проблеме

Источник изображения

Добавьте фото товара, баннер, миниатюру или изображение бренда. Весь анализ выполняется в браузере.

Изображение-
Цвета-
Изображение-

Извлечённая палитра

Инструмент возьмёт образцы пикселей, объединит похожие цвета, выберет читаемый цвет текста и подготовит CSS для проекта.

Предпросмотр темы

Основной

Генератор CSS по основным цветам

Превратите изображение в практичную CSS-тему: основные цвета, читаемый текст, переменные, градиенты и готовые правила классов.

Фон

-

Основной

-

Созданный CSS

Инструмент возьмёт образцы пикселей, объединит похожие цвета, выберет читаемый цвет текста и подготовит CSS для проекта.

Как пользоваться

  1. 1. Выберите или перетащите изображение.
  2. 2. Проверьте извлечённую палитру и контраст текста.
  3. 3. Настройте префикс переменных и селектор темы.
  4. 4. Скопируйте CSS-переменные и классы темы.

Проверка качества цвета

  • Используйте изображение с реальными цветами товара или бренда без тяжёлых теней.
  • До выбора цвета фоном прочитайте текст в предпросмотре.
  • Считайте полученные токены отправной точкой и проверьте их в дизайн-системе.

Что делает генератор

Изображение выборочно анализируется на Canvas в браузере. Похожие цвета группируются, сортируются по частоте и превращаются в CSS-переменные и классы темы.

Важные замечания

  • RGB-корзины объединяют похожие цвета и уменьшают шум.
  • По относительной яркости выбирается более читаемый чёрный или белый текст.
  • Результат содержит переменные, базовую тему и дополнительные помощники для градиента и тёмного текста.

Частые вопросы

Изображение отправляется на сервер?expand_more

Нет. Оно полностью обрабатывается в вашем браузере.

Можно ли применять результат для бренда?expand_more

Да, как отправную точку. Финальную палитру бренда всё равно следует проверить вручную.

Почему цвета немного упрощены?expand_more

Похожие пиксели объединяются, чтобы тени и артефакты сжатия не доминировали в палитре.

Важные замечания

Расчёты основаны на стандартных формулах. Значения могут округляться для удобства чтения. Для важных решений проверьте официальный источник.

Рабочая область результатов

Сохраните результат, сравните его с предыдущими расчетами или поделитесь отчетом.