Форматы цветов: HEX, RGB, HSL и HSV — объяснение и конвертация
Практическое руководство по форматам цветов в веб-дизайне и разработке: что означает каждый формат и как быстро конвертировать между ними.
На экране цвета выглядят одинаково — независимо от того, в каком формате они записаны в коде. Но выбор формата влияет на удобство работы. HEX компактен и легко копируется. RGB отражает физику экрана. HSL и HSV позволяют думать об оттенке, насыщенности и яркости — это гораздо удобнее, когда нужно сделать цвет темнее или приглушённее.
Разберём, что означает каждый формат и когда его стоит применять.
HEX — стандарт веба
Цвета в формате HEX выглядят как #3b82f6. Каждая пара символов — шестнадцатеричное число от 00 (0) до ff (255), задающее красный, зелёный и синий каналы. Сокращённая форма #rgb удваивает каждую цифру: #39f эквивалентен #3399ff.
HEX — главный формат в CSS, HTML и экспорте из Figma и Sketch. Компактный, удобный для копирования. Минус один: глядя на #1e40af, вы не сразу угадаете, что это тёмно-синий.
RGB — модель на основе физики экрана
rgb(59, 130, 246) — тот же синий, что и #3b82f6. Три числа задают интенсивность красного, зелёного и синего от 0 до 255.
RGB — нативная модель для экранов: каждый пиксель ЖК- или OLED-дисплея физически управляется тремя субпикселями. CSS поддерживает rgb() и более новый rgba() с альфа-каналом. Это нужно, когда приходится программно считать смешение цветов или работать с прозрачностью.
HSL — модель для дизайнера в CSS
hsl(217, 91%, 60%) описывает тот же синий тремя понятными числами:
- Оттенок (Hue) — 0–360°, цветовое семейство. 0° — красный, 120° — зелёный, 240° — синий.
- Насыщенность (Saturation) — 0–100%. 0% — серый, 100% — максимально насыщенный.
- Светлота (Lightness) — 0% это чёрный, 50% — чистый оттенок, 100% — белый.
HSL встроен в CSS и упрощает построение цветовых шкал: снизьте светлоту — получите тёмный оттенок, убавьте насыщенность — получите приглушённый тон. На этой же логике построена палитра Tailwind CSS.
HSV (HSB) — модель для дизайн-инструментов
HSV использует те же оттенок и насыщенность, что и HSL, но вместо светлоты — значение (Value), оно же Brightness:
- Значение (Value) — 0–100%. При 100% получается чистый насыщенный цвет, при 0% — всегда чёрный.
При 100% значения и переменной насыщенности цвета идут от чистого оттенка до белого. Это лучше соответствует тому, как дизайнеры думают о тонах и тенях, — именно поэтому Photoshop, Figma и Affinity Designer используют HSV в своих палитрах, а не HSL.
Выбор правильного формата
| Задача | Лучший формат |
|---|---|
| Написание CSS | HEX или HSL |
| Чтение значения из дизайн-файла | HEX |
| Программное создание цветовых шкал | HSL |
| Работа в палитре Photoshop / Figma | HSV |
| Расчёт прозрачности | RGB с rgba() |
Конвертация между форматами
Математика существует, но мало кто держит её в голове. Только алгоритм преобразования оттенка в RGB имеет шесть ветвей. Конвертер цветов делает все вычисления мгновенно — вставьте значение в любом формате, и остальные обновятся сразу.
Есть и встроенная палитра: нажмите на образец, выберите цвет визуально, затем скопируйте нужный формат.
Откройте Конвертер цветов — введите цвет в любом формате и скопируйте результат одним нажатием.