Правила работы с цветом в дизайне: HSB, HEX, HSL модели цвета

Инструкция по работе с цветом в дизайне интерфейсов, мобильных приложений и в веб-дизайне. Данный мануал по работе с цветом будет полезен новичкам. Хотя, может, и опытные UI-дизайнеры что-то для себя найдут. Если вы привыкли подбирать цвет интуитивно, то после материалов этой статьи будете подходить к этому системно и логически. Это позволит вам добиться гармонии в цветах ваших проектов.

Чтобы было понятно, почему я решил поделиться этой информацией, представлюсь. Меня зовут Виталий и я являюсь UI/UX дизайнером. За 6 лет обучил более 600 человек этой профессии и видел очень много ошибок. Одна из самых критических ошибок новичков, которая на корню может загубить любую работу — это неправильная работа с цветом. Статья родилась после записи занятия по цвету для моих учеников и многим будет полезна, как руководство к действию.

HEX или HSB модель цвета — в чём разница?

Многие новички используют в работе с цветом модель RGB (Red Green Blue) или HEX, где просто указывается код цвета, например # ffffff — это HEX-код чисто белого цвета. Если вы делаете дизайн интерфейса в Figma, то можно переключить цветовую модель на HSB.

HSB расшифровывается, как Hue (тон), Saturation (насыщенность), Brightness (яркость). Соответственно, переключившись в «Фигме» на HSB, вы можете управлять отдельно каждым из этих параметров.

Hue — цветовой тон от 0 до 360 градусов (цветовой круг)

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

Обратите внимание, что при изменении Hue, показатели Saturation и Brightness (они находятся в последующих двух инпутах) не меняются. Hue имеет значение от 0 до 360 — это градусы расположения тона на стандартном цветовом круге.

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

Saturation — насыщенность от 0 до 100 (горизонталь)

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

Показатель Saturation может принимать значение от 0 до 100. Если мы поставим 0 во втором инпуте, кружок выбора цвета перейдёт максимально влево и цвет будет серым, черным или белым (зависит от показателя Brightness), если поставим 100 — максимально вправо, тогда цвет будет максимально красочным.

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

Brightness — яркость от 0 до 100 (вертикаль)

Третий инпут слева отвечает за яркость и за вертикальное расположение кружка в области выбора цвета. Значение 0 — максимально тёмный цвет, значение 100 — максимально светлый.

Если параметр Saturation имеет значение 0, то при значении параметра Brightness 0, цвет будет черным, при значении 50 — серым, а при значении 100 — белым. И не важно, какое в этом случае будет значение параметра Hue. Чтобы легче это понять, перейдите в «Фигму» прямо сейчас и «поиграйте» с этими цифрами.

Система 60-30-10 — фундамент вашей палитры

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

Суть подхода в следующем — все цвета своего проекта вы должны разбить в таком процентном соотношении:

• 60% — доминантные цвета.
• 30% — цвета для контента или дополнительные цвета.
• 10% — акцентные цвета.

10% акцентного цвета и его функция

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

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

30% дополнительного цвета и его функция

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

Дополнительные цвета напрямую связаны с тем, какой выбран в качестве главного акцентного. Берётся тот же параметр Hue, затем снижается показатель Saturation на минимальный. После снижается или повышается (зависит от того, светлую или темную версию дизайна вы делаете) значение Brightness, чтобы была достаточная контрастность между контентом и фоном.

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

60% доминантного цвета и его функция

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

Опять же здесь параметр Hue зависит от того, который указали при выборе акцентного цвета и в идеале не менять его. Если вы делаете светлую тему, то показатель Brightness должен быть максимальным, а Saturation минимальным. Если тёмную — то Brightness делается минимальным.

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

Ещё одно важное правило — от изменения Brightness зависит изменение Saturation. Чем темнее цвет, тем больше надо подмешивать насыщенности, а чем светлее цвет, тем меньше насыщенность нужно делать.

Контрастность

Мы поняли, что 60% — фон, 30% – контент, 10% — акценты и если со значением Hue всё ясно (оно не меняется), а значение Saturation максимально в акцентах и минимально в доминантных и дополнительных цветах, то что на счёт Brightness?

Очень важно, чтобы контент хорошо воспринимался и считывался. Поэтому если говорить о светлых темах, то в доминантных цветах Brightness делается максимальным, а в дополнительных минимальным. Но есть какие-то границы или диапазон? Да, есть.

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

Дополнительная цветовая индикация или акценты

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

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

Тут уже не убежишь от неизменности показателя Hue, так как меняется сам цветовой тон. Но чтобы такие дополнительные акцентные цвета гармонировали с остальной палитрой, то параметры Saturation и Brightness (во втором и третьем инпутах) лучше не менять кардинально от главного акцентного цвета. То есть просто меняете Hue для получения зеленого или красного тонов, а насыщенность и яркость стараетесь либо не трогать, либо изменить но не сильно много (для большей гармонии с палитрой).

Самые частые ошибки

HSB-модель работы с цветом и система 60-30-10 очень тесно связаны и кажется, что ошибиться тут сложно. Как более логично расписать работу с цветом, чем описано выше? Но даже после объяснения этого материала ученикам, ошибки происходили и они возможны. Так что я поделюсь ими, чтобы вы не наткнулись на те же грабли.

Использование цветов с Saturation=0 и Brightness<10

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

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

Использование цветов с Saturation>90 и Brightness>90

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

Резюмируя 2 частые ошибки, описанные выше, получаем область, в которой можно работать и области, в которые при выборе цвета заходить не стоит. Особенно это касается резких зелёного и красного цветов. Работая с ними, понижайте насыщенность и яркость по сравнению с другими цветами.

Соприкосновение цветов с разным значением Hue

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

Ну то есть вы инпут в красный покрасили, а текст остался с синеватым тоном, например. Это недопустимо. Если соприкасаются элементы разных тонов, это сразу же вызывает дисгармонию. Поэтому в таких случаях стоит тонировать цвет текста под цвет фона. Тон у фона и контента, размещенного поверх него должны быть с одинаковым параметром Hue. В этом случае также обязательно проверяйте контрастность.

Выбор этих цветов для палитры

Фиолетовый, коричневый, желтый — очень сложные цвета для новичков. Это те цвета, в которых Saturation должен быть между 0 и 1 для контента и фона в идеале. Но такого не бывает. Поэтому работать с ними довольно сложно на начальных этапах. А коричневый вообще напоминает сами знаете, что. Так что с таким цветом очень легко сделать то же, что окрашено в этот цвет в природе.

Перебор акцентного цвета — проверка размытием

Есть хорошее упражнение, которое я описывал в своём телеграм-канале: берёте ваш макет, создаёте прямоугольник поверх него, размываете фон за прямоугольником и смотрите, как работает акцентный цвет в вашем макете и работает ли.

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

Доминантные и контентные цвета с Saturation>10

Если так делать, будет тот самый эффект пролитого ведра краски на экран. Особенно это касается доминантных цветов. В них на светлых темах не стоит делать Saturation больше 3.

Итог

Работа с цветом — целая наука, но всё поддаётся логике и системе. Я постарался описать базовые вещи так, чтобы они были понятны максимальному количеству людей.

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