Как пользоваться
- Введите данные
Введите необходимые значения в поля ввода.
- Настройте параметры
Выберите подходящие опции и настройки.
- Посмотрите результат
Нажмите Рассчитать для мгновенного результата.
Что такое преобразование цветовых кодов?
Преобразование цветовых кодов — это запись одного и того же цвета в разных системах обозначения, таких как 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) / 2S = 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%).