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

Как один цвет записывается в HEX, RGB и HSL

Три согласованных образца цвета показывают перевод между форматами

HEX, RGB и HSL по-разному описывают один цвет в пространстве sRGB. HEX записывает красный, зелёный и синий каналы шестнадцатеричными парами. RGB показывает те же каналы десятичными числами от 0 до 255. HSL раскладывает цвет на тон, насыщенность и светлоту, поэтому удобен, когда нужно сделать оттенок светлее, темнее или спокойнее. Отдельный разбор показывает, почему экран смешивает свет иначе, чем краски.

sRGB задаёт цвет тремя каналами: красным R, зелёным G и синим B. Калькулятор переводит записи внутри этого пространства, поэтому предпросмотр, HEX, RGB и HSL описывают согласованный экранный цвет.

Стартовый код #336699 разбивается на пары 33, 66 и 99. В десятичной системе это 51, 102 и 153, поэтому получается rgb(51,102,153). Максимальный канал равен 153, минимальный 51, а результат в HSL составляет hsl(210,50%,40%). Это приглушённый синий, а не три разных цвета.

Из чего состоит HEX-код

Полная запись содержит шесть знаков после решётки: #RRGGBB. Каждая пара принимает значение от 00 до FF, то есть от 0 до 255. Всего три байта дают 256³ = 16 777 216 сочетаний каналов. Регистр букв не влияет на цвет, но калькулятор приводит ответ к прописным буквам, чтобы запись была единообразной.

Короткий формат #RGB разворачивается повторением каждого знака. Код #3A7 равен #33AA77, а #FFF равен #FFFFFF. Четвёртый знак в #RGBA отвечает за прозрачность и тоже дублируется: #0008 превращается в #00000088. Короткая запись удобна, но может представить только 4096 непрозрачных цветов вместо 16,7 миллиона.

Восьмизначный HEX устроен как #RRGGBBAA. Последняя пара AA является альфа-каналом: 00 означает полную прозрачность, FF полную непрозрачность. Значение 80 равно 128/255, то есть примерно 0,502. Это важная мелочь: привычные «50%» в восьмибитной записи превращаются не ровно в 0,5, а в ближайший байт.

Решётку при вводе можно опустить, но в результате она появится. Если нужно отдельно перевести обычное число в шестнадцатеричную запись, используйте конвертер десятичного числа в HEX. Цветовой инструмент трактует все три или шесть знаков именно как каналы, а не как одно большое число.

Как читать RGB и HSL

В RGB каждый канал занимает диапазон от 0 до 255. rgb(255,0,0) даёт красный, rgb(0,255,0) зелёный, rgb(0,0,255) синий. Три нуля дают чёрный, три значения 255 белый. Если R, G и B равны, цвет становится серым: у него нет выраженного оттенка, поэтому насыщенность HSL равна 0%.

HSL использует круг тона от 0° до 360°. Ноль и 360° обозначают одну точку, красный. Зелёный расположен на 120°, синий на 240°. Saturation меняется от серого при 0% до максимально насыщенного варианта при 100%. Lightness равна 0% для чёрного, 100% для белого и 50% для обычной яркости чистого оттенка.

HSL помогает строить варианты интерфейса: оставьте Hue прежним, уменьшите Saturation для спокойного состояния или измените Lightness для светлой подложки. Но одинаковая HSL-светлота не гарантирует одинаковую зрительную яркость. Чистые синий и жёлтый оба могут иметь Lightness 50%, хотя жёлтый на экране выглядит намного светлее. Причину и расчёт коэффициентов объясняет статья о переводе цвета в серый.

Примеры перевода цветов

🎨 Белый фон. Короткий #FFF разворачивается в #FFFFFF, затем в rgb(255,255,255) и hsl(0,0%,100%). Тон здесь условный: при насыщенности 0% его изменение не меняет белый.

🕶 Полупрозрачный чёрный. Код #00000080 даёт rgba(0,0,0,0.502). На белом фоне он выглядит серым, но сам цвет остаётся чёрным с прозрачностью. Шахматная подложка предпросмотра позволяет не перепутать прозрачность с серым каналом.

🚨 Чистый красный. RGB-каналы 255, 0 и 0 превращаются в #FF0000 и hsl(0,100%,50%). Такой цвет полезен как контрольная точка: один канал максимален, два остальных равны нулю.

🌱 Чистый зелёный. HSL 120°, 100%, 50% даёт rgb(0,255,0) и #00FF00. Если оставить Hue 120°, но снизить Lightness до 25%, получится тёмный зелёный #008000.

🪨 Средний серый. RGB 128, 128, 128 переводится в #808080 и hsl(0,0%,50.2%). Десятая доля процента появляется из-за дискретного канала: 128/255 немного больше половины.

🧩 Фирменный синий. #336699 соответствует rgb(51,102,153) и hsl(210,50%,40%). Запишите результат в CSS любым из трёх способов, внешний вид останется тем же, пока браузер работает с sRGB и альфа равна 1.

Округление и границы конвертера

RGB в результате округляется до целых каналов, потому что HEX хранит каждый из них одним байтом. HSL показывается с точностью до 0,1° и 0,1%, альфа до трёх знаков. Повторный перевод HSL в RGB иногда слегка меняет исходные десятые доли: 256 доступных значений канала не могут сохранить бесконечную точность.

Конвертер проверяет границы вместо молчаливого обрезания. RGB 256, отрицательная насыщенность, Lightness 120% и Alpha 1,2 дают ошибку. Hue 360° допустим и нормализуется в 0°. Пустое поле и HEX со знаками вне диапазона 0-9, A-F тоже не превращаются в случайный цвет.

Инструмент работает с sRGB. Он не переводит Display P3, CMYK, Lab или OkLCh и не оценивает контраст текста. Если код расходится на устройствах, проверьте, почему один HEX выглядит по-разному на экранах. Для печатных значений сначала нужен профиль: CMYK нельзя точно перевести в HEX одной формулой. Для числовых систем пригодится отдельный конвертер систем счисления.

Важно! Прозрачный образец всегда зависит от подложки. Один и тот же rgba(0,0,0,0.5) выглядит серым на белом и почти чёрным на тёмном фоне. Альфа описывает смешивание с фоном, а не самостоятельный видимый цвет.

Вопросы о HEX, RGB и HSL

Эти ответы уточняют короткую запись, прозрачность, округление и ситуации, в которых одинаковые числа могут дать неожиданный визуальный результат.

Можно ли вводить HEX без решётки?

Да. Записи 336699 и #336699 обрабатываются одинаково. В готовом результате решётка добавляется, а буквы приводятся к верхнему регистру.

Чем #RGB отличается от #RRGGBB?

В короткой записи каждый знак дублируется: #3A7 равно #33AA77. Она компактнее, но предлагает только 16 значений на канал вместо 256.

Где находится альфа-канал в восьмизначном HEX?

В CSS он записывается последней парой: #RRGGBBAA. Например, в #33669980 цвет занимает первые шесть знаков, а 80 задаёт прозрачность примерно 0,502.

Почему серый цвет получает Hue 0°?

Когда R, G и B равны, насыщенность равна 0%, поэтому тон не влияет на результат. Калькулятор выводит 0° как стабильное условное значение.

Почему HSL 0°, 100%, 50% даёт красный?

Шкала тона устроена как круг: 0° и 360° соответствуют красному, 120° зелёному, 240° синему. Saturation 100% и Lightness 50% дают чистый основной оттенок.

Почему после обратного перевода отличаются десятые доли HSL?

HEX и результат RGB ограничены целыми каналами 0-255. При переводе произвольного HSL каждый канал попадает в ближайшее целое значение, поэтому обратный расчёт может отличаться на десятую долю.

Совпадёт ли цвет в браузере и графическом редакторе?

Числа совпадут, если обе программы трактуют их как sRGB. Вид на экране всё равно зависит от цветового профиля, калибровки дисплея, яркости и окружающего фона.

Можно ли по HEX проверить контраст текста?

Сам код даёт исходный цвет, но контраст требует второго цвета и отдельного расчёта относительной яркости. Один предпросмотр не заменяет проверку доступности интерфейса.

Есть что добавить?

Напишите своё мнение, комментарий или предложение.