HEX-коды цветов: как устроен #RRGGBB

Как устроен HEX-код

Любой цвет на экране смешан из красного, зелёного и синего света. HEX-код записывает силу каждого из них двумя символами после знака #: сначала красный, потом зелёный, потом синий. Отсюда шаблон #RRGGBB.

Символы шестнадцатеричные, то есть счёт идёт шестнадцатью цифрами: от 0 до 9, дальше a (10), b (11), c (12), d (13), e (14) и f (15). Одна пара вмещает 256 значений, от 00 (0) до ff (255), ровно как в rgb().

Чтобы перевести пару в обычное число, умножьте первую цифру на 16 и прибавьте вторую. Ниже цвет #1e90ff, он же dodgerblue в CSS: сначала в четырёх форматах, потом разобранный по парам.

Получается rgb(30, 144, 255): немного красного, заметная доля зелёного и синий на максимуме, в сумме яркий небесно-голубой. Три пары по 256 значений дают 16 777 216 возможных цветов.

Короткая запись из трёх и четырёх цифр

Если обе цифры в каждой паре совпадают, пару можно написать одной цифрой. #ffcc00 превращается в #fc0, а браузер сам удвоит каждую цифру обратно. У #1e90ff короткой формы нет: 1e и 90 не состоят из одинаковых цифр.

Короткой записью можно выразить всего 4096 цветов из 16,7 миллиона. Вариант из четырёх цифр так же добавляет прозрачность: #f008 означает #ff000088.

Прозрачность в HEX: восьмизначный код

Восьмизначный код добавляет четвёртую пару для альфа-канала, то есть непрозрачности: #RRGGBBAA. 00 означает полностью прозрачный цвет, ff полностью плотный. Все актуальные браузеры понимают такую запись в CSS, как и короткую форму #RGBA.

Чтобы получить пару, умножьте непрозрачность на 255, округлите до целого и переведите в HEX. Для 50% выходит 127,5, после округления 128, в HEX это 80. Вот полная таблица на примере #1e90ff.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

Здесь два подвоха. Во-первых, 80 это 128 из 255, то есть 50,2%, а не ровно 50%: у альфы в HEX всего 256 ступеней, поэтому круглые проценты почти всегда приблизительны. Во-вторых, Android ставит альфу в начало. В цветовом ресурсе Android #801e90ff означает то же, что #1e90ff80 в CSS.

Как прочитать HEX-код на глаз

Угадать цвет можно без всяких конвертеров. Смотрите на первую цифру каждой пары: в ней почти вся информация.

• Самая большая первая цифра показывает, какой свет главный. В #d2691e у красного d, у зелёного 6, у синего 1, значит это оранжево-коричневый.
• Два высоких канала смешиваются: красный с зелёным дают жёлтый, зелёный с синим голубой, красный с синим пурпурный или фиолетовый.
• Три одинаковые пары дают серый. #333333 тёмно-серый, #999999 светло-серый. Почти одинаковые пары, как в #708090, дают приглушённый сероватый цвет.
• Высокие цифры в целом означают светлый цвет, низкие тёмный. Если все три пары не ниже c0, цвет бледный. Если все три не выше 30, цвет очень тёмный.
• Зелёный при том же числе выглядит гораздо светлее синего. У #00ff00 светлота OKLCH 0.866, у #0000ff всего 0.452.

Почему #808080 не средний серый

#808080 стоит ровно посередине по числам: 128 из 255 в каждом канале. Но на глаз он не находится посередине между чёрным и белым. Его светлота в OKLCH равна 0.600, то есть он выглядит пройденным на 60% пути к белому.

Значения HEX уже закодированы кривой sRGB, которая похожа на восприятие, но не совпадает с ним. #808080 излучает около 21,6% света белого, а перцептивные модели ставят зрительную середину ниже: OKLCH на #636363, CIELAB на #777777.

Для текста это важно. Серый #808080 на белом даёт 3.95:1 и не проходит WCAG AA для основного текста. #767676 это самый светлый серый, который проходит 4.5:1, а #777777, всего на ступень светлее, уже не проходит с 4.48:1.

Заглавные или строчные, с решёткой или без

Регистр в HEX-кодах не важен. #1E90FF, #1e90ff и #1E90ff это один и тот же цвет в CSS, SVG и графических редакторах. Выберите один стиль и держитесь его везде, тогда поиск по коду найдёт все места. В CSS чаще пишут строчными.

Знак # относится к синтаксису CSS, а не к самому цвету. Figma и многие редакторы показывают код без него, а языки программирования часто записывают цвет числом с префиксом 0x. Например, во Flutter Color(0xFF1E90FF) начинается с пары альфы.

Как узнать HEX-код цвета на экране

Нужна пипетка: инструмент, который считывает цвет под курсором и показывает его код. Все варианты ниже бесплатные, большинство уже есть на компьютере.

• Chrome и Edge: откройте DevTools клавишей F12, нажмите на любой цветной квадратик в панели Styles и возьмите цвет со страницы значком пипетки.
• PickShade: у палитры на главной есть кнопка пипетки, в Chrome и Edge она берёт цвет из любого места экрана.
• Windows: установите Microsoft PowerToys и нажмите Win + Shift + C, откроется Color Picker.
• macOS: откройте «Цифровой колориметр» в папке «Утилиты». Переключите его на sRGB и выберите в меню «Вид» отображение значений в шестнадцатеричном виде.
• Figma, Photoshop и большинство редакторов: пипетка вызывается клавишей I.
• Фото или скриншот: откройте его в инструменте для изображений и нажмите на любой пиксель. Картинка никуда не загружается.

Снятое пипеткой значение может отличаться от исходного на несколько единиц: экран применяет цветовой профиль, а картинки сжимаются. Если нужен точный цвет, берите его из макета или CSS, а не со скриншота.

Вопросы и ответы