Конвертер цветов
Введите hex-код цвета, чтобы увидеть его эквиваленты в RGB и HSL со значениями каналов красного, зеленого и синего.
Как использовать этот конвертер цветов
- Введите HEX-код цвета
Введите 6-значный HEX-код в поле (например, FF6B35 или 00FF88). Символ # указывать не нужно.
- Проверьте значения RGB
Результаты для каналов Red (красный), Green (зеленый) и Blue (синий) показывают значения от 0 до 255 для каждого компонента.
- Посмотрите результат в HSL
Ознакомьтесь с результатом HSL: тон (0–360°), насыщенность и яркость — это удобно для корректировки цвета.
Как работает этот конвертер цветов
Этот инструмент преобразует шестнадцатеричный код цвета в форматы RGB (красный, зеленый, синий) и HSL (тон, насыщенность, светлота). Каждая пара hex-символов соответствует 8-битному значению канала (0–255), а преобразование в HSL использует стандартные математические формулы цветового пространства.
R = hex[0:2] → десятичное; G = hex[2:4] → десятичное; B = hex[4:6] → десятичное Hex #FF6B35 → RGB(255, 107, 53) → HSL(16, 100%, 60%).
Hex 000000 → RGB(0, 0, 0) → HSL(0, 0%, 0%) — чистый черный.
Hex FFFFFF → RGB(255, 255, 255) → HSL(0, 0%, 100%) — чистый белый. Hex 808080 → RGB(128, 128, 128) → HSL(0, 0%, 50%) — средне-серый.
- ✓ Введенное значение является корректным 6-значным hex-кодом цвета.
- ✓ Альфа-канал не поддерживается в этой версии.
- Преобразование в CMYK требует цветового профиля и не включено в этот инструмент.
Понимание цветовых моделей
HEX, RGB и HSL — это разные способы описания одного и того же цвета. HEX кодирует RGB в виде 6-значной шестнадцатеричной строки: каждая пара символов соответствует одному 8-битному каналу (0–255). RGB выражает те же значения тремя числами — аддитивными основными цветами, которые излучают экраны. HSL (Hue, Saturation, Lightness) — это цилиндрическая модель: тон (hue) — это угол на цветовом круге (0° — красный, 120° — зеленый, 240° — синий), насыщенность (saturation) — интенсивность цвета, а яркость (lightness) — его светлота. Дизайнеры часто предпочитают HSL при программной настройке цветов: изменение только яркости позволяет затемнить или осветлить цвет без изменения тона, а регулировка насыщенности меняет его сочность.
Сценарии использования конвертации цветов для разработчиков
Разработчики конвертируют цвета при создании дизайн-систем, реализации тем, генерации цветовых палитр и отладке CSS. Дизайн-токены часто хранят цвета в формате HEX; преобразование в RGB или HSL позволяет выполнять вычисления в реальном времени, такие как наложение прозрачности или проверка контрастности для доступности. Переключателям тем может потребоваться создание более светлых или темных вариантов базового цвета с помощью HSL. Автоматизированные инструменты доступности конвертируют цвета для расчета яркости и коэффициентов контрастности. При отладке макета или ошибок в темах просмотр HEX-значения в формате RGB или HSL помогает определить, какой канал настроен неверно. Конвертация цветов также используется в визуализации данных, библиотеках графиков и динамическом оформлении интерфейсов.
Часто задаваемые вопросы
Можно ли ввести 3-значный hex-код?
В данный момент инструмент ожидает 6-значный код. Для 3-значных сокращений, таких как F60, сначала разверните их до FF6600.
Что такое HSL?
HSL означает Hue (тон), Saturation (насыщенность), Lightness (светлота). Это альтернативный способ описания цветов, который некоторые дизайнеры считают более интуитивным, чем RGB.