Понимать, как кодируются цвета нужно, чтобы эффективно работать с заливками, обводками и градиентами. Если
HEX: Шестнадцатиричные цвета
Любой цвет, который виден на экране в рамках цветовой системы RGB (Red, Green, Blue), может быть передан при помощи комбинации трёх цветовых каналов: красного, зелёного и синего. Хекс-коды состоят из трёх пар символов, каждая из которых отвечает за один из этих каналов. Используется шестнадцатиричное исчисление:
0 1 2 3 4 5 6 7 8 9 A B C D E F00 — минимальное значение канала, а FF — максимальное.
#000000 — отсутствие цвета по всем трём каналам, чёрный
#FFFFFF — максимум по всем каналам, белый
#FF0000 — максимум по красному каналу, ярко-красный
#00FF00 — максимум по зелёному, ярко-зелёный
#0000FF — максимум по синему каналу
Если по всем трём каналам стоит равное значение, например, #808080, цвет будет монохромным, то есть не будет иметь оттенка. Это происходит, потому что каналы друг друга компенсируют.
Хекс-коды — это основной стандарт кодирования цветов в вебе. Их плюс в том, что их удобно копировать и передавать.
RGB-код
Помимо хекс-кодов, цвета можно кодировать в похожей трёхканальной системе, где вместо кодов используются десятичные значения.
0 — минимальное значение канала, 255 — максимальное.
0, 0, 0 — отсутствие цвета по всем каналам, чёрный
255, 255, 255 — максимум по всем каналам, белый
255, 0, 0 — максимум по красному каналу, ярко-красный
0, 255, 0 — максимум по зелёному, ярко-зелёный
0, 0, 255 — максимум по синему каналу
Такой метод кодирования цветов применяется в печати наравне с системой каналов CMYK (Cyan, Magenta, Yellow, Black), а также послужил прототипом для системы RGBa, о которой поговорим дальше. Про CMYK в рамках этой статьи мы говорить не будем.
Плюс такой системы, что такие коды более запоминаемы и их удобно диктовать на слух.
RGBa-код
В качестве альтернативы неинтуитивным хекс-кодам разработали систему кодирования, адаптированную для использования в коде веб-страниц и иных программ. Она содержит в основе RGB, а также добавляет к этим трём каналам дополнительный канал, который позволяет задать опасити. Он называется альфа-каналом.
Первые три канала задаются от 0 до 255, а альфа-канал от 0 до 1.
Значение альфы 0.5 соответствует 50% опасити.
Как формируется RGBa-код:
rgba(красный, зелёный, синий, альфа)
Примеры:
rgba(0, 0, 0, 0.5) — чёрный, с опасити на 50%
rgba(255, 255, 255, 1) — непрозрачный белый
Такая система имеет плюсы от обоих подходов: RGBa-код можно скопировать и всё ещё легче запоминать.
Их можно вставлять в CSS-код вместо хексов.
HSB-цвета
Существует также третья система кодирования цвета – HSB.
В ней цвет не делится на каналы, а формируется из трёх качеств:
Hue [хью], Saturation [сэтюрэйшн], Brightness [брайтнес].
1. Hue
— оттенок по цветовому кругу, который соответствует градусу. От 0° до 359°. Гораздо нагляднее эта шкала будет, если представить её в виде круга. Шкала начинается с красного. Бирюзовому оттенку, противоположному красному, соответствует угол 180. Увы, это неочевидно из шкалы оттенка:
2. Saturation
— насыщенность оттенка от 0 до 100.
Передаёт, насколько цвет едкий и интенсивный.
Цвет может быть бледным или концентрированным. Если у него вовсе отсутствует оттенок, значит, он монохромный и в шкале цветов будет прибит к левой границе. Чем больше насыщенность, тем ближе к правой. Чтобы менять насыщенность, нужно передвигать маячок по горизонтали.
3. Brightness
— яркость оттенка. В этой шкале чистый цвет смешивается с чёрным, постепенно становясь темнее.
Красный может стремиться к бордовому, и это значит, что в нём подмешано много чёрного, следовательно, понижена яркость. Напротив, чистый красный показывает отсутствие чёрного. Чтобы менять яркость, нужно передвигать маячок вертикально.
Шкала красного оттенка:
— образовательный телеграм-канал о продуктовом дизайне и инструментах для него, о карьере дизайнера и эмиграции. Опечатки и обратную связь → @okunev
Наверх