Конвертер цветовых кодов

Преобразование цветовых кодов — это запись одного и того же цвета в разных системах обозначения, таких как HEX, RGB и HSL. Экран создаёт цвет, смешивая основные цвета света — красный, зелёный и синий, поэтому любой цвет в итоге сводится к интенсивности трёх каналов RGB. HEX сжимает эти значения RGB в шестизначную шестнадцатеричную строку (#RRGGBB), тогда как HSL перестраивает их так, как человек воспринимает цвет — через угол цветового круга, насыщенность и светлоту.

Почему преобразование важно

• Написание CSS — возьмите код HEX из макета и преобразуйте его в RGB, что упрощает настройку прозрачности.
• Коррекция цвета — когда нужно лишь немного затемнить цвет, после преобразования в HSL достаточно изменить только значение L.
• Совместная работа — держите в согласии HEX дизайнера из Figma, переменные RGB разработчика и цветовые эталоны типографии.

В каком бы формате вы ни ввели данные, этот конвертер сразу рассчитывает все остальные форматы и показывает реальный цвет в предпросмотре.

HEX → RGB разбивает шестнадцатеричное число на пары по две цифры и читает каждую как десятичное число.

R = parseInt(hex[0:2], 16), G и B вычисляются так же. Пример: #FF5733 → FF=255, 57=87, 33=51 → RGB(255, 87, 51).

RGB → HSL сначала нормализует каждый канал к диапазону 0-1, а затем находит светлоту.

L = (max + min) / 2
S = delta / (2 − max − min) (когда L > 0,5)
где delta = max − min. В примере выше max=1 и min=0,2 дают L = 0,6 (60%), S = 0,8/0,8 = 100% и угол цвета H ≈ 11°, что преобразуется в HSL(11°, 100%, 60%).