Цвет и его свойства в web: что такое RGB и как им правильно пользоваться?

Приходя в дизайн, многие новички задаются вопросом — зачем цветам такие странные обозначение — #32A852, #5E2227 и, упаси Боже, #FFFFFF. Что это вообще такое? И зачем в Figma добавили дропдаун, который позволяет выбирать между RGB, HEX и прочими непонятными аббревиатурами? С этим сегодня разберёмся, а пока начнём с азов. Что такое «цвет»? Цвет — это элемент искусства и небольшая часть того, что обеспечивает эффект эстетики в юзабилити (на самом деле «физическое явление», но мы это упустим), который возникает, когда свет, падая на объект, отражается и направляется обратно в человеческий глаз. В зависимости от свойств объекта, меняются свойства отражения, и мы видим тот или иной цвет. С этим разобрались, теперь поехали дальше.

Что такое RGB, HSL, HEX, CSS?

RGB, HSL, HEX, CSS — это, по сути, схемы обозначения цветов. Человек может понять, о каком цвете идёт речь, если сказать ему общепринятое название — синий, чёрный, белый и т.д. А компьютеры так не могут!

Представим ситуацию, что при проектировании мобильного интерфейса в Figma, мы захотели перекрасить кнопку в цвет «Japanese Blue». Однако мы не можем написать название цвета в этом же виде, потому что программа не понимает наш язык. Чтобы убедиться, что компьютер правильно понимает цвет, мы используем такие схемы, как RGB, HSL, HEX и т.д. Дабы не перегружать вас лишней информацией на старте, в этой статье мы рассмотрим только RGB. На примере этой схемы все станет понятно.

Пиксель и его связь с RGB

Давайте начнём с простого. RGB расшифровывается как red, green, blue. Это название основных цветов, которые формируют эту систему. Дело в том, что изображения на экранах компьютеров (или телевизоров, iPad и т.д.) складываются из множества крошечных цветных точек. Эти точки называются «пикселями», а количество пикселей на экране определённого размера — «разрешением». Чем меньшим является пиксель, и чем больше их на экране, тем более качественным получается изображение.

Каждый пиксель можно представить как набор из трёх блоков. Один блок отвечает за красный цвет, второй — за зелёный, а третий — за синий. Смесь всех трёх цветов даёт конечный цвет на экране. На рисунке ниже показана связь пикселя с системой RGB.

Пиксель в системе RGB

В чем разница между RGB и HEX?

По сути, глобальной разницы между системами RGB и HEX нет. Это разные способы выразить одно и то же: значения красного, зеленого и синего цветов. Самое большое отличие заключается в том, кто в конечном итоге будет использовать цвет: веб-сайты, приложение, векторная графика или печатная продукция. В основном, для web-продуктов используют HEX-систему, в то время как принтеры или другие подобные гаджеты часто обращаются именно к RGB.

Что такое HEX-код?

У каждого цвета есть HEX-код, например, #12BE46. HEX означает «6» (тот, кто изучал математику и физику, понимает, о чем речь). То есть, код цвета в системе HEX состоит из 6 символов. При записи кода мы используем шестнадцатеричную систему исчисления. Она характерна тем, что использует цифры от 0 до 9 и символы от «A» до «F». В общей сложности, получается 16 различных значений.

На рисунке ниже показано значение HEX-кода. Первые два символа обозначают красный цвет, затем последовательно зелёный и синий. Система градации следующая —  «0» означает отсутствие света (представьте себе телевизор, когда он не включён), а «F» (то есть 15), означает полную насыщенность цвета.

HEX-код

Давайте рассмотрим все это на практике! Код #FF0000 означает чистый красный цвет, так как первые символы, отвечающие за красный, имеют значение FF, что означает максимальную насыщенность (кстати, недавно мы рассказывали, как работать с яркими цветами в интерфейсе). Остальные символы — они отвечают за зелёный и синий цвета — имеют значение 0, то бишь полное отсутствие какой‑либо насыщенности. По аналогии мы приходим к тому, что код #00FF00 должен обозначать чистый зелёный цвет, а #0000FF — синий. На рисунке ниже наглядно представлен результат.

Чистые красный, зеленый и синий цвета

А что произойдет, если все три цвета оставить на нуле (отсутствие насыщенности), то есть #000000? Это будет черный цвет, как в случае с выключенным телевизором или, например, тёмной темой в интерфейсах. А если насыщенность всех трех цветов будет максимальной (то есть #FFFFFF)? Тогда мы получим чистый белый цвет.

Чистые белый и черный цвета

Использование цветов в UI/UX дизайне

Каждый проект UX/UI дизайнера состоит из множества цветов. Чтобы удачно ими оперировать важно не только делить все цвета на 4 большие группы, но и знать, какие цвета в этом году в тренде.

Основные цвета (primary colours). То есть те, которые чаще всего используются в интерфейсе и придают продукту уникальность. Как правило, именно эти цвета выбирает бренд для своей идентификации. С каким цветом у вас ассоциируется Facebook? Очевидно, что с синим. А теперь зайдите на их сайт, и вы увидите, что все ключевые элементы — синие. Это и есть основной цвет.

Дополнительные цвета (secondary colours). Они служат для того, чтобы подчеркивать или дополнять основной цвет. Это позволяет держать баланс в интерфейсе и выделять все самое главное. Как правило, сайт или приложение может иметь 1-6 дополнительных цветов.

Нейтральные цвета (neutrals). Они включают в себя оттенки серого: от белого до черного. Большая часть любого интерфейса состоит именно из них. Нейтральные цвета чаще всего используются для фона, цвета, текста и т. д.

Семантические цвета (semantic colours). Это цвета, которые обозначают стандартные состояния значений. Например, «успешно” (зеленый), «ошибка» (красный) или «предупреждение»(оранжевый). Каждый цвет имеет одно и то же базовое значение во всех контекстах.

Семантические цвета

Оглянемся назад

Итак, мы определили, что такое RGB, как использовать HEX-код, и что он в действительности означает. Важно помнить, что знания подобных вещей являются очень важными для любого дизайнера, поскольку невозможно просто использовать color picker и надеяться, что цвета для проекта можно подобрать с помощью готовых палитр. Нужно понимать, как возникает тот или иной цвет. Это послужит отличной базой для дальнейшей работы с гармоничным цветовым наполнением больших проектов.

Источник: Bootcamp