Цвета

Цвет на экранах

Большинство дисплеев строят цвета смешением красного, зелёного и синего света. В обычной модели 8 бит на канал каждый канал лежит в диапазоне 0–255, давая 256³ ≈ 16,7 млн возможных цветов. Две популярные записи одной и той же тройки доминируют в вебе: функциональная нотация RGB и шестнадцатеричные коды.

Преобразуйте hex-значение в десятичные каналы инструментом hex в RGB.

RGB-тройки

В CSS rgb(34, 139, 34) означает красный=34, зелёный=139, синий=34—лесной зелёный. Современный CSS также допускает rgb(34 139 34 / 0.8) с компонентой альфа (непрозрачность). Альфа не входит в классический шестизначный hex без расширения; см. восьмизначный hex ниже.

RGB-значения в повседневном CSS привязаны к устройству: они описывают сигналы в пайплайн дисплея, а не гарантированное совпадение с печатью. Для критичной печати бренда дизайнеры используют ICC-профили и другие цветоуправляемые процессы.

Hex-кодирование

Hex-цвет записывает каждый канал двумя шестнадцатеричными цифрами. Цифры hex идут 0–9 затем A–F (без учёта регистра), представляя 0–15. Две цифры дают 0–255, потому что 16×16 = 256.

Пример: #228B22

• 22 hex → 2×16 + 2 = 34 десятичных (красный)
• 8B hex → 8×16 + 11 = 139 десятичных (зелёный)
• 22 hex → 34 десятичных (синий)

Итак #228B22 равно rgb(34, 139, 34).

Ведущий # принят в HTML/CSS. Некоторые системы опускают его; другие требуют.

Короткая форма hex

CSS допускает трёхзначный hex #rgb как сокращение, где каждая цифра дублируется: #2A8 раскрывается в #22AA88. Удобно для грубых цветов и design token, но не выражает каждую 8-битную тройку—только каналы, кратные 17 (0x00, 0x11, …, 0xFF).

Альфа в hex

Восьмизначный hex #RRGGBBAA добавляет канал альфа. #228B2280 — примерно 50 % непрозрачности в зависимости от интерпретации шкалы (0x80 / 255 ≈ 0,502). Поддержка в современных браузерах крепкая; для старых сред предпочитайте rgba() / современный rgb() с альфой.

Четырёхзначный короткий hex #rgba раскрывается аналогично дублированием цифр.

Перевод hex → RGB вручную

1. Убрать #.
2. Если длина 3 или 4 — раскрыть цифры.
3. Разбить на пары.
4. Разобрать каждую пару как base-16.
5. Опционально перевести пару альфы в float 0–1 делением на 255.

Перевод RGB → hex

1. Ограничить каналы целыми 0–255.
2. Преобразовать каждый в две hex-цифры (дополнить ведущим нулём при необходимости).
3. Склеить после #.

Округление появляется при конверсии из форматов с более широким гамутом или десятичными каналами—решите, округлять или усекать, и будьте последовательны.

HSL и другие модели

Дизайнеры часто думают в HSL (тон, насыщенность, светлота), потому что править оттенок естественно. Компьютеры по-прежнему растеризуют в RGB для типичных дисплеев. Конверсия HSL↔RGB без потерь для CSS-гамута при аккуратной реализации, но промежуточное округление может дрейфовать после многих round-trip.

Другие модели (CIELAB, OKLCH, Display P3) появляются в современном CSS ради перцептивной равномерности или более широких гамутов. Hex и sRGB остаются lingua franca design token и старых спецификаций.

Доступность: контраст важнее кодов

Пишете ли вы #333333 или rgb(51,51,51), вопрос читаемости — контраст с фоном. Соотношения WCAG сравнивают относительные яркости. Красивые hex без проверки контраста оставляют текст трудночитаемым. Сочетайте цветовые инструменты с проверкой контраста при настройке основного текста и UI-chrome.

Дизайн-системы и токены

Команды хранят цвета бренда как именованные токены (--color-brand-600: #228B22), чтобы компоненты не хардкодили случайные hex. Документируйте и hex, и RGB, если платформы требуют разные API (нативный мобильный часто хочет float-каналы 0–1).

Держите один источник истины; генерируйте остальные форматы. Параллельные списки, ведомые вручную, расходятся.

Частые ошибки

• Путать правила раскрытия #RGB.
• Забывать, что 100% в современном CSS RGB — не тот же синтаксис, что целые 0–255.
• Считать, что экранный hex совпадает с печатным pantone без управления цветом.
• Использовать чистый #000000 на #111111 для «тонкого» текста—контраст может провалиться на мелком кегле.
• Парсить hex regex’ом, допускающим нечётные длины без валидации.

Программные советы

• Нормализуйте hex к верхнему или нижнему регистру в кодовой базе для стабильности diff.
• Валидируйте строгим шаблоном: ^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$ (подправьте, если короткие формы запрещены).
• При интерполяции анимаций переводите в линейное пространство или используйте современную CSS-интерполяцию цвета, а не наивно лерпьте hex-строки как текст.

Рабочий процесс с конвертерами

Когда дизайн-инструмент экспортирует hex, а графический API хочет байты:

1. Вставьте hex в конвертер.
2. Подтвердите каналы.
3. Передайте целые или нормализованные float в API.
4. Визуально проверьте несколько фирменных цветов.

Инструмент from-hex-to-rgb создан для этого быстрого цикла подтверждения.

Кратко

Hex-цвета — записи в системе с основанием 16 байтов RGB-каналов. Шестизначный hex напрямую отображается в три компоненты 0–255; короткие и восьмизначные формы расширяют идею ради краткости и альфы. Выучите попарное преобразование один раз, держите токены согласованными и проверяйте контраст—потому что выбранный формат важнее меньше, чем может ли человек прочитать интерфейс.