Генератор палитр – Гармоничные цветовые палитры

Создавайте гармоничные цветовые палитры мгновенно

Выбор цветов, которые хорошо сочетаются друг с другом, — одна из самых частых задач в дизайне. Правила цветовой гармонии, основанные на отношениях между оттенками на цветовом круге, дают надёжную основу для создания сбалансированных палитр.

Этот генератор палитр берёт любой базовый цвет и применяет стандартные правила гармонии для создания набора гармоничных цветов. Введите цвет в формате HEX, RGB или HSL и переключайтесь между типами гармонии, чтобы исследовать разные комбинации.

Типы цветовой гармонии

• Комплементарная — два цвета напротив друг друга на цветовом круге (180°). Высокий контраст, смелые сочетания.
• Аналогичная — три соседних цвета на цветовом круге (30°). Естественно гармоничные, низкий контраст.
• Триадная — три цвета, равномерно распределённые по кругу (120°). Яркие и сбалансированные.
• Раздельно-комплементарная — базовый цвет плюс два цвета, соседних с его комплементом (150° и 210°). Мягче, чем чистая комплементарная.
• Тетрадная (квадратная) — четыре цвета, равномерно распределённые по кругу (90°). Богатые, сложные палитры.

Как пользоваться генератором палитр

1. Введите базовый цвет — введите значение HEX, RGB или HSL или используйте встроенный выбор цвета
2. Выберите тип гармонии в селекторе
3. Перетащите связанную точку на круге, чтобы изменить оттенок и насыщенность, затем настройте светлоту
4. Просмотрите сгенерированную палитру в виде цветовых образцов
5. Копируйте значения HEX или RGB для любого образца одним кликом
6. Переключайтесь между типами гармонии, чтобы сравнивать разные палитры

Когда использовать генератор палитр

• При начале нового дизайн-проекта, когда нужна сбалансированная цветовая схема
• При создании фирменного стиля вокруг определённого основного цвета
• При создании UI-тем с гармоничными акцентными цветами
• При исследовании цветовых отношений для иллюстрации или искусства
• Для быстрого создания палитр для презентаций или прототипов

Основная гармония и дополнительные варианты

Каждая гармония создаёт пять образцов. В комплементарной схеме две основные краски, в аналоговой, триадной и раздельно-комплементарной — три, а в тетрадной — четыре; остальные образцы являются вариантами с изменённой насыщенностью или светлотой.

Пять цветов из одного базового цвета

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

Используйте HEX, RGB, HSL и OKLCH

Поле принимает HEX, RGB, HSL и OKLCH. Скопируйте отдельный цвет в HEX или RGB либо всю палитру как пять разделённых запятыми HEX-кодов в верхнем регистре.

Быстро, бесплатно и конфиденциально

Все вычисления выполняются в браузере. Не нужны учётная запись, загрузка, хранение или обработка на сервере; круг работает с мышью, сенсорным вводом и клавиатурой.

Цветовой круг показывает теоретические отношения, но не гарантирует читаемость. Для измерения WCAG используйте Проверку контрастности, а для смены формата — Конвертер цветов.

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

Что такое цветовая гармония?

Цветовая гармония — это сочетания цветов, которые визуально приятны вместе, основанные на их отношениях на цветовом круге.

Какой тип гармонии выбрать?

Зависит от цели дизайна. Комплементарная создаёт сильный контраст. Аналогичная — спокойное ощущение. Триадная — яркая и сбалансированная. Раздельно-комплементарная даёт более мягкий контраст. Тетрадная даёт богатые, сложные палитры.

Какие форматы цветов можно вводить?

Можно вводить HEX, RGB, HSL или OKLCH; формат определяется автоматически.

Как рассчитываются цвета палитры?

Базовый цвет преобразуется в HSL и размещается под точными углами оттенка выбранной гармонии. Каждое сочетание расширяется до пяти практичных образцов со сбалансированными вариациями насыщенности и светлоты. Интерактивный круг показывает каждый образец: перетаскивание одной точки вращает всю гармонию, а ползунок светлоты обновляет палитру.

Можно ли копировать сгенерированные цвета?

Да. Копируйте каждый цвет в HEX или RGB либо всю палитру как пять разделённых запятыми HEX-кодов в верхнем регистре.

Работает ли этот инструмент на мобильных?

Да. Адаптивный цветовой круг работает с касаниями на телефоне и с мышью или клавиатурой на компьютере.

Этот инструмент бесплатный?

Да. ColourPicker.app полностью бесплатен, регистрация не требуется.

Можно ли сохранять сгенерированные палитры?

Инструмент не сохраняет палитры между сессиями. Вы можете копировать отдельные значения цветов и сохранять их в файлах проекта.

Что показывает цветовой круг?

Он располагает оттенки по окружности: угол задаёт тон, расстояние от центра — насыщенность, а отдельный ползунок — светлоту.

Почему в каждой палитре пять цветов?

Пять образцов дают единый рабочий набор из двух–четырёх основных цветов и необходимых дополнительных вариантов.

Что такое основные цвета и дополнительные варианты?

Основные цвета образуют выбранную геометрию; варианты повторяют эти тона с другой насыщенностью или светлотой.

Гарантирует ли гармония достаточный контраст?

Нет. Гармония описывает отношения оттенков; WCAG-контраст переднего плана и фона следует измерять отдельно.