Конвертер цветов: HEX, RGB и HSL

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

Что такое HEX

HEX (hexadecimal) — это шестнадцатеричная запись цвета, наиболее распространённая в CSS. Цвет записывается после символа # и состоит из шести символов: по два на каждый канал — красный, зелёный и синий. Например, #FF5733 означает максимальное значение красного (FF = 255), среднее зелёного (57 = 87) и невысокое синего (33 = 51).

HEX удобен своей компактностью. Дизайнеры часто обмениваются именно HEX-кодами, потому что это короткая строка, которую легко скопировать и вставить. Кроме того, существует сокращённая запись: если пары символов одинаковые, можно писать три символа. Например, #AABBCC эквивалентен #ABC.

Модель RGB

RGB (Red, Green, Blue) — аддитивная цветовая модель, в которой цвет задаётся тремя числами от 0 до 255. Запись в CSS выглядит так: rgb(255, 87, 51). Эта модель интуитивно понятна: вы напрямую управляете интенсивностью каждого из трёх каналов.

RGB отлично подходит для программного управления цветом. Если нужно динамически изменять компоненты цвета через JavaScript — например, увеличивать яркость красного канала в зависимости от действий пользователя — RGB-формат будет самым удобным выбором. Также RGB поддерживает четвёртый параметр — альфа-канал (прозрачность), записываемый как rgba(255, 87, 51, 0.5).

Модель HSL

HSL (Hue, Saturation, Lightness) описывает цвет через три характеристики: тон (угол на цветовом круге от 0 до 360), насыщенность (от 0% до 100%) и светлость (от 0% до 100%). Запись в CSS: hsl(14, 100%, 60%).

Главное преимущество HSL — интуитивность для человека. Если вам нужно получить более тёмный оттенок того же цвета, достаточно уменьшить значение Lightness. Хотите менее насыщенный вариант — снижайте Saturation. Это делает HSL незаменимым при создании цветовых палитр и тем оформления.

Различия между моделями

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

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

Как работает конвертация

Перевод между HEX и RGB тривиален: каждая пара символов HEX переводится в десятичное число. Например, #FF = 255, #00 = 0. Обратный процесс столь же прост — десятичное число преобразуется в шестнадцатеричное.

Конвертация между RGB и HSL сложнее. Алгоритм находит максимальный и минимальный компоненты RGB, вычисляет светлость как их среднее, насыщенность — через разницу между максимумом и минимумом, а тон — через соотношение каналов. Формулы нетривиальны, и именно поэтому удобнее пользоваться готовыми инструментами, чем считать вручную.

Практические советы

Для повседневной работы с цветами пригодятся несколько рекомендаций:

• Используйте HSL для дизайн-систем. Когда нужно быстро получить палитру из основного, светлого и тёмного вариантов, HSL позволяет менять только один параметр.
• Проверяйте контрастность. Какой бы формат вы ни выбрали, убедитесь, что текст читается на фоне. Стандарт WCAG рекомендует контрастность не менее 4.5:1 для обычного текста.
• Храните цвета в CSS-переменных. Запишите значения через --color-primary: hsl(14, 100%, 60%) и используйте по всему проекту. Это упрощает поддержку тем.
• Не забывайте об альфа-канале. Современные CSS поддерживают hsl(14 100% 60% / 0.5) — это удобнее, чем создавать отдельный полупрозрачный цвет.

Заключение

HEX, RGB и HSL — три способа описать один и тот же цвет. HEX незаменим в вёрстке, RGB — в скриптах, HSL — в дизайне. Понимание этих моделей помогает быстрее находить нужный оттенок и грамотно работать с цветовыми палитрами.

Быстро конвертировать цвета между форматами вы можете с помощью нашего конвертера цветов. Также рекомендуем попробовать генератор CSS-градиентов для создания плавных переходов между оттенками.