Нотация CSS · sRGB · прозрачность
Как работают цветовые коды HEX
Научитесь читать шесть знаков как пары красного, зелёного и синего, раскрывать трёхзначную запись, понимать восьмизначную альфу и проверять результат в реальном контексте.
цветовые коды HEX
Что означают цветовые коды HEX?
Цветовые коды HEX — это компактные инструкции sRGB. В #RRGGBB пара RR задаёт красный, GG — зелёный, BB — синий; каждая пара меняется от 00 до FF, то есть от 0 до 255 в десятичной системе. CSS также принимает сокращение #RGB, форму #RGBA с прозрачностью и #RRGGBBAA с полной парой альфа. Эти записи описывают числовые каналы, а не универсальное название краски, калиброванный вид или автоматическое соответствие доступности. Практический навык — правильно расшифровать цветовые коды HEX, сохранить точное значение и проверить его на том фоне и в том состоянии, где цвет будет показан.
Четыре правила, которые стоит запомнить
- цветовые коды HEX: шесть знаков образуют три пары красного, зелёного и синего в пространстве sRGB
- цветовые коды HEX: три знака раскрываются дублированием, поэтому #3A7 полностью равно #33AA77
- цветовые коды HEX: в четырёх- и восьмизначных формах альфа стоит последней; 00 прозрачно, а FF непрозрачно
- цветовые коды HEX: одно значение может выглядеть иначе на другом экране и фоне, поэтому нотация — лишь часть решения
Сравнение четырёх форм HEX в CSS
CSS Color Module Level 4 определяет четыре допустимые длины. Таблица разделяет порядок каналов, точность и прозрачность, чтобы похожие цветовые коды HEX не воспринимались как взаимозаменяемые строки.
| Форма | Порядок каналов | Пример | Эквивалент | Доступные состояния |
|---|---|---|---|---|
| #RGB · цветовые коды HEX | красный, зелёный, синий | #3A7 | #33AA77 | 4096 цветов |
| #RGBA · цветовые коды HEX | красный, зелёный, синий, альфа | #3A7C | #33AA77CC | 4096 цветов × 16 уровней альфа |
| #RRGGBB · цветовые коды HEX | красный, зелёный, синий | #33AA77 | rgb(51 170 119) | 16 777 216 цветов |
| #RRGGBBAA · цветовые коды HEX | красный, зелёный, синий, альфа | #33AA77CC | rgb(51 170 119 / 80%) | 16 777 216 цветов × 256 уровней альфа |
цветовые коды HEX: Читайте каждый канал как число по основанию 16
Шестнадцатеричная система использует шестнадцать символов: цифры от 0 до 9 и буквы от A до F для десятичных значений от 10 до 15. Два символа кодируют 16 × 16, то есть 256 состояний. В шестизначных цветовых кодах HEX первая пара относится к красному, вторая к зелёному, третья к синему. 00 — минимум, FF — максимум 255. В #2468AC красный равен 0x24 или 36, зелёный 0x68 или 104, синий 0xAC или 172. Запись rgb(36 104 172) описывает те же координаты sRGB.
Необязательно переводить каждую пару в уме, чтобы уверенно использовать цветовые коды HEX. Пара рядом с 00 означает слабый канал, рядом с FF — сильный; одинаковые пары, как в #777777, дают нейтральный серый, потому что красный, зелёный и синий равны. Точный перевод важен в коде, дизайн-токенах, расчёте контраста и передаче макета. Копируйте решётку и все шесть символов, приводите регистр к соглашению проекта и подтверждайте десятичные значения инструментом, а не пытайтесь восстановить каналы по приблизительному названию цвета.
цветовые коды HEX: Разберитесь в сокращении до уменьшения записи
Трёхзначные цветовые коды HEX — не шестизначные значения с произвольно отброшенной точностью: каждый символ дублируется. #F09 раскрывается в #FF0099, #ABC в #AABBCC, #123 в #112233. Сократить шесть знаков можно только тогда, когда оба символа в каждой из трёх пар совпадают. #33AA77 превращается в #3A7, а #32AA77 — нет. Отсюда разница точности: три знака дают 16 вариантов на канал и 16³, или 4096 цветов; шесть знаков дают 256 вариантов на канал и 256³, или 16 777 216 цветов.
Короткие цветовые коды HEX полезны, когда результат остаётся математически точным, но экономия трёх символов не оправдывает изменение фирменного или интерфейсного цвета. Храните шестизначный источник в библиотеке токенов, если сокращение не закреплено как явное правило команды. Регистр букв цвет не меняет: #00ff88 и #00FF88 равны. Единый стиль всё равно упрощает поиск и проверку изменений. При передаче важны решётка, допустимая длина, порядок пар и точные символы, а не предпочтение заглавных или строчных A–F.
цветовые коды HEX: Ставьте альфу после синего канала
Восьмизначные цветовые коды HEX следуют порядку #RRGGBBAA. Последняя пара — альфа: 00 означает полную прозрачность, FF полную непрозрачность, промежуточные значения — частичную непрозрачность. Например, #0000FFCC — синий с альфой CC, который пример W3C приравнивает к 80% непрозрачности. Четырёхзначная форма #RGBA раскрывается как трёхзначная, поэтому #05AC становится #0055AACC. Некоторые графические системы и старые API показывают упакованные байты в другом порядке; в современном CSS используйте порядок CSS и оставляйте альфу последней.
Прозрачность сама по себе не создаёт фиксированный видимый цвет. Полупрозрачные цветовые коды HEX компонуются с содержимым под ними, поэтому #00000080 выглядит разными оттенками серого на белом, жёлтом фоне или фотографии. Если внешний вид важен, храните значение переднего плана вместе с контекстом фона. Не удаляйте альфу только потому, что инструмент показал шестизначного соседа, и не добавляйте 80 в ожидании 80%: шестнадцатеричное 80 равно десятичному 128, примерно 50,2% от 255. Рассчитайте требуемую непрозрачность явно.
цветовые коды HEX: Отделяйте возможности HEX от его ограничений
Цветовые коды HEX в CSS напрямую задают sRGB. Они компактны и понятны, но не описывают широкую гамму Display P3, аппаратно-независимое значение Lab, печатную рецептуру CMYK или измеренный образец материала. Преобразование источника с широкой гаммой в шестизначные цветовые коды HEX может привести к отображению или обрезке цвета внутри sRGB. Снимок экрана, пипетка браузера и дизайн-файл способны различаться из-за профилей, возможностей дисплея и обработки экспорта. Сохраняйте исходное цветовое пространство, когда оно важно, и используйте HEX как формат передачи, если целью действительно является sRGB.
Совпадение чисел также не решает вопрос названия или доступности. Несколько названий могут описывать соседние цветовые коды HEX, а именованные цвета CSS — не полный словарь, а неравномерный исторический список. У отдельного значения нет коэффициента контрастности, пока его не сопоставят с другим отрисованным цветом. WCAG 2.2 сравнивает относительную яркость переднего плана и фона с учётом нужной альфа-композиции. Используйте определитель для описательных соседей, пипетку для локального пикселя и проверку контраста для реальной пары, не поручая одной нотации три разные задачи.
Проверка перед надёжной передачей HEX
Перед добавлением значения в CSS, палитру или токен проверьте и запись, и условия решения.
- цветовые коды HEX: убедитесь, что после решётки находится ровно 3, 4, 6 или 8 шестнадцатеричных знаков
- цветовые коды HEX: при точной проверке раскройте сокращение, чтобы все каналы были видны
- цветовые коды HEX: зафиксируйте намеренность альфа-пары и укажите фон, на котором выполнялась оценка
- цветовые коды HEX: сохраняйте sRGB как предполагаемое пространство и не называйте значение универсальным
- цветовые коды HEX: проверяйте контраст, название и внешний вид отдельным методом для каждой задачи
Используйте одно HEX-значение в три шага
Короткий процесс сохраняет прослеживаемость скопированного кода и разделяет расшифровку, описание и проверку.
цветовые коды HEX: 1. Расшифруйте и нормализуйте
цветовые коды HEX: вставьте полное значение, проверьте длину, раскройте сокращение при необходимости и сохраните альфу. До изменения канала подтвердите числовые значения RGB.
цветовые коды HEX: 2. Опишите или возьмите образец
цветовые коды HEX: используйте определитель названия для понятной подписи или пипетку изображения, если источник — локальный пиксель. Название является описательным соседом, а не официальной идентичностью.
цветовые коды HEX: 3. Проверьте реальную пару
цветовые коды HEX: поместите передний план на предполагаемый фон, учтите прозрачность и рассчитайте контраст. Сохраните оба значения, состояние использования и основание решения в токене или заметке.
Что устанавливают официальные источники
Публичные спецификации проверены 31 июля 2026 года. Числа описывают синтаксис и правила тестирования, но не обещают поисковое место или одинаковый вид.
- цветовые коды HEX: CSS Color Module Level 4 определяет 3, 4, 6 и 8 знаков, порядок каналов и указывает 4096 цветов для трёх знаков против примерно 17 миллионов для шести. Читать раздел W3C о HEX
- цветовые коды HEX: MDN документирует четыре синтаксиса, диапазон от 0 до FF, дублирование знаков, независимость от регистра и крайние значения альфа от прозрачного до непрозрачного. Читать справочник MDN <hex-color>
- цветовые коды HEX: Пояснение WCAG 2.2 приводит, в частности, 4,5:1 для обычного текста и 3:1 для крупного; одно изолированное значение не создаёт ни одного коэффициента. Читать руководство WCAG по контрасту
“The number of hex digits given determines how to decode the hex notation into an RGB color.”
Вопросы о цветовых кодах HEX
HEX и RGB дают разные цвета?
цветовые коды HEX: Нет, если координаты и пространство совпадают. Шестизначные цветовые коды HEX и rgb() выражают одни каналы sRGB: #33AA77 равно rgb(51 170 119). Меняется запись, а не задуманный цвет. Новые функции CSS могут задавать другие пространства, поэтому сначала уточните пространство и только потом ищите прямой шестизначный эквивалент.
В #RGBA прозрачность стоит первой или последней?
цветовые коды HEX: Последней. Четырёх- и восьмизначные цветовые коды HEX в CSS используют #RGBA и #RRGGBBAA, поэтому A следует после синего. #3A7C раскрывается в #33AA77CC. Другое ПО может показывать упакованное целое в ином порядке байтов; проверяйте значение из не-CSS API перед вставкой в таблицу стилей.
Почему одинаковые значения HEX выглядят по-разному?
цветовые коды HEX: Одинаковые цветовые коды HEX могут находиться среди разных цветов, компоноваться с разными фонами или выводиться экранами с разными профилями. Код фиксирует координаты sRGB и необязательную альфу, а не всю систему наблюдения. Сравнивайте в целевом интерфейсе и сохраняйте контекст.
Доказывает ли одно HEX-значение контраст WCAG?
цветовые коды HEX: Нет. Для коэффициента нужны как минимум передний план и фон, а также правильная композиция прозрачности и учёт состояний. Цветовые коды HEX дают входные данные, а результат получают сравнением относительной яркости. Проверяйте реальные пары для обычного, наведённого, отключённого и фокусного состояния.