Преобразование цвета между HEX, RGB и HSL
Опубликовано · Обновлено 2 мин чтения
HEX, RGB и HSL это три способа записать один и тот же цвет. Вы встречаете их в графическом редакторе, таблице стилей, макетном инструменте или брендбуке и постоянно переходите от одного к другому. Инструмент показывает все три сразу и принимает распространённые записи.
Три записи одного и того же цвета
Исследовать цвета по умолчанию показывает три формы с предпросмотром цвета. HEX это строка из шести цифр и букв с предшествующим знаком решётки. RGB задаёт количество красного, зелёного и синего от 0 до 255. HSL описывает оттенок в градусах, насыщенность и яркость в процентах, что часто нагляднее для осветления или затемнения цвета. Для зелёного #2F4A3F:
| Форма | Результат |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
Три кнопки HEX, RGB и HSL на панели сводят результат к одной форме, удобной для копирования как есть.
Допустимые записи
| Запись | Пример | Результат в HEX |
|---|---|---|
| Короткий HEX | #fff | #ffffff |
| HEX с прозрачностью | #2F4A3F80 | #2f4a3f80 |
| RGB с запятыми | rgb(47, 74, 63) | #2f4a3f |
| RGB с пробелами | rgb(47 74 63) | #2f4a3f |
| RGB в процентах | rgb(100%, 0%, 0%) | #ff0000 |
| HSL с пробелами | hsl(156 22% 24%) | #304b40 |
Названия цветов вроде «red» и значения вне диапазона от 0 до 255 вроде rgb(300, 0, 0) отвергаются с сообщением, перечисляющим допустимые записи.
Прозрачность
Прозрачность записывается в HEX восемью цифрами или после косой черты с пробелами. Цвет rgb(47 74 63 / 50%) даёт #2f4a3f80 в HEX и rgba(47, 74, 63, 0.5) в RGB. И наоборот, #2F4A3F80 даёт непрозрачность 0,502, потому что 80 в шестнадцатеричной системе это 128 из 255.
Почему круговое преобразование сдвигается на один уровень
HSL показывается целыми числами: оттенок в градусах, насыщенность и яркость в процентах. Обратный переход из HSL в HEX поэтому приводит к соседнему цвету, не всегда исходному.
| Исходный | Показанный HSL | Обратно в HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
Разница один уровень на каждом канале, невидимая глазу. Для дизайн-токена или бренда храните исходный HEX как эталон и не пользуйтесь HSL.
Серые цвета
У серого нулевая насыщенность и оттенок не влияет: #808080 даёт rgb(128, 128, 128) и hsl(0, 0%, 50%).
Чего инструмент не измеряет
Преобразование формата ничего не говорит о читаемости. Инструмент не вычисляет контраст между текстом и фоном: проверьте его отдельно перед публикацией. Случай QR-кода, где контраст решает, считается ли он, разобран в Как создать QR-код, который считывается с первого раза.
Для каких задач
Дизайнер, передающий цвет разработчику, человек, подгоняющий таблицу стилей, преподаватель, готовящий раздаточный материал: один и тот же цвет записывают тремя способами в зависимости от инструмента.
Проверка преобразования
- Вставьте цвет в поле: предпросмотр должен соответствовать ожидаемому.
- Скопируйте форму, которую требует ваша система.
- Чтобы сохранить точный цвет, храните HEX или RGB, а не HSL.
Часто задаваемые вопросы
- Как преобразовать HEX в RGB?
- Вставьте цвет в инструмент, он покажет три формы сразу, например #2F4A3F, rgb(47, 74, 63) и hsl(156, 22%, 24%).
- Почему круговое преобразование через HSL меняет цвет на один уровень?
- HSL показывается целыми числами. Храните исходный HEX как эталон.
- Как записать прозрачность?
- В HEX восемью цифрами или в RGB с косой чертой, например rgb(47 74 63 / 50%).
- Проверяет ли инструмент читаемость текста?
- Нет, он не вычисляет контраст между текстом и фоном: проверьте его отдельно.