!\[Конвертер цветов: HEX, RGB и HSL\](https://usetoolz.ru/article-covers/images/color-picker-konverter-cvetov.webp)

Разработка

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

!\[UseToolz\](https://usetoolz.ru/favicon.svg)

Александр Михеев

05 августа 2024 · 4 мин. чтения

Цвет — один из ключевых элементов любого веб-проекта. Но за привычными нам оттенками скрываются числовые модели, каждая из которых описывает цвет по-своему. Веб-разработчики и дизайнеры ежедневно работают с тремя основными форматами: 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 — в дизайне. Понимание этих моделей помогает быстрее находить нужный оттенок и грамотно работать с цветовыми палитрами.

Быстро конвертировать цвета между форматами вы можете с помощью нашего \[конвертера цветов\](https://usetoolz.ru/dev/color-picker). Также рекомендуем попробовать \[генератор CSS-градиентов\](https://usetoolz.ru/dev/css-gradient) для создания плавных переходов между оттенками.

Понравилась статья?

Оцените — это помогает нам делать контент лучше

## Комментарии

Войдите, чтобы оставить комментарий

## Читайте также

!\[CSS Shadow: box-shadow и text-shadow в веб-дизайне\](https://usetoolz.ru/article-covers/thumbnails/css-shadow-teni-v-veb-dizajne.webp) Разработка

### [CSS Shadow: box-shadow и text-shadow в веб-дизайне](https://usetoolz.ru/blog/css-shadow-teni-v-veb-dizajne)

03.03.2025 · 2 мин. чтения

!\[Unix Timestamp: конвертация дат и времени\](https://usetoolz.ru/article-covers/thumbnails/unix-timestamp-konvertaciya-dat.webp) Разработка

### [Unix Timestamp: конвертация дат и времени](https://usetoolz.ru/blog/unix-timestamp-konvertaciya-dat)

17.08.2024 · 5 мин. чтения

!\[Base64 декодирование: как расшифровать закодированные данные\](https://usetoolz.ru/article-covers/thumbnails/base64-dekodirovanie-onlajn.webp) Разработка

### [Base64 декодирование: как расшифровать закодированные данные](https://usetoolz.ru/blog/base64-dekodirovanie-onlajn)

02.12.2024 · 3 мин. чтения

triggerFly($event.detail || {}), 180)" @fly-to-works.window="triggerFly($event.detail || {})" class="pointer-events-none fixed inset-0 z-\[90\]">