Перейти к содержимому

Конвертер HSL → Hex онлайн

HSL/HSLA в hex-коды с живым превью. Бесплатно для дизайна и разработки.Runs locally in your browser; files never leave your device.Runs locally in your browser;

Вывод

Превью

Hex → HSL

Приватно · Быстро · Бесплатно

Стили живут в HSL, а дизайн-спека — hex: этот мост экономит ручную конвертацию.

Прозрачный hsla становится 8-значным hex, когда альфа важна; вынесите opacity отдельно, если цель не читает alpha-hex.

Как конвертировать

  1. Вставьте HSL/HSLA
  2. Подтвердите образец
  3. Скопируйте hex

Когда это помогает

  • CSS-переменные в HSL, а сдача требует hex.
  • Быстрые hex-образцы из токенов темы.
  • Поймать ошибки каналов до хэндоффа.

Сценарии

  • Произвольный HSL в Tailwind → hex для вендора
  • Таблица в доках стандартизирована на hex

Советы

  • Насыщенность и светлота обычно в процентах.
  • Тон может включать `deg` или простое число.
  • Неверный синтаксис даёт ошибку — исправьте до валидного CSS.

Примеры

Ввод Вывод Примечание
hsl(9 100% 60%) Около #FF5733 Современный синтаксис через пробелы
hsla(..., 0.5) 8-значный hex С альфой

Частые вопросы о HSL→Hex

Поддержка `hsl(a b c / d)`?
Распространённые современные формы разбираются по возможности; при необходимости вернитесь к синтаксису через запятую.
Чуть мимо пипетки?
Округление hex — обычно незаметно для UI.

Связанные инструменты