Конвертер HSL в HEX
Задайте тон, насыщенность и светлоту и получите соответствующий шестизначный HEX-код цвета, готовый к копированию.
Ввод hsl
Результат · HEX
#FF3D77
RGB
rgb(255, 61, 119)
HSL
hsl(342, 100%, 62%)
HSV
hsv(342, 76%, 100%)
CMYK
cmyk(0%, 76%, 53%, 0%)
Как пользоваться: HSL в HEX
- 1
Введите цвет
Впишите код цвета или выберите его пипеткой — каждое поле принимает свой формат.
- 2
Получите результат
Значение пересчитывается мгновенно, по мере ввода, вместе с превью цвета.
- 3
Скопируйте код
Скопируйте нужное значение в один клик и вставьте в дизайн, CSS или настройки печати.
Зачем переводить HSL в HEX
HSL — самый интуитивный способ построить цветовую систему. Вы фиксируете тон, скажем 262° для фиолетового, и создаёте целую шкалу, меняя в основном светлоту: около 95% для фонов, 58% для кнопок и акцентов, 30% для текста. Дизайнеры и разработчики используют этот метод для светлых и тёмных оттенков и тёмных тем.
Готовую шкалу, однако, обычно нужно передать в виде HEX-кодов: гайдлайны, дизайн-токены, библиотеки Figma, брендбуки и многие системы управления контентом ждут значения #RRGGBB. Введите значения HSL и скопируйте HEX — например, hsl(262, 83%, 58%) превращается в #7C3BED. Инструмент также показывает RGB, HSV и CMYK для того же цвета. Поскольку HEX хранит только 256 уровней на канал, очень малые изменения HSL не всегда меняют HEX-код.
Всё работает локально в вашем браузере — изображения никуда не загружаются.