Как читать шестизначный HEX-код цвета

Сначала разделите #RRGGBB на три пары

Временно отбросьте решётку и сгруппируйте шесть знаков слева направо: RR, GG и BB. Первая пара управляет красным каналом sRGB, вторая — зелёным, третья — синим. Каждая пара занимает один байт, поэтому её десятичное значение лежит в диапазоне от 0 до 255.

#4F46E5
  4F  → красный
  46  → зелёный
  E5  → синий

Как прочитать одну шестнадцатеричную пару

В шестнадцатеричной системе шестнадцать знаков вместо десяти. Цифры от 0 до 9 сохраняют обычные значения, а A, B, C, D, E и F обозначают числа от 10 до 15. Регистр букв не влияет на результат: ff, Ff и FF означают одно число.

• Левый знак считает группы по шестнадцать.
• Правый знак считает отдельные единицы.
• Умножьте значение слева на 16 и прибавьте значение справа.
• 00 равно 0; FF равно 15 × 16 + 15, то есть 255.

4F = 4 × 16 + 15 = 79
46 = 4 × 16 + 6  = 70
E5 = 14 × 16 + 5 = 229

Разбираем #4F46E5 от начала до конца

Выполните расчёт отдельно для каждой пары. Красный канал 4F равен 79. Зелёный 46 равен 70. Синий E5 равен 229. Значит, тот же цвет CSS можно записать как rgb(79 70 229). Синий канал заметно больше двух остальных, что помогает понять сине-фиолетовое направление именно этого цвета.

.sample {
  color: #4F46E5;
  background-color: rgb(79 70 229);
}

Размер каналов даёт полезную подсказку, но не описывает восприятие полностью. Значения sRGB закодированы и не являются линейными измерениями света, экраны отличаются, соседние цвета меняют восприятие, а видимая яркость не равна среднему арифметическому R, G и B.

Полезные закономерности без полного расчёта

Некоторые сочетания каналов легко узнаются сразу. Пара около 00 почти не добавляет соответствующий канал, а пара около FF добавляет его много. Равные пары красного, зелёного и синего дают ахроматический серый sRGB. Два больших канала и один маленький часто указывают на знакомое вторичное направление, но точный вид всё равно определяется всеми тремя значениями.

• У #000000 все каналы равны 0 — это чёрный.
• У #FFFFFF все каналы равны 255 — это белый.
• У #808080 три равных канала — это серый на середине шкалы кодов.
• #FF0000, #00FF00 и #0000FF максимально усиливают один канал sRGB.
• #FFFF00 сочетает максимальные красный и зелёный без синего.

Когда трёхзначное сокращение является точным

CSS принимает и трёхзначный HEX. При этом к пропущенному знаку не добавляется ноль. Каждый знак дублируется: #4AE раскрывается в #44AAEE. Сокращение точно только тогда, когда каждая пара шестизначного значения состоит из двух одинаковых знаков.

• #FFFFFF можно сократить до #FFF.
• #00FF00 можно сократить до #0F0.
• #44AAEE можно сократить до #4AE.
• #4F46E5 нельзя сократить, потому что пары 4F, 46 и E5 не повторяются.

Три знака могут выразить 16 × 16 × 16, то есть 4096 цветов. Шесть знаков выражают 256 × 256 × 256, то есть 16 777 216 сочетаний каналов. Поэтому короткая запись — компактная форма для подмножества, а не округление любого цвета.

Как читать восьмизначный HEX с альфа-каналом

Восьмизначный HEX в CSS имеет порядок #RRGGBBAA. Первые шесть знаков читаются как обычно, а последняя пара AA управляет альфа-каналом. 00 означает полную прозрачность, FF — полную непрозрачность. Например, 80 равно 128 из 255, то есть примерно 50,2% непрозрачности.

.overlay {
  /* Те же каналы sRGB и около 50% alpha */
  background: #4F46E580;
  background: rgb(79 70 229 / 50.2%);
}

Надёжный чек-лист проверки

• Убедитесь, что значение начинается с # и содержит ровно 3, 4, 6 или 8 шестнадцатеричных знаков для CSS.
• Шесть знаков сначала разделите на RR, GG и BB.
• Переводите пару по формуле: левый знак × 16 + правый; A–F означают 10–15.
• Считайте регистр букв только оформлением.
• Раскрывайте сокращение дублированием каждого знака, а не добавлением нулей.
• В восьмизначной записи читайте последнюю пару как альфа-канал после RGB.
• Для доступности рассчитывайте яркость и контраст, а не делайте вывод по размеру каналов.

Color Atlas выполняет эти преобразования детерминированно из проверенного канонического HEX. На странице цвета можно проверить RGB, HSL, HWB, варианты прозрачности, относительную яркость, контраст и связанные значения, не подменяя исходные данные сгенерированными фактами.