HEX vs RGB — какую запись цвета выбрать
HEX против RGB для веба: #rrggbb, rgb() и когда брать HSL или OKLCH. Конвертер рядом.
HEX короче в CSS и в макетах Figma. rgb() удобнее, когда крутишь каналы слайдерами или задаёшь альфу как rgb(255 126 21 / 0.5).
Это один и тот же экранный цвет. HSL ближе к «светлее/насыщеннее». OKLCH лучше держит яркость при смене оттенка. Пипетка ToolsHelper показывает все четыре записи сразу.
#ff7e15 и rgb(255, 126, 21) — один цвет в разной записи. Hex короче в таблице стилей. rgb() проще анимировать как три числа. Короткий hex #f70 — это #ff7700, а не сокращение длинного оранжевого. Альфа — четвёртый канал в обеих современных формах. Здесь орфография цвета. Конвертер показывает обе записи для выбранного цвета. Короткий #f70 — это #ff7700, его нельзя подставить вместо длинного #ff7e15.
| Признак | HEX | rgb() |
|---|---|---|
| Длина в CSS | Короче (#rrggbb) | Длиннее, каналы явно |
| Альфа | #rrggbbaa | rgb(r g b / a) |
| Токены | Часто в макетах Figma | Удобно, когда цвет собирается из трёх чисел |
Частые вопросы
Что писать в дизайн-системе?
HEX или OKLCH для токенов. rgb() если генерируешь цвет из трёх чисел в коде.