Если вы новичок в цифровом дизайне то возможно уже обратили внимание на обозначение цветов в виде кода и даже в различных форматах RGB, HSL, HEX и другие. Конечно можно его просто копировать и не задумываться как это устроено, но никогда не помешает немного в этом разобраться.
RGB
Как и большинство цветовых форматов, rgb это аббревиатура. Это означает Red Green Blue (красный зеленый синий).
Из всех цветовых форматов, о которых мы сегодня познакомимся, 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
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, мы перешли на более высокий уровень абстракции, который более тесно связан с тем, как люди обычно думают о цвете.
Как и в случае с другими форматами, мы можем указать прозрачность.
HSB (Hue-Saturation-Brightness)
Это близкий к HSL формат. В HSL «яркость» — это шкала между черным и белым. Яркость 0% всегда чёрная, яркость 100% всегда белая. Если нам нужен светлый, яркий, насыщенный цвет, нам следует зафиксировать яркость на уровне 50 %, что находится на полпути между черным и белым.
В HSB дела обстоят немного сложнее. «Яркость» по-прежнему является мерой светлоты, и значение 0% по-прежнему дает черный цвет, но значение 100% больше не всегда дает белый цвет. Это зависит от насыщенности: при полной яркости насыщенность 0% — это белый цвет, а насыщенность 100% — это наш яркий, насыщенный цвет.
Итог
Это не все форматы цвета которые вы может встретить в цифровом пространстве, но это те которые используются в графических редакторах для разработки интерфейсов. Вы так же можете самостоятельно поискать в глобальной сети информацию по новым форматам таким как LCH, Display P3 и OKLCH.
Какой формат использовать решать вам, но как уже говорил в этой статье, наиболее часто встречаемый формат это HEX.