Сочетание цветов: 36 готовых палитр и как подобрать свою

Подобрать цвета «на глаз» умеют немногие. Хорошая новость: это и не нужно. Гармоничные сочетания подчиняются простым правилам, а для большинства задач проще взять готовую палитру и слегка подстроить под себя.

Ниже 36 палитр, собранных по настроению. Каждая сразу показана на маленьком макете сайта: где фон, где текст, где кнопка. Нажмите на цвет — скопируется его код, нажмите «CSS» — скопируются готовые переменные для сайта. Контраст текста у каждой уже проверен.

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

В каждой палитре пять цветов, но на сайте или в макете у них разные роли. Мы их уже расставили, а в CSS-переменных они подписаны:

Остальные цвета палитры — --color-1…--color-5 — пригодятся для иконок, графиков, подложек и состояний. Не нужно использовать все пять в равных долях: хорошая палитра почти всегда работает через один доминирующий цвет и один акцент.

Правило 60-30-10

Самое полезное правило в работе с цветом пришло из дизайна интерьеров: 60% — основной цвет, 30% — дополнительный, 10% — акцент.

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

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

Цветовой круг: откуда берутся сочетания

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

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

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

Контраст: палитра должна читаться

Самая частая ошибка в красивых палитрах — светло-серый текст на белом или пастельный текст на пастельном фоне. На макете выглядит изысканно, на телефоне при солнце не читается вообще.

Стандарт доступности WCAG задаёт минимальный контраст текста и фона:

• 4,5:1 — для обычного текста;
• 3:1 — для крупных заголовков от 24 пикселей и для кнопок, иконок, рамок полей;
• 7:1 — повышенный уровень, комфортно для длинных текстов.

У каждой палитры выше контраст текста подписан прямо на карточке. Там, где в самой палитре не нашлось цвета с достаточным контрастом — у совсем ярких наборов, — мы взяли для текста почти чёрный. Это нормальная практика: палитра задаёт настроение, а текст всё равно должен читаться.

Как сделать тёмную тему из светлой палитры

Тёмная тема — это не инверсия цветов. Если просто поменять белый на чёрный, получится резкий и утомительный экран. Несколько правил:

1. Фон не чисто чёрный. Возьмите очень тёмный оттенок основного цвета палитры — например, почти чёрный синий или зелёный. Чистый #000000 слишком контрастен с белым текстом.
2. Текст не чисто белый. Светло-серый или цвет с лёгким оттенком палитры, около 90–95% светлоты.
3. Акцент светлее и мягче. Яркий цвет, который хорошо смотрелся на белом, на тёмном фоне «светится». Поднимите светлоту и чуть уменьшите насыщенность.
4. Глубина — светлотой, а не тенями. На тёмном фоне тени почти не видны. Карточки делают чуть светлее фона, а не темнее.

Примеры готовых тёмных палитр — в разделе «Тёмные» выше: «Полночь», «Графит», «Хвойный лес» и другие.

Настроение цвета

Люди действительно связывают цвета с определёнными ощущениями, хотя это скорее культурные привычки, чем закон природы. Эти ассоциации стоит учитывать, а не слепо им следовать:

Главное — единство. Даже «неправильный» цвет, выдержанный последовательно, работает лучше, чем правильный, но разбросанный как попало.

Типичные ошибки

• Слишком много акцентов. Если выделено всё, не выделено ничего. Один акцентный цвет на экран — хорошее правило.
• Чистые насыщенные цвета на больших площадях. Ярко-красный фон на весь экран утомляет за секунды. Яркое — для мелких деталей, большие площади — приглушённые оттенки.
• Серый без оттенка. Нейтральные цвета с лёгкой примесью основного цвета палитры смотрятся благороднее «мёртвого» серого #808080.
• Цвет как единственный сигнал. Около 8% мужчин плохо различают красный и зелёный. Ошибку в форме стоит показывать не только красной рамкой, но и иконкой или текстом.
• Палитра не проверена на телефоне. Экраны телефонов ярче и контрастнее, а читают их часто на улице. Проверяйте там, где будут смотреть.

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

Сколько цветов должно быть в палитре?

Обычно три–пять: основной, дополнительный, акцент и пара нейтральных для фона и текста. Больше пяти цветов в интерфейсе удержать в гармонии сложно.

Какие цвета сочетаются с синим?

Классика — оранжевый как комплементарный акцент, белый и светло-серый для фона, тёмно-синий для текста. Спокойные варианты — голубой и бирюзовый (аналоговая схема), премиальный — синий с золотистым или бежевым.

Какие цвета сочетаются с зелёным?

Бежевый, кремовый и коричневый — природная гамма. Для контраста — розовый или коралловый. Для тёмной темы — зелёный на почти чёрном, как палитра «Терминал» выше.

Можно ли использовать эти палитры в коммерческих проектах?

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

Как перевести цвет из палитры в RGB или CMYK?

Нажмите на цвет — скопируется HEX-код, — и вставьте его в конвертер цветов. Там же он переведётся в RGB, HSL, CMYK и другие форматы.

Как узнать название цвета по коду?

В нашем справочнике названий цветов есть поиск по HEX: он покажет ближайшие цвета с русскими названиями.

Что дальше

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