Современные жидкокристаллические экраны передают шестнадцать миллионов цветов. Расскажем вам, как при таком разнообразии не растеряться и выбрать удачные сочетания.
Этот лонгрид предназначен для начинающих, или тех, кто хочет поработать с дизайном своего сайта самостоятельно. Разбираемся с цветом с самого фундамента: поговорим про цвет, цветовой круг, схемы сочетаемости, которыми можно пользоваться, чтобы подобрать подходящие друг другу цвета, примеры сайтов в этих схемах. Также упомянем инструменты для подбора цветов и оттенков.
Практические рекомендации к тому, с чего начать подбор цветов для дизайна сайта или приложения с нуля, главные тенденции в современном веб-дизайне можно найти в конце статьи. Чтобы сразу перейти к ним, воспользуйтесь соответствующим пунктом в содержании.
Оглавление
Цвет и свет
На самом деле цвет это свет.
Если пропустить луч солнечного света через стеклянную призму, он разлагается и образует спектр волн разной длины. Каждая длина соответствует своему цвету. Несмотря на то, что спектр видимых волн света достаточно узок по сравнению со спектром других типов волн, он содержит в себе огромное количество цветовых оттенков.
Когда колбочки в глазу фиксируют наличие световых волн длиной примерно 700 нм, мозг реагирует на это как на красный цвет. Каждому воспринимаемому цвету соответствует своя длина волны. Это явление лежит в основе нашего с вами цветоощущения. Цвет — у нас в голове.
Что такое спектр?
Спектр — беспрерывный ряд цветов, где они располагаются в определённом порядке. Если согнуть полосу в кольцо, получится цветовой круг.
Какие бывают цвета?
Основные — три цвета (синий, жёлтый, красный).
Вторичные (зелёный, оранжевый, фиолетовый) — получаются при смешивании основных.
Третичные — оттенки, которые получаются при смешении основных цветов с вторичным цветом.
Ахроматические, бесцветные, это белый, серый и чёрный и их оттенки. В составе спектра их нет.
Хроматические, все остальные цвета, их производные и оттенки.
Цветовой круг это удобная структура всех цветов, которые можно получить из спектра.
Параметры цвета
В компьютерной графике ключевыми параметрами цвета являются оттенок (hue), насыщенность (saturation) и яркость (lightness/brightness/value).
Оттенок это и есть индикатор того цвета в спектре, с которым мы работаем.
Насыщенность это индикатор насыщенности от полного отсутствия цветовой информации (чёрный), до максимальной насыщенности (любой цвет).
Яркость это градиент от наиболее затемненной точки к наиболее яркой.
Всеми этими параметрами можно также описать и цветовой круг. Оттенок распределяется по окружности. Насыщенность это переход от окружности, наиболее насыщенного оттенка, к центру. Модель HSA может применяться к любому цветовому кругу.
Поэкспериментировать с количеством тёмных и светлых оттенков можно здесь.
Наш глаз устроен так, что сначала мы получаем информацию о контрасте, а потом уже о цвете. Чем более контрастны цвета по отношению друг к другу, тем лучше они различаются. Именно поэтому мы чаще всего читаем чёрным по белому, или белым по чёрному. Дизайнерские решения, особенно когда нужно разместить текст на цветном фоне, основаны на контрастности.
Узнать уровень контрастности можно здесь (самый важный параметр для текста, так как делает его более или менее читаемым).
Цветовой круг
Цветовых кругов существует много, каждый создан для своих определённых целей и нужд.
Цветовой круг создаётся на основе трёх исходных цветов. Исходные цвета могут быть разными. Не обязательно красный, синий и зелёный. Это могут быть фиолетовый, голубой и жёлтый, например.
Ознакомиться с двенадцатеричным цветовым кругом, или цветовым кругом Йоханнеса Иттена можно здесь.
Как пользоваться цветовым кругом?
Согласно теории цвета, те сочетания, которые в сумме дают ахроматический (белый, чёрный или серый) цвет — дополняют друг друга, а значит приятны взгляду. Это комплементарные цвета.
Примеры таких сочетаний — красный и зелёный, жёлтый и фиолетовый, оранжевый и синий. Это легко определить, проведя прямую линию через центр круга.
Это лишь один из вариантов. Цветовой круг это шпаргалка по сочетаемости цветов на основании того, где на нём находится тот или иной цвет. С помощью него можно легко определить, какие цвета будут гармонировать друг с другом, а какие нет. Как мы уже видели, комплементарные цвета находятся друг напротив друга. Давайте рассмотрим другие типы гармоний.
Правило гармонии цветов
Мало выбрать цвета. Важно то, как гармонизировать их между собой. Есть сразу несколько способов связать два цвета друг с другом, и это будет выглядеть по-разному, хотя это одна и та же гармония.
Цвета воспринимаются мозгом автоматически, так что даже если человек никогда не слышал ни о гармониях, ни о сочетаемости, он всё равно заметит, что что-то не так. К счастью, подбор цветов, которые хорошо сочетаются друг с другом, это объективная реальность благодаря цветовому кругу.
Первое фундаментальное правило сочетаемости цветов: в сумме используемые цвета должны давать ахроматический цвет, тот, который в центре круга, чёрный или белый. Есть шесть схем, с помощью которых можно найти такие сочетания.
Цветовые схемы в веб-дизайне и примеры их применения на сайтах
Комплементарная схема в веб-дизайне
Это наиболее контрастная схема, так как в ней используется два противоположных цвета.
В веб-дизайне комплементарная схема может использоваться следующим образом: сначала подбирается доминирующий цвет, например, фиолетовый для фона, затем к нему по кругу подбирается цвет для акцентов, например, жёлтый, чтобы выделять важные элементы на странице (кнопки и тому подобное). Здесь будет только два хроматических цвета.
Сочетания двух противоположных цветов кажутся неприятными взгляду. Чтобы сгладить впечатление, разбелите один из цветов или используйте градиент.
Примеры сайтов с комплементарной схемой
Раздельно комплементарная схема в веб-дизайне
Это модификация комплементарной схемы. Один или два из цветов делаем акцентными, а третий, контрастный, базовым.
Раздельная схема более разнообразная, а смягчение контрастности за счёт двух дополнительных цветов в хорошем смысле усложняет внешний вид.
PRO.tip: чем больше цветов, тем труднее их сбалансировать, чтобы сайт целиком смотрелся гармонично.
Примеры сайтов с раздельно комплементарной схемой
Двойная комплементарная схема в веб-дизайне
Cдвоенные дополнительные цвета. Выглядит, как четырёхугольник, вписанный в цветовой круг. Это может быть прямоугольник или квадрат.
Это комбинация двух пар комплементарных цветов. Такая схема насыщена цветами больше всех остальных. Цвета в таком сочетании усиливают интенсивность каждого из них. В некоторых сочетаниях могут быть неприятны.
Примеры сайтов с двойной комплементарной схемой
PRO.tip: выберите один или два цвета в качестве основных, а другие оставьте для акцентов. Сложно грамотно расставить акценты с помощью второстепенных цветов, если их 3. В этом заключается волшебство качественного дизайна.
Аналоговая схема в веб-дизайне
Четвёртая схема — аналоговая. Это два или более цвета, расположенные на цветовом колесе рядом друг с другом. Они лёгкие для совместного восприятия, это — самая спокойная схема. Эти цвета легко сочетать, но им не хватает контрастности из-за отсутствия противоположного цвета.
Самая безопасная схема для начинающих. Не такая скучная, как монохромная, в неё можно добавить яркости, если взять насыщенные цвета.
Примеры сайтов в аналоговой схеме
Схема триада в веб-дизайне
Пятая — триада. Триада красок это комбинация трёх цветов, которые вписываются в круг как треугольник.
В классической триаде используются три цвета, равноудаленные друг от друга — синий, красный, жёлтый.
В целом триады ярких цветов воспринимаются резко. Менее яркие цвета дают мягкий контраст.
С помощью этой схемы создаётся сильный визуальный контраст, но сохраняется при этом яркий баланс и насыщенность. Триада не такая броская, как два контрастных комплементарных цвета, и смотрится более сбалансировано.
Чтобы снизить контраст схемы, разбелите один цвет или возьмите менее насыщенные цвета в целом. Сочетание получится мягкое и гармоничное.
Триада становится «условной», если треугольник не равносторонний.
Примеры сайтов в схеме триада
Монохроматическая схема в веб-дизайне
В этой схеме используется цвет одного тона (Hue), но с разными параметрами насыщенности (Saturation) и светлоты (Lightness).
Она приятна на вид, выглядит аккуратно и сдержанно. Оттенки одного тона хорошо друг с другом сочетаются, оказывают успокаивающий эффект.
Чтобы добавить выразительности, можно комбинировать основной тон с нейтральными, например чёрным или серым. Однако, как и в любой схеме без контраста, сложно выделить важные элементы и создать динамичность.
Примеры сайтов в монохроматической схеме
Градиенты
Градиент это плавный переход из одного цвета в другой. Градиенты вошли в моду ещё в 2015 году и с тех пор не теряли своей актуальности. Разве что стали менее яркими с годами.
Градиент может быть монотонным, двухтонным, многоцветным (три цвета и более). Это позволяет разнообразить дизайн кнопок, логотипов, фона главного экрана. С помощью градиента создаётся 3D эффект, появляется объём.
Цвета градиента подбираются по тем же принципам сочетаемости или схемам, которые описаны выше.
Самые популярные способы смешивать цвета: линейные или радиальные градиенты с различными параметрами, такими как радиус, ориентация, непрозрачность и цветовые точки.
Градиенты можно подобрать здесь.
Рекомендации
Как подобрать цвета для сайта, если вы не дизайнер
Хорошая новость в том, что если вы не хотите подбирать цвета наугад, то можете воспользоваться схемами гармонизации. Подбор сочетающихся между собой цветов это объективная реальность благодаря цветовому кругу.
Чтобы подобрать цвета, которые подходят друг другу, нужно, чтобы в сумме они давали ахроматический (белый, чёрный, серый) цвет. Либо использовать монохромную схему, где все цвета это оттенки одного и того же цвета. Даже яркие сочетания смотрятся гармонично, если дополняют друг друга.
Если взять цвета, которые в сумме не дают ахроматический цвет, такое сочетание не будет удовлетворительным на глаз.
Несмотря на всё многообразие оттенков, которые передают современные экраны, не факт, что у всех, кто будет просматривать сайт, монитор с такой же цветопередачей. Поэтому лучше сосредоточиться на расстановке акцентов и контрастности цветов.
Что сейчас модно в веб-дизайне
Главный тренд в оформлении это минимализм, так что использование одного акцентного цвета или двух цветов, один фоновый, другой акцентный, в соотношении 90 на 10%, это частое и стильное решение. Можно использовать два акцентных цвета, чтобы добавить «изюма».
Это безопасный и более простой вариант, потому что чем меньше цветов, тем проще их сбалансировать.
Если не хватает разнообразия, используйте различные оттенки одного и того же цвета. Они априори будут сочетаться друг с другом и с противоположным цветом.
Получить оттенки можно уменьшив или увеличив насыщенность или светлоту. Чистый спектральный цвет будет цветовым акцентом, который позволит сфокусировать внимание на наиболее важных деталях на странице.
Как подобрать цвета, исходя из тематики сайта
Подбор цвета во многом зависит от тематики сайта или приложения. Каждый цвет и каждая цветовая группа — это особая индивидуальность, смысловая ассоциация, имеющая значение для каждого. Например, зелёные цвета мы связываем с природой, натуральностью, голубые и зелёные с медициной.
Тогда, чтобы выделиться на фоне конкурентов в своей нише и запомниться, можно использовать какие-то нестандартные цвета.
В дизайне сайтов всё меньше отвлекающих цветов в самом интерфейсе, особенно если на страницах есть иллюстрации и фотографии. В некоторых случаях дизайн строится непосредственно на основании иллюстраций. Например, в интернет-магазинах или сайтах-портфолио.
Заключение
Основные закономерности в дизайне:
- Чем меньше цветов, тем легче их балансировать.
- Чем меньше цветов, тем сдержаннее дизайн.
- Чем ярче цвета, тем более фантазийным кажется дизайн. Хорошо подходит для молодой аудитории.
- Текст на цветном фоне тем лучше читается, чем больше контрастность между цветом текста и цветом фона. Фон не должен мешать воспринимать информацию.
- Правильно расставленные цветовые акценты побуждают к действию.
- Градиент всё ещё в тренде.
- Цвет не должен противоречить тематике проекта, для которого делается дизайн. Похожие по тематике проекты можно посмотреть на Behance для вдохновения.
