Инструмент подбора цветовых сочетаний

Профессиональный генератор цветовых палитр: поддерживает монохромные, комплементарные, триадные и другие режимы сочетаний, позволяет массово создавать и экспортировать цветовые схемы.

Сообщить об ошибке

Режим выполнения в браузере: Ваши данные обрабатываются в браузере и не загружаются на сервер.

Скорость и стабильность: Скорость обработки зависит от вашего устройства и браузера. Для больших пакетов настольная версия может быть стабильнее.

Загрузка инструмента, подождите...

Если онлайн-инструмент не загружается или не запускается, попробуйте настольный инструмент. https://tools.yikeaigc.com/

Использование инструмента

Вернуться к старой версии

Сначала настройте, затем обработайте

Сначала задайте основной цвет и правила палитры, затем создайте экспортируемый вариант

Начните с примеров цветов или введите HEX для точного выбора. На каждом шаге есть кнопка «Далее»; после настройки можно создать, сохранить и скачать.

HEX / RGB / HSL / CMYK Монохром / Дополнительные / Триада CSS / SCSS / JSON / PNG Настройки сохраняются

Текущий основной цвет Нажмите на код цвета, чтобы скопировать

HEX

RGB

HSL

Основной цвет

Сначала задайте основной цвет. Используйте пипетку, поле HEX или ползунки HSL; палитра обновляется в реальном времени.

Базовый цветПоддерживается 6-значный HEX

HEX-код цвета Пример: #0F6FAE

CMYK

Точная настройка HSLДля тонкой настройки оттенка, насыщенности и яркости

Оттенок205°

Насыщенность78%

Яркость37%

Название палитры

Примеры цветовПосле выбора можно настроить

Правила палитры

Выберите модель палитры, затем задайте количество цветов и смещение светлоты. Рекомендуем сначала создать вариант с параметрами по умолчанию, затем настроить под дизайн.

Модель палитрыАналогичные цвета — для единого, мягкого стиля

Параметры генерацииСначала задайте параметры, затем откройте предпросмотр

Количество цветов

Соседний угол24°

Смещение насыщенности0%

Смещение яркости0%

Нейтрализация8%

Сортировка

Тип градиента

Угол градиента90°

Предпросмотр и правка

Проверьте коды цветов, читаемость текста и пример интерфейса. Нажмите на любой цвет, чтобы скопировать.

Цветовая схема5 цветов

ПредпросмотрДля быстрой оценки иерархии

Код градиентаМожно сразу копировать в CSS

Сохранить экспорт

Можно экспортировать текущую схему или массово создать несколько. В результатах показаны только первые 20, при скачивании будут включены все.

Пакетные параметрыЗадайте количество по необходимости

Количество схем

Степень изменений

ЭкспортироватьДля файлов и кода

HEX RGB HSL CMYK

JSON CSS SCSS PNG

СкачиваниеZIP упакует все массовые результаты

Пакетные результатыМассовая генерация еще не выполнена

Сначала задайте основной цвет и правила палитры, затем нажмите «Массово создать».

Сохраненные схемы0 шт.

Сохраненные схемы появятся здесь. Их можно применить снова или удалить.

Инструкции

Инструкция по использованию

Настройте основной цвет: в разделе «Настройка основного цвета» задайте базовый цвет с помощью пипетки, поля ввода HEX или ползунков HSL. Также можно нажать на пример цвета для быстрой загрузки.
Выберите правило сочетания цветов:
- Монохромная схема: генерирует светлые и тёмные оттенки на основе одного тона, подходит для дизайна в едином стиле.
- Аналогичные цвета: выбирает соседние оттенки, подходит для мягкого и многослойного визуального эффекта.
- Дополнительные цвета: использует цвета на противоположной стороне цветового круга, подходит для выделения кнопок, заголовков и важных элементов.
- Раздельно-дополнительная схема: добавляет смягчающие цвета в контрастное сочетание, подходит для промо-графики и визуалов мероприятий.
- Триада, тетрада, квадратная схема: подходят для диаграмм, категорийных меток и интерфейсов с несколькими модулями.
- Нейтральные цвета: подходят для бизнес-страниц, интерфейсов инструментов и дизайна документации.
Настройте параметры генерации: задайте количество цветов, угол соседних оттенков, смещение насыщенности, смещение яркости, степень нейтрализации, способ сортировки и угол градиента.
Предпросмотр цветовой схемы: перейдите в «Предпросмотр и тонкая настройка», чтобы посмотреть HEX, RGB, HSL и данные контрастности каждого цвета. Нажмите кнопку со значением цвета, чтобы скопировать его.
Сохраните схему и настройки: нажмите «Сохранить текущую схему», чтобы добавить цветовую схему в избранное, или «Сохранить настройки», чтобы сохранить текущие параметры для дальнейшего использования.
Пакетная генерация: перейдите в «Сохранение и экспорт», задайте количество схем и величину вариаций, затем нажмите «Пакетная генерация», чтобы создать несколько наборов цветовых схем. В интерфейсе отображаются первые 20 схем, а при скачивании будут включены все результаты.
Экспорт файлов: можно отдельно скачать файлы JSON, CSS, SCSS, PNG или выбрать содержимое для экспорта и скачать ZIP-архив.

Часто задаваемые вопросы

Ответ: монохромная схема подходит для развития бренда и лаконичных интерфейсов; аналогичные цвета — для мягких и единых страниц; дополнительные цвета — для акцентирования важной информации; триада — для диаграмм и многомодульных макетов; нейтральные цвета — для бизнес-инструментов и документации.

Ответ: введите цветовой код в поле HEX, например #0F6FAE, и инструмент синхронно обновит пипетку, ползунки HSL и предпросмотр цветовой схемы. Также можно выполнить точную настройку с помощью ползунков тона, насыщенности и яркости.

Ответ: CSS-файл генерирует цветовые коды в виде переменных, которые можно использовать для стилей веб-страниц; SCSS-файл подходит для проектов на Sass. Оба формата удобны для повторного использования в дизайн-системах, переключении тем и стилях компонентов.

Ответ: Пакетная генерация на основе текущего основного цвета, правил сочетания цветов и степени изменений выполняет разумные сдвиги оттенка, насыщенности и яркости, благодаря чему получаются несколько связанных по стилю, но не повторяющихся цветовых схем.

Ответ: Сохранённые схемы записываются в локальное хранилище текущего устройства. После очистки данных сайта или смены устройства ранее сохранённые схемы могут больше не отображаться, поэтому важные схемы рекомендуется своевременно экспортировать в файл.

Ответ: Нет. Расчёт цветов, сохранение схем и создание файлов выполняются на текущем устройстве; основной цвет, схемы и экспортируемое содержимое не загружаются на сервер.

Ответ: В разделе «Предпросмотр тонкой настройки» проверьте контраст белого и тёмного текста для каждого цвета. Чем выше значение, тем легче читать текст. При использовании цвета в качестве фона для основного текста рекомендуется выбирать цвет текста с более высокой контрастностью.