Hex-коды цветов: полное руководство

Если вы когда-либо открывали CSS-файл, дизайн-инструмент или брендовое руководство по стилю, вы видели hex-коды цветов: шестисимвольные строки вроде #3B82F6 или #FF5733, которые каким-то образом кодируют каждый цвет, который может отображать экран. Они выглядят как случайная последовательность букв и цифр, но за ними стоит точная система — и как только вы её поймёте, любой hex-код можно будет прочитать с первого взгляда.

Это руководство охватывает всё: от базовой структуры hex-кода до сокращённой нотации, прозрачности альфа-канала и практических техник конвертации.

Что означает «hex»?

Слово «hex» — сокращение от hexadecimal (шестнадцатеричная система) — системы счисления, использующей основание 16 вместо основания 10, привычного нам в повседневной жизни. В десятичной системе цифры идут от 0 до 9. В шестнадцатеричной системе цифры идут от 0 до 9, а затем продолжаются буквами от A до F, что даёт шестнадцать возможных значений на разряд.

Почему основание 16? Потому что оно точно соответствует компьютерной памяти. Один байт данных — 8 двоичных бит — может хранить значения от 0 до 255. В шестнадцатеричной системе тот же диапазон умещается ровно в двух разрядах: от 00 до FF. Эта компактность и стала причиной, по которой hex стал стандартом для задания цветов в вебе и дизайне.

Структура hex-кода цвета

Стандартный hex-код цвета имеет такую структуру:

# R R G G B B

Символ решётки (#) — это префикс, обозначающий «это цвет». После него идут три пары шестнадцатеричных цифр — по одной паре для каналов красного, зелёного и синего цветовой модели RGB. Каждая пара кодирует значение от 0 (00) до 255 (FF), управляя интенсивностью соответствующего канала.

Например, возьмём #3B82F6 — насыщенный средний синий:

Высокий синий канал и делает этот цвет синим. Умеренный зелёный сдвигает его немного в сторону голубого, а не чистого тёмно-синего. Низкий красный сохраняет прохладу.

Сравните с #FF5733 — коралловым красным:

Максимальный красный с умеренным зелёным даёт оранжево-красный. Мало синего — тон остаётся тёплым.

Как читать hex-код с первого взгляда

Вам не нужно конвертировать в десятичную систему, чтобы быстро понять hex-цвет. Несколько правил:

00 = нулевая интенсивность (этого канала нет) FF = полная интенсивность (максимум канала) 80 ≈ половина интенсивности (128 из 255)

Это позволяет приближённо декодировать hex-коды с первого взгляда:

• #FF0000 — полный красный, нет зелёного, нет синего → чистый красный
• #00FF00 — нет красного, полный зелёный, нет синего → чистый зелёный
• #0000FF — нет красного, нет зелёного, полный синий → чистый синий
• #FFFF00 — полный красный и зелёный, нет синего → жёлтый (красный + зелёный = жёлтый в свете)
• #FF00FF — полный красный и синий, нет зелёного → пурпурный
• #00FFFF — полный зелёный и синий, нет красного → голубой
• #FFFFFF — все каналы на максимуме → белый
• #000000 — все каналы на нуле → чёрный
• #808080 — все каналы наполовину → средний серый

Когда первые два разряда высокие, а остальные ниже, цвет тяготеет к красному. Высокие средние два разряда смещают к зелёному. Высокие последние два — к синему или фиолетовому.

Определение светлого vs тёмного

Если все три пары имеют высокие шестнадцатеричные значения (C, D, E, F), цвет будет светлым. Если все три низкие (0, 1, 2, 3) — тёмным. Равные значения во всех трёх каналах всегда дают нейтральный серый (или чёрный и белый на крайних значениях).

• #F0E6D3 — все значения высокие → светлый тёплый бежевый
• #1A1A2E — все значения низкие → очень тёмный тёмно-синий
• #A0A0A0 — равные средние значения → средний серый

Сокращённая hex-нотация

CSS позволяет использовать трёхсимвольное сокращение, когда каждая пара шестнадцатеричных цифр состоит из одного повторённого символа. Например, #AABBCC можно записать как #ABC. Каждая цифра в сокращении просто удваивается для получения полной шестисимвольной версии.

Это сокращение работает только тогда, когда каждая пара является повторяющимся символом. #3B82F6 нельзя сократить, потому что 3B, 82 и F6 — не повторяющиеся пары. Но #336699 можно сократить до #369.

Когда использовать сокращение

Сокращённый hex — это допустимая функция CSS, которая будет отображаться идентично полной версии. Используйте её свободно, когда код поддерживает это. Однако многие дизайн-инструменты и брендовые руководства по стилю используют полный шестисимвольный формат для ясности и согласованности — сразу понятно, что представляет собой каждое значение канала, без мысленного разворачивания.

Hex с альфа-каналом: восьмисимвольные hex-коды

Стандартный шестисимвольный hex-код не включает информацию о прозрачности. Для добавления альфа-канала (непрозрачности) CSS поддерживает восьмисимвольный hex-формат, где последние два символа задают прозрачность.

Альфа-канал следует тому же диапазону 0–255, кодируемому как hex-пара:

Например, чтобы использовать синий #3B82F6 с 50% непрозрачностью: #3B82F680.

Для тёмного перекрытия #000000 с 70% непрозрачностью: #000000B3.

Четырёхсимвольное сокращение с альфа

Так же, как #RGB является сокращением для #RRGGBB, существует сокращение #RGBA для #RRGGBBAA. Каждая цифра удваивается:

• #F00F = #FF0000FF (чистый красный, полностью непрозрачный)
• #0008 = #00000088 (чёрный при ~53% непрозрачности)
• #FFF0 = #FFFFFF00 (полностью прозрачный белый)

Альтернативы hex-альфа

До широкой поддержки восьмисимвольного hex, стандартным способом добавления прозрачности была функция rgba():

/* Эти записи эквивалентны */
background-color: #3B82F680;
background-color: rgba(59, 130, 246, 0.5);

Обе формы сейчас хорошо поддерживаются в современных браузерах. Форма rgba() часто более читаема, поскольку непрозрачность выражена как человекочитаемое десятичное число (от 0 до 1), а не hex-пара, требующая мысленного преобразования.

Конвертация hex в другие форматы

Hex-коды описывают те же RGB-цвета, что и нотация rgb() — просто в более компактном представлении. Конвертация между ними проста.

Hex в RGB

Для каждой пары hex-цифр конвертируйте из шестнадцатеричного в десятичное:

• #FF5733 → Красный: FF = 255, Зелёный: 57 = 87, Синий: 33 = 51
• CSS: rgb(255, 87, 51)

Hex в HSL

Эта конвертация сложнее. HSL (оттенок, насыщенность, светлота) — перцептивно интуитивный формат, где оттенок выражается как градус на цветовом колесе, а насыщенность и светлота — как проценты. Конвертер цветов обрабатывает это мгновенно — введите любой hex-код и получите RGB, HSL, CMYK и OKLCH эквиваленты одновременно.

Hex в OKLCH

OKLCH — наиболее современный формат цвета в CSS, разработанный для перцептивной равномерности. Он отлично подходит для программной работы с цветом — равные числовые шаги в OKLCH соответствуют равным воспринимаемым различиям. Конвертер цветов включает вывод OKLCH для любого введённого hex-кода.

Распространённые примеры конвертации

Hex в CSS: практическое применение

Hex-коды работают везде в CSS, где принимается значение цвета:

/* Цвет текста */
color: #1A1A2E;

/* Фон */
background-color: #F0E6D3;

/* Рамка */
border: 2px solid #3B82F6;

/* Тень блока */
box-shadow: 0 4px 12px #0000001A; /* чёрный при ~10% непрозрачности */

/* С CSS-переменными */
:root {
  --brand-primary: #3B82F6;
  --brand-dark: #1D4ED8;
}

Регистронезависимость

Hex-коды цветов в CSS нечувствительны к регистру. #3B82F6, #3b82f6 и #3B82f6 обозначают один и тот же цвет. Большинство руководств по стилю стандартизируются на все-заглавные или все-строчные буквы для единообразия. Заглавные — традиционный выбор; строчные популярны в современных кодовых базах, и многие линтеры предпочитают их.

Как находить hex-коды

Дизайн-инструменты. Figma, Sketch и Adobe XD отображают hex-коды в панелях выбора цвета. Любой цветовой образец в этих инструментах можно скопировать как hex.

Браузерные DevTools. Щёлкните правой кнопкой мыши на любом элементе веб-страницы и проверьте его. Панель CSS показывает вычисленные значения цветов, которые можно щёлкнуть для переключения между форматами, включая hex.

Страницы цветов ColorFYI. Каждая страница с подробностями о цвете на ColorFYI — например, /color/3B82F6/ — отображает полный hex-код вместе с RGB, HSL, CMYK и OKLCH значениями, а также именем цвета, если оно есть.

Конвертер цветов. Если у вас есть цвет в RGB или HSL и нужен hex-эквивалент, вставьте его в Конвертер цветов для мгновенного перевода.

Ключевые выводы

• Hex-код цвета — это шестисимвольное шестнадцатеричное число, где первые два символа кодируют красный канал, средние два — зелёный, и последние два — синий.
• Каждая пара канала варьируется от 00 (нулевая интенсивность) до FF (255 интенсивность), соответствуя полному диапазону 0–255 модели RGB.
• Высокие шестнадцатеричные цифры означают высокую интенсивность канала; низкие — низкую. Равные значения во всех трёх каналах дают нейтральные цвета (чёрный, серый, белый).
• Трёхсимвольное сокращение (#RGB) действительно, когда каждая пара повторяет один и тот же символ — #336699 становится #369.
• Восьмисимвольный hex (#RRGGBBAA) добавляет альфа-канал прозрачности; последние два символа варьируются от 00 (прозрачный) до FF (непрозрачный).
• Используйте Конвертер цветов для мгновенного перевода любого hex-кода в RGB, HSL, CMYK или OKLCH.
• Hex-коды в CSS нечувствительны к регистру. Стандартизируйтесь на одном соглашении (все заглавные или все строчные) для единообразия.