Генератор палитры цветов
Подбор гармоничных цветовых сочетаний с проверкой контрастности WCAG
Генератор цветовых палитр онлайн
Генератор создаёт гармоничные цветовые палитры по правилам теории цвета. Выберите базовый цвет — получите комплементарную, аналоговую, триадную или тетрадную палитру из 3–5 цветов.
Каждый цвет показан в HEX, RGB и HSL. Палитру можно скопировать для использования в дизайне, CSS, Figma или Photoshop.
- Комплементарная, аналоговая, триадная, тетрадная палитры
- Вывод в HEX, RGB, HSL
- Генерация из любого базового цвета
- Копирование кодов в один клик
- Предпросмотр палитры
Типы цветовых гармоний
Комплементарная — два противоположных цвета на цветовом круге (синий + оранжевый). Максимальный контраст, подходит для акцентов. Аналоговая — 3 соседних цвета (зелёный + бирюзовый + голубой). Спокойная, гармоничная, часто встречается в природе.
Триадная — 3 цвета на равном расстоянии (120° друг от друга). Яркая, динамичная палитра. Тетрадная — 4 цвета (две комплементарные пары). Самая сложная для работы, но богатая.
Советы по работе с цветом
Правило 60-30-10: основной цвет — 60% площади (фон), дополнительный — 30% (элементы), акцент — 10% (кнопки, ссылки). Это создаёт баланс и иерархию.
Для веб-дизайна: не более 3–4 цветов. Тёмный фон + светлый текст или наоборот. Акцентный цвет — для CTA-кнопок. Проверяйте контраст по WCAG (минимум 4,5:1 для текста).
Пример: палитра для сайта
Дизайнер создаёт лендинг для IT-компании. Фирменный цвет — #4F46E5 (индиго). Нужно подобрать гармоничную палитру.
Вводим базовый цвет: #4F46E5
Выбираем тип: аналоговая палитра
Получаем: #4F46E5, #7C3AED, #2563EB (индиго → фиолетовый → синий)
Добавляем нейтральные: #F9FAFB (фон) и #111827 (текст)
Палитра: индиго (основной), фиолетовый (дополнительный), синий (акцент), почти белый (фон), почти чёрный (текст). Профессионально и гармонично.
Знаете ли вы?
Цветовой круг придумал Исаак Ньютон в 1666 году, разложив белый свет призмой на спектр и замкнув его в круг. С тех пор это основной инструмент теории цвета.
Человеческий глаз различает около 10 миллионов оттенков, но стандартный монитор отображает 16,7 миллионов (24-bit). Профессиональные мониторы — до 1,07 миллиарда (10-bit).
Красный — самый «быстрый» цвет для мозга. CTA-кнопки красного или оранжевого цвета дают на 21% больше кликов, чем зелёные (A/B-тесты HubSpot).
Pantone выбирает «Цвет года» с 2000 года. Это влияет на моду, дизайн интерьеров и продажи краски по всему миру. Объявление — всегда в декабре.
Синий — самый популярный цвет логотипов (33% компаний из Fortune 500). Он ассоциируется с доверием и надёжностью: Facebook, Samsung, Intel, PayPal.
Дальтонизм (цветовая слепота) есть у 8% мужчин и 0,5% женщин. Дизайнеры обязаны проверять доступность: не полагаться только на цвет для передачи информации.
Типы цветовых гармоний
| Тип | Кол-во цветов | Угол на круге | Характер |
|---|---|---|---|
| Комплементарная | 2 | 180° | Контрастная, динамичная |
| Аналоговая | 3 | 30° друг от друга | Спокойная, гармоничная |
| Триадная | 3 | 120° друг от друга | Яркая, сбалансированная |
| Расщеплённая | 3 | 150° + 210° | Контрастная, но мягче комплементарной |
| Тетрадная | 4 | 90° друг от друга | Богатая, сложная |
| Монохромная | 3–5 | Один оттенок | Элегантная, минималистичная |
Правило 60-30-10
60% — основной цвет (фон). 30% — дополнительный (карточки, блоки). 10% — акцент (кнопки, ссылки, иконки). Это универсальная формула для гармоничного дизайна.
Как создать палитру
Выберите базовый цвет
Введите HEX-код, выберите на цветовом круге или используйте пипетку.
Выберите тип гармонии
Комплементарная, аналоговая, триадная, тетрадная или монохромная.
Получите палитру
Набор из 3–5 гармоничных цветов с кодами HEX, RGB, HSL. Копируйте в один клик.
Примеры палитр
🌐 Веб-дизайн
Базовый #3B82F6 (синий) → аналоговая палитра для корпоративного сайта с оттенками от голубого до индиго.
📱 Мобильное приложение
Базовый #10B981 (зелёный) → комплементарная: зелёный + коралловый для контрастных акцентов.
🎨 Иллюстрация
Базовый #F59E0B (янтарный) → триадная: янтарный + фиолетовый + бирюзовый для яркой работы.
🏠 Интерьер
Базовый #78716C (тёплый серый) → монохромная: 5 оттенков серо-бежевого для спокойного интерьера.
Частые вопросы
Какой тип палитры выбрать?
Чем HEX отличается от RGB?
Как проверить контраст цветов?
Сколько цветов использовать в дизайне?
Данные отправляются на сервер?
Полезная информация
Генератор работает в браузере — данные не отправляются на сервер.
Палитры основаны на математике цветового круга и подходят для любых задач дизайна.
Комментарии (1)
🎨Похожие инструменты
Метры в километры
Перевод метров в километры и обратно с таблицей
Конвертер длины
Перевод единиц измерения длины и расстояния между различными системами
Дюймы в сантиметры
Калькулятор дюймов в см онлайн: перевод дюймов в сантиметры и см в дюймы, таблица соответствий
Дальность видимого горизонта
Расчет дальности видимого горизонта на основе высоты глаз наблюдателя над уровнем моря
Калькулятор дальности видимости предмета
Точный расчет дальности видимости объектов с учетом кривизны Земли для навигации и геодезии
Калькулятор расстояния между точками
Вычисление расстояния между двумя точками в 2D и 3D пространстве с дополнительными расчетами
Калькулятор расстояния 3D
Точный расчет расстояния между двумя точками в трехмерном пространстве по координатам
Метры в сантиметры и сантиметры в метры
Перевести метры в сантиметры и сантиметры в метры онлайн — 1 метр = 100 см. Калькулятор и таблица перевода м ↔ см