Бесплатный конвертер

HSL в Конвертер HEX

Мгновенно конвертируйте значения цвета HSL в коды цвета HEX — бесплатный конвертер цветов в реальном времени.

Оттенок
Насыщенность (%)
Светлота (%)

Вывод HEX

#368CE2
R:54
G:140
B:226

Копировать формат

Формат #HEX#368CE2
Формат hsl()hsl(210°, 75%, 55%)
Формат rgb()rgb(54, 140, 226)

Об этом инструменте

Преобразуйте значения цвета HSL (оттенок, насыщенность, яркость) в шестнадцатеричные коды. HSL — это интуитивная цветовая модель, где оттенок — это цветовой угол (0–360°), насыщенность — интенсивность цвета (0–100 %), а яркость определяет, насколько светлым или темным будет цвет (0–100 %). Полезно для дизайнеров, которые работают с HSL и которым нужны шестнадцатеричные коды для CSS.

Как использовать

  1. Введите значение оттенка (0–360 градусов на цветовом круге).
  2. Установите насыщенность (0–100%) и яркость (0–100%).
  3. Шестнадцатеричный код рассчитывается и отображается в реальном времени.
  4. Скопируйте шестнадцатеричный код для использования в CSS или инструменте дизайна.

Часто задаваемые вопросы

Зачем использовать HSL вместо шестнадцатеричного или RGB?
HSL более интуитивен для людей. Хотите более темный оттенок? Уменьшите легкость. Хотите приглушенную версию? Уменьшите насыщенность. Эти отношения не очевидны в шестнадцатеричном формате или RGB, где вам нужно настроить все три канала.
Что означает оттенок 0 против 360?
И 0°, и 360° красные — колесо оттенков вращается. Основные оттенки: 0° = красный, 60° = желтый, 120° = зеленый, 180° = голубой, 240° = синий, 300° = пурпурный.
Что происходит при насыщении 0% и 100%?
При насыщенности 0% любой оттенок становится оттенком серого (определяется только яркостью). При 100% насыщенности вы получите самую чистую и яркую версию этого оттенка.
Как работает легкость?
Яркость 0 % всегда соответствует черному цвету, независимо от оттенка/насыщенности. 100% всегда белый. 50% дает чистую, самую яркую версию цвета. Значения от 0 до 50 % – более темные оттенки, 50 – 100 % – более светлые оттенки.