Совместимость цветов
Подбор цветовых гармоний, проверка контрастности WCAG и симуляция дальтонизма
Что такое сочетаемость цветов
Инструмент помогает подобрать цвета, которые хорошо сочетаются друг с другом. Это нужно при создании сайтов, логотипов, интерьеров, одежды, презентаций. Правильные цветовые комбинации делают дизайн гармоничным и профессиональным.
Теория цвета — целая наука о том, какие цвета "дружат". Основные правила основаны на цветовом круге Иттена: комплементарные (противоположные), аналоговые (соседние), триадные (через один), тетрадные (квадрат).
Основные схемы
Монохромная: разные оттенки одного цвета. Элегантно и просто. Аналоговая: 3-5 соседних цветов на круге. Спокойно и гармонично. Комплементарная: 2 противоположных цвета. Ярко и контрастно.
Сплит-комплементарная: базовый цвет + 2 цвета, соседних с его противоположностью. Балансирует контраст. Триадная: 3 цвета на равном расстоянии. Живо и энергично. Тетрадная: 4 цвета прямоугольником. Сложно в использовании.
Где применять
В веб-дизайне: комплементарные и аналоговые для основной палитры, акцентные цвета для CTA. В интерьере: основной тон + 2-3 дополнительных оттенка. В одежде: одна доминанта + нейтральные + акцент.
Профессионалы обычно используют правило 60-30-10: 60% доминирующий цвет, 30% вторичный, 10% акцентный. Это даёт визуальную иерархию и не перегружает глаз.
Подбор цветов для сайта
Веб-дизайнер работает над сайтом финтех-стартапа и выбирает цвета.
Инструмент предлагает комплементарную пару: #2563EB (синий доверия) + #F97316 (оранжевый действия).
Добавляет нейтральные (белый, серый) для фонов. Получает профессиональную палитру 60-30-10. Клиент доволен — цвета выглядят серьёзно и привлекательно одновременно.
Знаете ли вы?
Теорию цвета развивал Иоганн Иттен в Баухаузе в 1920-х.
Комплементарные цвета — самые контрастные в цветовом круге.
Синий — цвет доверия, чаще всего используется в корпоративных логотипах.
Красный повышает аппетит — поэтому его часто используют рестораны.
Зелёный расслабляет и связывается с природой и здоровьем.
Чёрно-белая схема — классика, которая никогда не стареет.
Основные цветовые схемы
| Схема | Цветов | Применение |
|---|---|---|
| Монохром | 1 + оттенки | Минимализм |
| Аналог | 3-5 | Природные темы |
| Комплемент | 2 | Контраст, акценты |
| Триада | 3 | Живые дизайны |
| Тетрада | 4 | Сложные проекты |
Важно знать
Правило 60-30-10 — простой способ избежать цветового хаоса: 60% основной цвет, 30% вторичный, 10% акцентный. Эта формула работает в веб-дизайне, интерьере, одежде и любом другом визуальном контексте.
Как подобрать совместимые цвета: пошаговая инструкция
Выберите основной и дополнительный цвета
Кликните по цветовому квадрату для открытия палитры или введите HEX-код вручную. Вы также можете нажать кнопку «Случайный» для быстрого подбора. Инструмент автоматически покажет название цвета и его значения в HSL.
Изучите цветовые гармонии
На вкладке «Гармонии» выберите тип сочетания: комплементарная, аналогичная, триадная, раздельно-комплементарная, тетрадная или монохромная. Цветовой круг визуально покажет расположение цветов, а карточки ниже — готовые HEX-коды для копирования.
Проверьте контрастность и доступность
На вкладке «Контраст» оцените коэффициент контрастности по стандарту WCAG. Посмотрите предпросмотр текста на выбранном фоне и убедитесь, что уровень AA или AAA достигнут. Здесь же доступна полная информация о цветах во всех форматах.
Сгенерируйте палитру или выберите готовую
На вкладке «Палитра» создайте набор из 5 цветов или выберите одну из 10 тематических палитр. Зафиксируйте понравившиеся цвета замком и перегенерируйте остальные. Экспортируйте результат как CSS-переменные.
Проверьте для дальтоников и скопируйте результаты
На вкладке «Дальтонизм» убедитесь, что ваши цвета различимы при всех четырёх типах нарушения зрения. Скопируйте все результаты одной кнопкой или отдельные значения кликом по карточкам.
Примеры использования инструмента совместимости цветов
🎨 Создание дизайна сайта
Веб-дизайнер подбирает цветовую схему для корпоративного сайта. Вводит основной фирменный цвет, находит к нему комплементарную гармонию для акцентов, проверяет контрастность текста на фоне по WCAG, генерирует палитру из 5 оттенков для элементов интерфейса и экспортирует CSS-переменные прямо в проект.
📱 Разработка мобильного приложения
Разработчик проверяет доступность интерфейса приложения. Тестирует контрастность всех элементов: текста на кнопках, иконок на фоне, уведомлений. Симуляция дальтонизма помогает убедиться, что иконки статусов (успех, ошибка, предупреждение) различимы для людей с протанопией и дейтеранопией.
📊 Оформление презентации
Маркетолог создаёт презентацию для клиента. Использует готовую палитру «Корпоративный» как основу, затем подстраивает оттенки под бренд клиента. Проверяет, что текст на слайдах читаем на цветных фонах — контрастность не менее 4.5:1 для обычного текста.
🏠 Дизайн интерьера
Дизайнер интерьеров подбирает цветовую гамму для гостиной. Аналогичная гармония из тёплых тонов создаёт уютную атмосферу. Монохромная палитра серо-голубых оттенков — стильный минимализм для кабинета. Триадная схема — для яркой детской комнаты.
🖌️ Визуальный контент для соцсетей
SMM-специалист оформляет визуальную концепцию Инстаграм-аккаунта. Подбирает палитру из 5 оттенков для единого стиля публикаций. Проверяет, что текст на обложках рилсов и сторис читаем на ярких фонах. Использует предустановленную палитру «Пастель» для нежных тонов бьюти-блога.
Часто задаваемые вопросы
Сколько цветов брать в палитру?
Какая схема самая простая?
Как выбрать цвета бренда?
Что такое доминанта?
Можно ли использовать чёрный?
Полезная информация
Все расчёты выполняются локально в вашем браузере. Данные не передаются на сервер. Алгоритмы контрастности соответствуют спецификации WCAG 2.1. Симуляция дальтонизма основана на научных моделях цветовосприятия. Результаты носят рекомендательный характер — для критически важных проектов рекомендуется дополнительная проверка на реальных устройствах.
Комментарии (1)
🎨Похожие инструменты
Проверка контраста цветов
Проверьте контраст фона и текста по стандарту WCAG 2.1
Генератор случайных цветов
Генерация цветов, палитр и проверка контрастности WCAG
Конвертер CSS-единиц
Перевод px в em, rem, %, vw, vh и обратно с учётом контекста
Генератор CSS box-shadow
Визуальный редактор теней с множественными слоями и готовыми пресетами
Оптимизация CSS
Минификация, форматирование и сжатие CSS-кода онлайн
Генератор CSS-градиентов
Создайте красивый CSS-градиент для сайта с живым предпросмотром
Проверка контраста цветов (WCAG)
Проверьте контрастность цветов по стандарту WCAG 2.1 для доступности сайта
Генератор оттенков и тонов
Создайте палитру тонов и оттенков любого цвета с экспортом в CSS, SCSS и Tailwind