Форматы кодового обозначения цвета — это основа работы с цветом в цифровых интерфейсах. В UX/UI-дизайне и веб-разработке цвет передаётся не словами, а точными значениями, такими как HEX, RGB и HSL. Понимание этих цветовых форматов позволяет дизайнеру и разработчику одинаково интерпретировать оттенки в интерфейсе.
Сегодня в дизайне интерфейсов используется несколько основных способов записи цвета: шестнадцатеричный HEX-код, числовая модель RGB и более интуитивная модель HSL. Все они описывают цвет по-разному, но служат одной цели — точно задать оттенок в веб-среде. В этой статье разберём форматы кодового обозначения цвета и их применение в UX/UI-дизайне.
Если вы новичок в цифровом дизайне то возможно уже обратили внимание на обозначение цветов в виде кода и даже в различных форматах RGB, HSL, HEX и другие. Конечно можно его просто копировать и не задумываться как это устроено, но никогда не помешает немного в этом разобраться.
RGB
Как и большинство цветовых форматов, rgb это аббревиатура. Это означает Red Green Blue (красный зеленый синий).
Цветовая модель RGB описывает цвет через интенсивность красного, зелёного и синего каналов.
Из всех цветовых форматов, о которых мы сегодня познакомимся, RGB это наименее абстрактный. Дисплей вашего компьютера/телефона на самом деле представляет собой просто набор миллионов крошечных красных, зеленых и синих светодиодов, собранных в пиксели. Итак, RGB цветовой формат позволяет нам напрямую настраивать яркость этих источников света.
Каждое значение — красное, зеленое, синее — называется каналом . Каждый канал имеет значение от 0 до 255. Смешивая эти каналы в разном количестве, мы можем создать более 16 миллионов различных цветов.
Вот наглядный видео-пример как работает палитра RGB.
Особенность цвета RGB в том, что он основан на физике света. Мы можем смешивать красный, зеленый и синий свет, чтобы получить любой цвет. Проверните их все до 255, и мы получим белый цвет. Установите их все на 0, и у нас останется черный цвет.
Цветовой RGB формат также позволяет нам указать четвертое необязательное значение для альфа-канала для управления прозрачностью.
Альфа-канал варьируется от 0(полностью прозрачного) до 100%(полностью непрозрачного). Все, что находится между ними, дает полупрозрачный цвет.
HEX (шестнадцатеричный код)
Это наиболее часто используемый цветовой формат в Интернете.
Вот как это работает: 6-значный шестнадцатеричный код содержит три 2-значных значения, по одному для каждого канала (красный/зеленый/синий). Вместо использования 10-значной десятичной системы используется 16-значная шестнадцатеричная система.
Это станет понятнее при просмотре видео-примера ниже.
По сути, шестнадцатеричные коды аналогичны значениям RGB. В обоих случаях мы предоставляем значения для красного, зеленого и синего.
В десятичной системе двузначное значение может содержать 100 возможных значений (10×10). В шестнадцатеричном формате общее число равно 256 (16 × 16). На самом деле это похоже на rgb(), где мы указываем значение от 0 до 255 для каждого канала R/G/B.
В графических редакторах так же можно указать прозрачность (альфа канал).
Так же допускается указание в сокращенной форме если 2-значные значения одинаковые например: #0022FF = #02F
HEX-код остаётся одним из самых популярных форматов кодового обозначения цвета в веб-дизайне.
Если вы хотите глубже разобраться в работе цвета в интерфейсах, рекомендуем изучить материал про психологию цвета в UX/UI, где подробно разобрано влияние цвета на поведение пользователя, а также полный гайд по цвету в дизайне сайтов и приложений. Дополнительно будет полезна статья про типы файлов изображений для веб-дизайна.
HSL (Hue-Saturation-Lightness)
До сих пор оба цветовых формата, которые мы видели, представляют собой разные «обертки» одной и той же фундаментальной идеи: передачи определенных значений для красного/зеленого/синего каналов.
Однако это не единственный способ думать о цвете! Давайте посмотрим на совершенно другой цветовой формат: HSL.
На этот раз начнем сразу с видео-примера.
Эта палитра цветов, вероятно, кажется гораздо более знакомой. Он похож на те, которые используются в программах графического дизайна, таких как Figma или Photoshop.
Этот цветовой формат принимает 3 разных значения:
- Тон/оттенок (Hue): это пигмент, который мы хотим использовать. Допустимые значения находятся в диапазоне от 0 до 360, и мы указываем их в градусах, поскольку шкала имеет круглую форму ( 0° и 360° представляет один и тот же красный оттенок).
- Насыщенность (Saturation): сколько пигмента содержится в цвете? Допустимые значения находятся в диапазоне от 0% до 100%. При значении 0% в цвете нет пигмента, и он полностью полутоновый. При значении 100% цвет максимально яркий.
- Яркость (Lightness): насколько светлый/темный цвет? Допустимые значения находятся в диапазоне от 0% до 100%. При 0% цвет становится черным. При 100% цвет чисто белый.
Это, как правило, действительно интуитивный способ думать о цвете. Вместо того, чтобы напрямую управлять значениями освещения R/G/B, мы перешли на более высокий уровень абстракции, который более тесно связан с тем, как люди обычно думают о цвете.
Как и в случае с другими форматами, мы можем указать прозрачность.
Модель HSL часто считается более интуитивной для дизайнеров, потому что позволяет отдельно управлять тоном, насыщенностью и светлотой.
HSB (Hue-Saturation-Brightness)
Это близкий к HSL формат. В HSL «яркость» — это шкала между черным и белым. Яркость 0% всегда чёрная, яркость 100% всегда белая. Если нам нужен светлый, яркий, насыщенный цвет, нам следует зафиксировать яркость на уровне 50 %, что находится на полпути между черным и белым.
В HSB дела обстоят немного сложнее. «Яркость» по-прежнему является мерой светлоты, и значение 0% по-прежнему дает черный цвет, но значение 100% больше не всегда дает белый цвет. Это зависит от насыщенности: при полной яркости насыщенность 0% — это белый цвет, а насыщенность 100% — это наш яркий, насыщенный цвет.
Итог
Понимание форматов кодирования цвета — базовый навык любого UX/UI-дизайнера.
Это не все форматы цвета которые вы может встретить в цифровом пространстве, но это те которые используются в графических редакторах для разработки интерфейсов. Вы так же можете самостоятельно поискать в глобальной сети информацию по новым форматам таким как LCH, Display P3 и OKLCH.
Какой формат использовать решать вам, но как уже говорил в этой статье, наиболее часто встречаемый формат это HEX.
Часто задаваемые вопросы по теме
Какие форматы кодирования цвета используются в веб-дизайне?
В веб-дизайне чаще всего используются HEX, RGB и HSL. Все они описывают цвет числовыми значениями и применяются в CSS и интерфейсах.
Чем HEX отличается от RGB?
HEX записывает цвет в шестнадцатеричной системе (#RRGGBB), а RGB — через числовые значения красного, зелёного и синего каналов. По сути, оба формата описывают один и тот же цвет, но в разной форме записи.
Когда лучше использовать HSL?
HSL удобен, когда нужно быстро подбирать оттенки, менять насыщенность или светлоту. Многие дизайнеры считают его более интуитивным по сравнению с RGB.
Какой формат цвета самый популярный?
На практике чаще всего используют HEX и RGB. HEX ценят за компактность, а RGB — за наглядность при работе с цветами в коде.
Влияет ли формат записи цвета на отображение?
Нет. HEX, RGB и HSL могут описывать один и тот же оттенок — браузер всё равно преобразует его в RGB для отображения на экране.
