Конвертер цветов (HEX, RGB, HSL — мгновенно)
Введите hex-код, RGB-тройку или значение HSL — другие форматы обновляются мгновенно с видимым образцом цвета. Полезно для дизайнеров, веб-разработчиков и всех, кто сопоставляет цвета между инструментами.
hex: #0ea5e9
rgb(14, 165, 233)
hsl(199, 89%, 48%)Как это работает
Три способа описать один цвет
HEX, RGB и HSL — три нотации для sRGB-цвета. HEX — сокращение RGB: #FF6B35 означает красный=255, зелёный=107, синий=53. RGB описывает цвет через количество красного, зелёного и синего света (от 0 до 255 каждый). HSL перекодирует тот же RGB-цвет через оттенок (какой цвет), насыщенность (яркость цвета) и светлость (яркость).
Все три эквивалентны — можно конвертировать туда-обратно без потерь. Дизайнеры предпочитают HSL для настройки тонов (повышение светлости сохраняет оттенок стабильным), тогда как разработчики обычно вставляют HEX из дизайн-инструментов прямо в CSS. RGB чаще всего встречается при работе с API обработки изображений или canvas.
Когда использовать каждый формат
HEX: копирование из дизайнов, экспорт Figma, брендбуки, CSS-литералы цвета. Лаконичен, но не читается напрямую.
RGB: программная работа с цветом (canvas, обработка изображений), проверка доступности (расчёт контраста работает в линейном RGB), когда нужны точные целочисленные значения.
HSL: настройка цветов на ощущение — «слегка более насыщенная версия», «более тёмный вариант для состояния hover», или генерация палитры с шагом по оттенку. Для таких задач значительно удобнее, чем HEX.
Чего нет в этом инструменте
Альфа-канал (прозрачность) пока не включён — но #RRGGBBAA работает во всех современных браузерах, если добавить два шестнадцатеричных символа для непрозрачности (00 = прозрачный, FF = непрозрачный).
Более широкие цветовые пространства (P3, Rec.2020, OKLCH) также не охвачены. Для большинства веб-задач sRGB-форматы HEX/RGB/HSL — правильный выбор. Для HDR или дисплеев с расширенной цветовой гаммой изучите синтаксисы CSS Color Module Level 4.
Частые вопросы
›Можно ли конвертировать HSL в HEX без потери точности?
В основном да. HSL хранится как целые градусы и проценты, поэтому 360 × 101 × 101 = 3,7 млн значений HSL отображаются на 16,7 млн комбинаций RGB. В крайних случаях возможно небольшое округление. Используйте HEX как канонический формат для точного хранения.
›Поддерживаются ли 3-значные HEX-коды?
Да. #f60 воспринимается как #ff6600. Оба раскрываются в одну и ту же RGB-тройку.
›Почему насыщенность и светлость HSL идут от 0 до 100, а не до 360?
Оттенок измеряется в градусах (0–360 по кругу цветового колеса). Насыщенность и светлость — проценты (0–100).
›HSL и HSB (HSV) — одно и то же?
Нет. HSV (и HSB) заменяют «светлость» на «значение» (другая модель яркости). L=50% в HSL — полный цвет; V=100% в HSV — полный цвет. Используется HSL, потому что он соответствует CSS.
›Поддерживается ли прозрачность?
Пока нет. Добавьте два символа альфа к HEX (например, #00000080 для 50% чёрного).
›Почему RGB не показывает дроби 0–1?
Потому что большинство контекстов (CSS, дизайн-инструменты) используют целые числа 0–255. Для работы с шейдерами разделите на 255, чтобы получить дроби 0–1.
›Откуда дизайнеры берут нужные цвета?
Из брендбуков, дизайн-токенов или генераторов палитр. Инструмент проверки контраста позволяет убедиться, что пара цветов переднего/фонового плана соответствует WCAG AA/AAA.
›Калькулятор точен?
Да. Используется стандартная математика преобразования sRGB. Различия при обратном преобразовании возникают только из-за целочисленного квантования HSL.
Похожие инструменты
Обновлено: