Как компьютеры хранят цвета: RGB и HEX

Как экран создает цвета с помощью RGB

Экран смартфона, планшета или монитора состоит из миллионов крошечных точек, которые называют пикселями. Если рассмотреть дисплей под сильным микроскопом, станет видно, что каждый пиксель состоит из трёх отдельных светящихся зон — субпикселей. Один субпиксель светит красным светом, второй излучает зелёный, а третий даёт синий свет. Название системы RGB как раз складывается из первых букв английских слов Red, Green и Blue.

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

Почему числа меняются именно от 0 до 255

В памяти компьютера вся информация хранится в битах, которые могут принимать только два значения — ноль или единицу. Для хранения яркости каждого из трёх базовых цветов инженеры выделили ровно по одному байту памяти. Один байт состоит из восьми бит.

Если перебрать все возможные комбинации из восьми нулей и единиц, получится ровно двести пятьдесят шесть вариантов. Поскольку счёт в программировании всегда начинается с нуля, диапазон яркости каждого луча записывают числами от 0 до 255. Ноль означает полное отсутствие свечения канала, а 255 соответствует предельной яркости, на которую способен экран.

Чтобы узнать общее число доступных компьютеру оттенков в стандартной 24-битной палитре, нужно перемножить количество градаций каждого базового цвета. Мы умножаем 256 возможных вариантов красного на 256 вариантов зелёного и на 256 вариантов синего. В итоге получается шестнадцать миллионов семьсот семьдесят семь тысяч двести шестнадцать оттенков. Это число обычно называют палитрой TrueColor, и человеческий глаз не способен различить два соседних оттенка из такого огромного набора.

Зачем программисты придумали код HEX

Десятичная запись вида rgb(255, 128, 0) удобна для чтения человеком, однако веб-разработчикам и программистам требовался более короткий способ фиксации цвета в коде веб-страниц. Компьютерная память оперирует байтами, а каждый байт состоит из восьми бит. Восьмибитное число идеально делится на две половинки по четыре бита, которые называют полубайтами или нибблами.

Четыре бита могут кодировать ровно шестнадцать разных состояний, от 0000 до 1111 в двоичной системе. Для записи таких чисел используют шестнадцатеричную систему счисления, сокращённо называемую HEX от английского hexadecimal. В ней после привычных цифр от 0 до 9 используют буквы латинского алфавита: A обозначает число 10, B равно 11, C соответствует 12, D значит 13, E равно 14, а F обозначает 15.

Любое число от 0 до 255 ровно укладывается в два шестнадцатеричных знака. Число 0 записывается как 00, а максимальное значение 255 превращается в FF. Полный HEX-код цвета состоит из символа решётки и шести знаков, где первая пара отвечает за красный канал, вторая пара задаёт зелёный, а третья пара определяет синий.

Перевод значений из RGB в HEX

Чтобы перевести десятичное значение цвета в шестнадцатеричный вид, нужно разделить число на шестнадцать с остатком. Целая часть от деления даёт первую цифру HEX-кода, а остаток становится второй цифрой. Эту простую операцию повторяют по очереди для каждого из трёх цветовых каналов.

1. Берём значение красного цвета, например 186, и делим его на шестнадцать. Получаем целую часть 11 и остаток 10. Число 11 в шестнадцатеричной системе записывается буквой B, а число 10 записывается буквой A, поэтому красный байт равен BA.
2. Берём значение зелёного канала, например 85, и делим на шестнадцать. Получаем целую часть 5 и остаток 5, что даёт шестнадцатеричную пару 55.
3. Берём значение синего канала, например 211, и делим на шестнадцать. Получаем целую часть 13, соответствующую букве D, и остаток 3, что даёт пару D3.
4. Соединяем полученные пары вместе с символом решётки и получаем готовый цвет #BA55D3, который в веб-дизайне называют средне-орхидейным оттенком.

Обратный перевод из HEX в RGB

Обратная операция ещё проще и требует только умножения. Берём строку HEX, убираем символ решётки и разбиваем шесть символов на три пары. В каждой паре первый символ умножаем на шестнадцать, а затем прибавляем к результату числовое значение второго символа.

Что такое альфа-канал и форматы RGBA и HEX8

В современных интерфейсах элементам часто задают полупрозрачность. Для сохранения прозрачности видеокарте требуется четвёртый параметр, который программисты назвали альфа-каналом. Этот параметр занимает ещё один байт памяти, то есть дополнительные восемь бит.

В формате RGBA прозрачность записывают десятичной дробью от 0.0 до 1.0, где единица означает полную непрозрачность объекта. В шестнадцатеричном коде прозрачность дописывают в конец в виде четвёртой двухзначной пары, превращая шестизначный код в восьмизначный HEX8. Например, код #FF000080 задаёт чистый красный цвет с полупрозрачностью пятьдесят процентов, потому что шестнадцатеричное число 80 соответствует десятичному значению 128.