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

Преобразование значений цвета HEX в HSL для отображения на экране

> Каноническая страница: https://elysiatools.com/ru/tools/hex-to-hsl-converter

- **Категория:** Design

- **Ключевые слова:** hex, hsl, цвет, конвертер, экран, веб, шестнадцатеричный, оттенок, насыщенность, яркость

## Обзор

Конвертер HEX в HSL позволяет мгновенно преобразовывать шестнадцатеричные коды цветов в формат HSL (оттенок, насыщенность, яркость), который удобнее использовать при настройке цветовых схем и динамических стилей в веб-разработке.

## Входные данные

- **Ввод HEX** (textarea): Enter HEX values, one per line: #ff0000 #00ff00 #ffffff #ff000080 #00ff0080 f00 0f0 00f f08 0f8
- **Формат вывода** (select)

## Когда использовать

- При адаптации CSS-стилей для работы с переменными яркости и насыщенности.
- Когда необходимо перевести палитру из графического редактора в формат, понятный для веб-браузеров.
- Для массовой обработки списка HEX-кодов при создании дизайн-системы проекта.

## Как это работает

- Введите один или несколько HEX-кодов (например, #ff0000 или f00) в поле ввода, каждый с новой строки.
- Выберите подходящий формат вывода: стандартный CSS, компактный или с метками параметров.
- Нажмите кнопку конвертации, чтобы получить готовые значения HSL для использования в коде.

## Сценарии использования

- Создание динамических цветовых тем, где яркость цвета меняется при наведении курсора.
- Генерация палитр для UI-компонентов на основе базового корпоративного цвета.
- Быстрая конвертация дизайн-макетов в CSS-переменные для фронтенд-разработки.

## Частые вопросы

### Что такое HSL?

HSL расшифровывается как Hue (оттенок), Saturation (насыщенность) и Lightness (яркость). Это цветовая модель, которая интуитивно понятнее для человека, чем HEX.

### Поддерживает ли инструмент короткие HEX-коды?

Да, конвертер корректно обрабатывает как полные 6-значные коды, так и сокращенные 3-значные форматы.

### Можно ли конвертировать цвета с прозрачностью?

Да, если вы вводите 8-значный HEX-код (с альфа-каналом), инструмент преобразует его в формат HSLA.

### Нужно ли вводить символ # перед кодом?

Нет, инструмент распознает HEX-коды как с символом решетки, так и без него.

### В каком формате лучше выводить данные для CSS?

Для вставки в стили лучше всего подходит формат 'css', который выдает стандартную запись hsl(h, s%, l%) или hsla(h, s%, l%, a).

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

- [Конвертер Adobe RGB в CMYK](https://elysiatools.com/ru/tools/adobe-rgb-to-cmyk-converter): Преобразование значений цвета Adobe RGB в формат CMYK для печати с поддержкой альфа-канала
- [Конвертер Adobe RGB в HEX](https://elysiatools.com/ru/tools/adobe-rgb-to-hex-converter): Преобразование значений цвета Adobe RGB в формат HEX для веб-дизайна
- [Конвертер Adobe RGB в HSL](https://elysiatools.com/ru/tools/adobe-rgb-to-hsl-converter): Преобразование значений цвета Adobe RGB в формат HSL для дизайн-работ
- [Конвертер Adobe RGB в HSV](https://elysiatools.com/ru/tools/adobe-rgb-to-hsv-converter): Преобразование значений цвета Adobe RGB в HSV/HSB для манипуляции цветом
- [Конвертер Adobe RGB в LAB](https://elysiatools.com/ru/tools/adobe-rgb-to-lab-converter): Преобразование значений цвета Adobe RGB в цветовое пространство LAB для анализа цвета с поддержкой альфа-канала
- [Конвертер Adobe RGB в LCH](https://elysiatools.com/ru/tools/adobe-rgb-to-lch-converter): Преобразование значений цвета Adobe RGB в цветовое пространство LCH для интуитивной манипуляции цветом с поддержкой альфа-канала
- [Конвертер Adobe RGB в RGB](https://elysiatools.com/ru/tools/adobe-rgb-to-rgb-converter): Преобразование значений цвета Adobe RGB в формат sRGB для веб-отображения
- [Конвертер Adobe RGB в sRGB](https://elysiatools.com/ru/tools/adobe-rgb-to-srgb-converter): Преобразование значений цвета Adobe RGB в формат sRGB для веб-отображения

## Примеры

- [Примеры Обработки Изображений Web Python](https://elysiatools.com/ru/samples/web-image-processing-python): Примеры обработки изображений Web Python используя PIL/Pillow включая чтение, сохранение, изменение размера и преобразование формата
- [Примеры Hex/Unicode Конвертера](https://elysiatools.com/ru/samples/text-hex-unicode-formats): Тестовые примеры для преобразования hex и unicode escape-последовательностей
- [Примеры Обработки Изображений Web Rust](https://elysiatools.com/ru/samples/web-image-processing-rust): Примеры обработки изображений Web Rust включая чтение/запись, масштабирование и преобразование форматов
- [Примеры Обработки Изображений Web TypeScript](https://elysiatools.com/ru/samples/web-image-processing-typescript): Примеры обработки изображений Web TypeScript включая чтение/сохранение, масштабирование и конвертацию форматов