HEX против RGB против HSL против OKLCH — Когда каждый формат цвета CSS действительно имеет смысл

Откройте любой код, написанный тем, кто изучал CSS в W3Schools в 2011 году, и вы найдёте стену из #rrggbb значений. HEX присутствует повсюду — не потому, что это лучший формат для задачи, а потому, что это был формат в каждом уроке и в каждом цветовом измерителе, когда большинство из нас впервые взялись за CSS. Он всё ещё работает. Он не исчезает. Но в 2026 году использование HEX для все похоже на написание JavaScript без const потому что вы изучали это в блоге 2009 года.

Существует четыре формата цвета, которые стоит знать: HEX, RGB, HSL и OKLCH. Каждый из них подходит в определённых ситуациях — и не подходит в других. Вот когда использовать каждый из них.

HEX (#rrggbb / #rrggbbaa)

HEX кодирует цвет как пары шестнадцатеричных цифр: две для красного, две для зелёного, две для синего. #ff5733 переводится в rgb(255, 87, 51) — оранжево-красный. Без открытого цветового измерителя вы не можете прочитать это значение; вам просто нужно знать его.

Существует сокращённый формат: #f53 расширяется до #ff5533. Он работает только тогда, когда все цифры в каждой паре одинаковы. Прозрачность — это четвёртая пара: #ff5733cc — где cc — это канал прозрачности. Это примерно 80% прозрачности для тех, кто считает на месте (0xCC / 0xFF ≈ 0.8). Полностью допустимый, но полностью непонятный.

Когда HEX подходит

• Дизайн-токены из Figma или Sketch. Дизайнеры экспортируют HEX. Вы вставляете HEX. Это рабочий процесс. Не боритесь с ним.
• Везде, где значение является статичным и визуальные инструменты контролируют его. Если цветовой измеритель в VS Code или DevTools браузера генерирует значение, HEX подходит.
• Третий сторонний интеграционный компонент который принимает только HEX ввод.

Когда HEX — неправильный выбор

• Изменение цветов программно — вы не можете рационально выполнять математические операции над #ff5733
• Выражение тоновых отношений — нет интуитивного способа получить более светлую или более темную вариацию
• Разработка системы дизайна с семантическими токенами

RGB / RGBA

RGB указывает на те же каналы красного, зелёного и синего в прямых десятичных значениях. rgb(255, 87, 51) это то же самое оранжево-красное, что и #ff5733, но значения каналов — это хотя бы читаемые числа. Современный синтаксис цвета в CSS Level 4 убирает запятые: rgb(255 87 51). Прозрачность выражается слешем: rgb(255 87 51 / 50%). Устаревший rgba(255, 87, 51, 0.5) по-прежнему работает — браузеры не отключили его и не отключат.

Когда RGB подходит

• Работа с цветами на JavaScript. Когда вам нужно изменять яркость путём смешивания с белым: вы можете выполнять арифметические операции напрямую над значениями каналов.
• Canvas и WebGL. API работают с целыми числами от 0 до 255 или с плавающими числами от 0 до 1. RGB напрямую соответствует ожиданиям подсистемы пикселей.
• Когда вы получаете значения каналов из аппаратного сенсора или изображения и вам не нужно конвертировать.

Когда RGB — неправильный выбор

• Создание цветовых схем — нет визуальной модели мышления о том, как выглядят небольшие изменения в RGB
• Темная тема — вам нужно пересчитать все три канала, чтобы изменить яркость

HSL (Hue / Saturation / Lightness)

HSL — первый формат цвета, который соответствует тому, как люди действительно воспринимают цвет. Hue — это угол на цветовом круге (0–360°), насыщенность контролирует яркость цвета (0% = серый, 100% = чистый), а яркость контролирует яркость (0% = чёрный, 100% = белый). hsl(14 100% 60%) это тот же самый оранжево-красный.

Практичное преимущество: если вы хотите более тёмную версию цвета, уменьшите значение яркости. Масляная версия? Уменьшите насыщенность. Вы можете получить полный тоновый палитр из одного значения гаммы. Именно поэтому системы CSS с пользовательскими свойствами, построенные на HSL, так распространены:

:root {
  --brand-hue: 14;
  --brand-saturation: 100%;

  --brand-400: hsl(var(--brand-hue) var(--brand-saturation) 70%);
  --brand-500: hsl(var(--brand-hue) var(--brand-saturation) 60%);
  --brand-600: hsl(var(--brand-hue) var(--brand-saturation) 50%);
  --brand-700: hsl(var(--brand-hue) var(--brand-saturation) 40%);
}

Прозрачность работает так же, как и в других случаях: hsl(14 100% 60% / 50%).

Есть одна реальная проблема с HSL: шкала яркости не является перцептуально равномерной. Два цвета с одинаковым значением L могут выглядеть очень по-разному по яркости — попробуйте hsl(60 100% 50%) (жёлтый) и hsl(240 100% 50%) (синий) рядом. Жёлтый выглядит значительно ярче, хотя у них одинаковое значение L=50%. Это важно для доступности и особенно для цветовых градиентов.

Когда HSL подходит

• Системы цветов и дизайн-токены. Паттерн палитры на основе одного гамма-цвета является удобным и читаемым.
• Темная тема. Изменяйте значения L, оставляя всё остальное неизменным. Это работает чисто.
• Градиенты в CSS-пользовательских свойствах — задача, для которой она была разработана.

OKLCH — Современная альтернатива

OKLCH — это то, что HSL должен был быть. Он описывает цвет в трёх значениях: яркость (0–1), насыщенность (похоже на насыщенность, примерно 0–0.4) и гамма (0–360°). oklch(0.65 0.18 28) приблизительно соответствует тому же оранжево-красному.

Ключевое отличие от HSL — перцептуальная равномерность. В OKLCH два цвета с одинаковой яркостью действительно выглядят одинаково ярко для человеческого глаза. Жёлтый при L=0.65 и синий при L=0.65 будут выглядеть с одинаковой яркостью — в отличие от HSL, где жёлтый доминирует. Это важно в двух конкретных случаях:

• Доступность. Когда вы рассчитываете соотношения контраста на основе значений L, они отражают то, что пользователи действительно воспринимают — а не то, что говорит математика.
• Градиенты. Градиент от синего к жёлтому в HSL проходит через грязный серый в середине. Тот же градиент в OKLCH остаётся ярким на протяжении всего, потому что промежуточные шаги остаются с одинаковой воспринимаемой яркостью.

Поддержка браузеров на 2023 год: все современные браузеры (Chrome 111+, Firefox 113+, Safari 15.4+). Нет поддержки IE11 — и никто, разрабатывающий новое программное обеспечение в 2026 году, не ориентируется на IE11.

Tailwind v4 перенёс свою всю палитру цветов на OKLCH. Это не мелкая деталь реализации — это сигнал от самого широко используемого CSS-фреймворка, что это правильное направление для систем цветов.

Если вы создаёте или экспериментируете с градиентами HSL или OKLCH, то Генератор CSS градиента на IO Tools поддерживает оба формата напрямую — полезно для сравнения качества градиентов в режиме реального времени.

Когда OKLCH подходит

• Новые системы дизайна, созданные с нуля. Если вы определяете свои цветовые токены сегодня, OKLCH даёт вам перцептуальную равномерность, которую HSL не предоставляет.
• Системы с градиентами. Разница в качестве градиентов является заметной и значимой.
• Доступные цветовые палитры где вам нужно, чтобы соотношения контраста отражали реальное восприятие.

То же самое цветовое значение в четырёх форматах

Вот rgb(255, 87, 51) — тёплый оранжево-красный — выраженный в каждом формате, с вариантами прозрачности 50%:

Формат	Сплошной цвет	50% Прозрачный
HEX	#ff5733	#ff573380
РГБ	rgb(255 87 51)	rgb(255 87 51 / 50%)
HSL	hsl(14 100% 60%)	hsl(14 100% 60% / 50%)
OKLCH	oklch(0.65 0.18 28)	oklch(0.65 0.18 28 / 50%)

Обратите внимание, какой из них вы бы хотели редактировать вручную, если бы нужно было сделать цвет на 20% тёмнее. HEX: вы бы открыли цветовой измеритель. RGB: вы бы выполнили арифметические операции над тремя значениями. HSL: измените значение L с 60% до 40%. OKLCH: измените значение L с 0.65 до 0.45. Форматы HSL и OKLCH прямо выражают намерение.

Практический путь миграции

Не переписывайте существующие значения HEX. Они работают, они не сломаны, и возврат на них практически равен нулю. Оставьте их.

Для новых проектов примите эти правила:

• Статические цвета от дизайнера или из визуального инструмента → HEX. Вставляйте то, что даёт Figma. Не нужно конвертировать.
• Цвета, которые вы изменяете на JavaScript или передаёте в Canvas/WebGL → RGB. Арифметические операции по каналам соответствуют без проблем.
• Новые CSS-пользовательские свойства и дизайн-токены → HSL или OKLCH. Вы хотите возможность получать тоновые и тёмные варианты без пересчёта трёх отдельных значений.
• Новые системы дизайна с нуля или работа с градиентами → OKLCH. Перцептуальная равномерность оправдана незначительным уклоном в обучении для значений Chroma.

Конкретный паттерн для CSS-пользовательских свойств в новом проекте:

:root {
  /* Define the base in OKLCH */
  --brand: oklch(0.65 0.18 28);

  /* Derive tonal variants by adjusting L */
  --brand-light: oklch(0.78 0.14 28);
  --brand-dark:  oklch(0.48 0.20 28);
  --brand-muted: oklch(0.65 0.08 28);

  /* Transparency with the slash syntax */
  --brand-ghost: oklch(0.65 0.18 28 / 15%);
}

Это легко читаемо, может быть редактировано без инструментов и даёт лучшие градиенты по сравнению с подходом на основе HSL.

Суть

HEX не ошибочен — он просто специализирован. Он оптимизирован для значений, получаемых из визуальных инструментов и вставляемых в код, а не для значений, которые вы рассматриваете или изменяете. RGB полезен, когда вам нужно взаимодействовать с JavaScript или API Canvas. HSL остаётся хорошим выбором для дизайн-токенов, если вы работаете в существующем коде, использующем его. OKLCH — это то, куда вы должны двигаться при создании новых систем дизайна.

Барьер для принятия HSL или OKLCH ниже, чем кажется. Вам не нужно мигрировать ничего — просто начните использовать их при создании следующего набора токенов. Тот Color Picker на IO Tools показывает любой цвет в четырёх форматах одновременно, что полезно при конвертации существующих значений HEX в HSL или OKLCH для нового токена.

Вам также может понравиться