Кодирование цветов: HEX, RGBa, HSB
Кодирование цветов: HEX, RGBa, HSB

Кодирование цветов: HEX, RGBa, HSB

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

HEX: Шестнадцатиричные цвета

Любой цвет, который виден на экране в рамках цветовой системы RGB (Red, Green, Blue), может быть передан при помощи комбинации трёх цветовых каналов: красного, зелёного и синего. Хекс-коды состоят из трёх пар символов, каждая из которых отвечает за один из этих каналов. Используется шестнадцатиричное исчисление: 0 1 2 3 4 5 6 7 8 9 A B C D E F

00 – минимальное значение канала, а FF — максимальное.

#000000 — отсутствие цвета по всем трём каналам, чёрный

#FFFFFF — максимум по всем каналам, белый

#FF0000 — максимум по красному каналу, ярко-красный

#00FF00 — максимум по зелёному, ярко-зелёный

#0000FF — максимум по синему каналу

Если по всем трём каналам стоит равное значение, например, #808080, цвет будет монохромным, то есть не будет иметь оттенка. Это происходит, потому что каналы друг друга компенсируют.

Хекс-коды — это основной стандарт кодирования цветов в вебе. Их плюс в том, что их удобно копировать и передавать.

image

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 в рамках этой статьи мы говорить не будем.

Плюс такой системы, что такие коды более запоминаемы и их удобно диктовать на слух.

image

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 [брайтнес].

image

1. Hue

— оттенок по цветовому кругу, который соответствует градусу. От 0° до 359°. Гораздо нагляднее эта шкала будет, если представить её в виде круга. Шкала начинается с красного. Бирюзовому оттенку, противоположному красному, соответствует угол 180. Увы, это неочевидно из шкалы оттенка:

image

2. Saturation

— насыщенность оттенка от 0 до 100.

Передаёт, насколько цвет едкий и интенсивный.

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

3. Brightness

— яркость оттенка. В этой шкале чистый цвет смешивается с чёрным, постепенно становясь темнее.

Красный может стремиться к бордовому, и это значит, что в нём подмешано много чёрного, следовательно, понижена яркость. Напротив, чистый красный показывает отсутствие чёрного. Чтобы менять яркость, нужно передвигать маячок вертикально.

Шкала красного оттенка:

image

Наверх: