Обозначения цветов в веб-дизайне: HEX, RGB, HSL и named

Обозначение цвета в вебе — это способ записать оттенок в коде так, чтобы браузер его понял. В CSS один и тот же цвет можно задать несколькими равнозначными записями: шестнадцатеричной (HEX), по каналам RGB, по тону и светлоте HSL или по имени. Браузер приводит любую из них к внутреннему представлению и рисует одинаковый пиксель.

Ниже разберем все основные записи цвета для веб-страниц: HEX и его короткую форму, RGB и RGBA, HSL, именованные цвета и ключевые слова, а также прозрачность и современные записи вроде oklch. Покажем один и тот же цвет во всех формах и прогоним конвертацию кодом с реальным выводом.

Какие записи цвета есть в CSS

Все перечисленные ниже способы взаимозаменяемы: где в CSS ждут цвет (color, background, border и другие свойства), можно подставить любую запись. Различаются они удобством для человека и наличием альфа-канала (прозрачности).

Дальше пройдем по каждой записи отдельно.

HEX: шестнадцатеричная запись

HEX-код задает цвет тремя парами шестнадцатеричных цифр в порядке красный-зеленый-синий: #RRGGBB. Каждая пара — это байт от 00 до FF, то есть значение канала от 0 до 255 в десятичной системе. Цифры 10-15 записывают буквами A-F, регистр не важен: #FF7A00 и #ff7a00 — один цвет.

Крайние случаи запоминаются легко: #000000 — черный (все каналы в нуле), #FFFFFF — белый (все в максимуме), #FF0000 — чистый красный.

Есть короткая форма #RGB из трех цифр: каждая цифра дублируется. Так #F2A разворачивается в #FF22AA, а #0AF — в #00AAFF. Короткая запись покрывает только цвета, у которых пары состоят из одинаковых цифр, поэтому #17A2B8 сократить нельзя.

Прозрачность добавляют четвертой парой — #RRGGBBAA. Например, #FF000080 — красный примерно на 50% непрозрачности (80 в шестнадцатеричной это 128 из 255). Есть и короткая форма с альфой — #RGBA, где #F008 равнозначно #FF000088. Восьмизначный HEX понимают все актуальные браузеры.

RGB и RGBA: значения по каналам

Запись rgb() задает те же три канала напрямую числами от 0 до 255: rgb(255 122 0). Это удобно, когда цвет вычисляется в коде — каналами проще управлять арифметикой, чем строкой HEX.

Современный синтаксис CSS разделяет каналы пробелами, а альфу пишет после слэша: rgb(255 0 0 / 50%) или rgb(255 0 0 / 0.5). Старый синтаксис с запятыми тоже работает: rgba(255, 0, 0, 0.5). Сегодня rgb() и rgba() — синонимы, оба принимают альфу, отдельная функция rgba() осталась для совместимости.

Значения каналов можно писать и в процентах: rgb(100% 0% 0%) это тот же красный, что rgb(255 0 0).

HSL: тон, насыщенность, светлота

HSL описывает цвет тремя понятными человеку параметрами: тон (hue) — угол на цветовом круге от 0 до 360 градусов, насыщенность (saturation) в процентах и светлота (lightness) в процентах. Красный — это hsl(0 100% 50%), зеленый — hsl(120 100% 50%), синий — hsl(240 100% 50%).

Главное преимущество HSL — легко получать варианты одного цвета. Меняете только светлоту, и тон остается тем же: hsl(210 90% 30%) темнее, а hsl(210 90% 70%) светлее одного и того же синего. В HEX или RGB это потребовало бы пересчета всех каналов.

Прозрачность добавляют так же, как в RGB: hsl(210 90% 50% / 0.4). Функция hsla() осталась синонимом hsl().

Не путайте HSL с HSV (он же HSB) из графических редакторов. У них третий параметр разный: в HSL это светлота (0% всегда черный, 100% всегда белый), а в HSV/HSB — яркость (value/brightness), поэтому одни и те же числа в Photoshop и в CSS дадут разные цвета. В CSS доступен именно HSL.

Именованные цвета и ключевые слова

CSS понимает набор именованных цветов на английском: red, green, blue, а также экзотику вроде coral, khaki, chocolate, teal. Всего таких имен около 148. Имена читаемы, но их палитра фиксирована и точный оттенок под макет ими обычно не подобрать, поэтому в продакшене чаще берут HEX или переменные.

У имен есть минусы: их нужно помнить по-английски, опечатка молча игнорируется (браузер применит цвет по умолчанию или унаследованный), а сокращать имя нельзя. Для базовой отладки они удобны, для системной палитры — нет.

Отдельно стоят два ключевых слова. transparent — полностью прозрачный цвет (равнозначен rgb(0 0 0 / 0)). currentColor подставляет текущее значение свойства color элемента — удобно, чтобы, например, рамка или иконка автоматически совпадали с цветом текста.

Один цвет в разных записях

Записи взаимозаменяемы, и полезно уметь переводить между ними. Чистый красный выглядит так во всех формах: #F00 = #FF0000 = rgb(255 0 0) = hsl(0 100% 50%) = red. Цепочка перевода всегда одна: HEX пара -> число канала 0-255 -> при желании тон/светлота HSL.

Проверим это кодом. Функция разворачивает короткий HEX, читает каналы и пересчитывает их в HSL (стандартный модуль colorsys в Python использует порядок HLS, учтем это):

import colorsys

def hex_to_rgb(h):
    h = h.lstrip('#')
    if len(h) == 3:                       # короткая форма #RGB -> #RRGGBB
        h = ''.join(c * 2 for c in h)
    r, g, b = (int(h[i:i+2], 16) for i in (0, 2, 4))
    return r, g, b

def rgb_to_hsl(r, g, b):
    h, l, s = colorsys.rgb_to_hls(r / 255, g / 255, b / 255)   # colorsys: порядок HLS
    return round(h * 360), round(s * 100), round(l * 100)

palette = [
    ("красный",   "#F00"),
    ("оранжевый", "#FF7A00"),
    ("бирюзовый", "#17A2B8"),
]

for name, code in palette:
    r, g, b = hex_to_rgb(code)
    h, s, l = rgb_to_hsl(r, g, b)
    print(f"{name}: {code} -> rgb({r}, {g}, {b}) -> hsl({h}, {s}%, {l}%)")

Вывод программы:

красный: #F00 -> rgb(255, 0, 0) -> hsl(0, 100%, 50%)
оранжевый: #FF7A00 -> rgb(255, 122, 0) -> hsl(29, 100%, 50%)
бирюзовый: #17A2B8 -> rgb(23, 162, 184) -> hsl(188, 78%, 41%)

Видно, как #F00 разворачивается в rgb(255, 0, 0), а тот же красный в HSL — это hsl(0, 100%, 50%). Вручную это считать не нужно: значения дают палитра графического редактора, инструмент выбора цвета в браузере (DevTools) или онлайн-конвертеры.

Современные записи цвета

CSS Color 4 добавил записи, которые работают ровнее по человеческому восприятию. Основные — hwb() (тон-белизна-чернота), а также oklch() и oklab(). Их особенность в том, что равные шаги параметров дают равномерные на глаз изменения цвета, чего не гарантируют HSL и RGB. Это удобно для генерации палитр и плавных градиентов.

Пример: oklch(60% 0.15 200) задает цвет через светлоту, насыщенность (chroma) и тон. Эти записи, а также lab(), lch() и функция color() для других пространств (например, широкого охвата P3) поддержаны в актуальных версиях всех основных браузеров. Точные минимальные версии зависят от конкретной записи и целевой доли старых браузеров.

Отдельно про исторический термин «безопасные веб-цвета» (web-safe): это набор из 216 оттенков, где каналы кратны шагам 00 33 66 99 CC FF. Он был нужен для дисплеев 1990-х с палитрой в 256 цветов. На современных экранах с 24-битным цветом ограничение неактуально, и специально держаться этих 216 цветов не нужно.

Как выбрать запись

Единственно правильной записи нет — выбор зависит от задачи. Ориентир такой:

• HEX — для фиксированных цветов из макета и брендбука, когда значение копируется из редактора и не меняется.
• RGB — когда цвет считается или собирается в коде (JavaScript, генерация тем), где числами каналов управлять проще.
• HSL — когда нужны оттенки одного тона: светлее, темнее, менее насыщенный вариант той же основы.
• Именованные — для быстрых набросков и отладки, не для системной палитры.
• oklch / oklab — когда важны ровные по восприятию палитры и градиенты.
• transparent / currentColor — для прозрачности и привязки к цвету текста.

На практике конкретные значения почти всегда выносят в CSS-переменные (--brand: #17A2B8;) и ссылаются на переменную. Тогда сменить цвет во всем проекте можно в одном месте, а какая именно запись внутри — вопрос удобства команды.

Выводы

• Обозначение цвета в вебе — это запись оттенка в CSS; HEX, RGB, HSL, имя и oklch взаимозаменяемы и дают один пиксель.
• HEX задает каналы парами 00—FF (есть короткие формы #RGB/#RGBA и альфа в #RRGGBBAA); RGB — те же каналы числами 0-255.
• HSL описывает цвет тоном, насыщенностью и светлотой — удобно получать оттенки одной основы; это не HSV из графических редакторов.
• Именованных цветов около 148; transparent и currentColor — ключевые слова для прозрачности и наследования цвета текста.
• «Безопасные веб-цвета» — устаревший набор из 216 оттенков; на 24-битных экранах он не нужен.

Где применяется

Запись цвета — это база верстки: любой фон, текст, рамка и градиент на странице задаются одним из этих способов, а системная палитра проекта обычно живет в CSS-переменных. Понимание того, как связаны HEX, RGB и HSL и когда какая запись удобнее, экономит время при поддержке и смене темы.

Смежные темы: Параллакс в дизайне: описание и его особенности.

FAQ

Какая запись цвета быстрее работает в браузере? Разницы в производительности нет: браузер приводит любую запись к одному внутреннему представлению еще при разборе стилей. Выбор записи — вопрос удобства для человека, а не скорости.

Можно ли задать прозрачность в HEX? Да, восьмизначной формой #RRGGBBAA: последняя пара — альфа от 00 (полностью прозрачный) до FF (непрозрачный). Есть и короткая форма #RGBA. Все актуальные браузеры это понимают.

Что будет, если ошибиться в имени цвета или коде? Некорректное значение цвета CSS просто игнорирует: свойство не применяется, элемент получит унаследованный или дефолтный цвет. Ошибку не подсветит — поэтому имена цветов легко «теряются» из-за опечатки.