Конвертируйте любой HEX-цвет в HSL прямо в браузере — поддерживаются 3-значные, 6-значные и 8-значные HEX с альфой. Бесплатно, мгновенно, без регистрации, ваши цвета никогда не покидают страницу.
Светлые оттенки
Тёмные оттенки
Тона
Гармонии
— — — — — Конвертер HEX в HSL — это небольшая утилита, которая превращает HEX-код цвета (`#3b82f6`) в цилиндрическую тройку Hue / Saturation / Lightness, кодирующую тот же цвет sRGB (`hsl(217 91% 60%)`). HEX-коды — это лаконичные строки по основанию 16, которые дизайнеры и разработчики вставляют между Figma, Sketch, Photoshop, PDF-брендбуками и CSS-таблицами стилей — три 8-битных канала, упакованных в 6-символьную форму `#RRGGBB`, привязанную к цветовому пространству sRGB, определённому IEC 61966-2-1 в 1996 году. HSL — это цилиндрическое преобразование того же цветового пространства на три более дружественные дизайнерам оси: угол оттенка на цветовом круге, процент хроматической насыщенности и процент светлоты. Разработчики постоянно конвертируют HEX → HSL: чтобы определить брендовый цвет как CSS-переменную, а затем составить более светлые или тёмные оттенки, корректируя только L, чтобы кормить UI пипетки, отображающий Hue и SL как отдельные элементы управления, чтобы генерировать шкалы светлых и тёмных оттенков для дизайн-системы или чтобы выполнить рантайм-математику CSS-переменных через `hsl(from var(--primary) h s calc(l + 10%))` для производных токенов темы. Этот инструмент выполняет конвертацию вживую по мере ввода, без кнопки «Convert», на которую нужно нажимать, и поднимает каждый другой распространённый формат цвета (RGB, OKLCH, OKLAB, HSV, HWB, CMYK, плюс 148 именованных CSS-цветов) рядом с выводом HSL бесплатно.
**Сам формат HSL заслуживает более пристального взгляда.** HSL = Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Hue — это угловая позиция на цветовом круге — 0° красный, 60° жёлтый, 120° зелёный, 180° циан, 240° синий, 300° маджента, и 360° оборачивается обратно к красному. Saturation — это хроматическая интенсивность от 0% (ахроматический серый) до 100% (полностью хроматический, без серого содержания). Lightness — это яркость от 0% (чистый чёрный, независимо от hue или saturation) через 50% (чистый hue на полной chroma) до 100% (чистый белый, независимо от hue или saturation). Элви Рэй Смит опубликовал исходный вывод в 1978 году как часть раннего толчка компьютерной графики, чтобы дать дизайнерам координатные системы ближе к их когнитивной модели цвета, чем сырая адресация каналов RGB. Модель присутствует в CSS со времён CSS3 (2010) и поставляется в каждом браузере вплоть до IE 9. Исходный синтаксис CSS использовал запятые: `hsl(217, 91%, 60%)` для непрозрачного, `hsla(217, 91%, 60%, 0.5)` для цвета с альфой. CSS Color 4 (W3C Candidate Recommendation с 2022 года) добавил современную форму через пробел: `hsl(217 91% 60%)` и `hsl(217 91% 60% / 0.5)` с альфой через слэш — та же форма синтаксиса, что и у других функциональных нотаций CSS Color 4 (`rgb()`, `lab()`, `oklch()`, `color()`). Hue также можно выразить в turns (`hsl(0.6turn 91% 60%)`) или radians (`hsl(3.787rad 91% 60%)`), все эквивалентны канонической форме градусов. Каждый вечнозелёный браузер парсит каждую синтаксическую разновидность; инструмент по умолчанию выдаёт современную форму через пробел.
Математика конвертации идёт чисто в обоих направлениях. **HEX → HSL** — это двухшаговый конвейер. Сначала распарсите 6-значный HEX `#RRGGBB` как три 2-значных числа по основанию 16 через `parseInt(hex.slice(1, 3), 16)` и т. д., чтобы получить целые каналы RGB в 0–255. Во-вторых, нормализуйте каждый канал к 0–1 делением на 255, затем вычислите `max = Math.max(r, g, b)`, `min = Math.min(r, g, b)`, `delta = max - min`. Lightness — это среднее max и min: `L = (max + min) / 2`. Saturation условна по lightness: когда L ≤ 0.5, `S = delta / (max + min)`; когда L > 0.5, `S = delta / (2 - max - min)`. Эквивалентно в форме CSS Color 4 §6.4: `S = delta / (1 - |2L - 1|)` (с S = 0, когда delta = 0). Hue — кусочно по тому, какой канал — max: когда R это max, `H = ((G - B) / delta) % 6`; когда G это max, `H = (B - R) / delta + 2`; когда B это max, `H = (R - G) / delta + 4`; умножьте на 60, чтобы масштабировать в градусы, прибавьте 360, если отрицательно. Обратное (HSL → HEX, через RGB) использует помощник `f(n) = L - a * max(-1, min(k-3, 9-k, 1))`, где `a = S * min(L, 1-L)` и `k = (n + H/30) mod 12`, применённый с n = 0, 8, 4 для получения R, G, B соответственно, затем масштабированный к 0–255 и закодированный в HEX.
**Почему HSL по-прежнему полезен.** Интуитивные слайдеры — корректировка L предсказуемо осветляет или затемняет без нарушения идентичности hue, тогда как корректировка канала RGB даёт менее предсказуемый сдвиг цвета. Рантайм-математика CSS — современные браузеры поддерживают `hsl(from var(--primary) h s calc(l + 10%))`, чтобы выводить токены темы во время рендера. Когниция дизайнеров — дизайнеры, выросшие на пипетках HSV, рассуждают о цвете в терминах hue + chroma, даже когда файл поставляется в HEX. **Проблема HSL** в том, что её ось Lightness не перцептивно равномерна — зелёный при L=50% выглядит видимо ярче, чем синий при L=50%, потому что HSL наследует гамма-причуды sRGB и обрабатывает каждый hue как эквивалентный по шкале L. Когда вам нужна перцептивная равномерность (генерация палитры, где каждый шаг должен выглядеть одинаково ярким, вычисление токенов тёмного режима, которое не сделает случайно синий текст труднее читаемым, чем зелёный), обращайтесь к OKLCH — тот же инструмент поднимает оба, поэтому выбор в одном взгляде.
Рабочий процесс HEX → HSL этого инструмента — это одно направление семейства из 5 спиц, которые все используют один и тот же базовый унифицированный конвертер цветов. Специализированный унифицированный конвертер цветов — это хаб: он показывает все 9 форматов одновременно редактируемыми и это правильный инструмент, когда вашему рабочему процессу нужно больше, чем HEX и HSL. Однонаправленные спицы целятся в конкретные поисковые интенты Google: конвертер HEX в RGB для направления canvas и аппаратуры, конвертер RGB в HEX для обратного, конвертер HEX в OKLCH для современных перцептивно-равномерных дизайн-систем (Tailwind v4 и shadcn оба сейчас по умолчанию используют OKLCH) и конвертер HEX в CMYK для приближений подготовки к печати. Все пять спиц и хаб используют один и тот же парсинговый движок и ту же математику конвертации, поэтому результаты гарантированно идентичны во всём семействе. Каждая конвертация выполняется локально в браузере — ваши HEX-коды никогда не загружаются, никогда не логируются и ноль сетевых запросов срабатывает по мере ввода. Проверьте в DevTools.
// Convert a hex color string to {h, s, l, alpha} per CSS Color 4 §6.4
// h in 0-360, s and l in 0-1, alpha in 0-1.
function hexToHsl(input) {
let h = input.trim().replace(/^#/, '');
if (h.length === 3 || h.length === 4) h = h.split('').map(c => c + c).join('');
const r = parseInt(h.slice(0, 2), 16) / 255;
const g = parseInt(h.slice(2, 4), 16) / 255;
const b = parseInt(h.slice(4, 6), 16) / 255;
const alpha = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
const L = (max + min) / 2;
const S = delta === 0 ? 0 : delta / (1 - Math.abs(2 * L - 1));
let H = 0;
if (delta !== 0) {
if (max === r) H = ((g - b) / delta) % 6;
else if (max === g) H = (b - r) / delta + 2;
else H = (r - g) / delta + 4;
H = (H * 60 + 360) % 360;
}
return { h: H, s: S, l: L, alpha };
}
console.log(hexToHsl('#3b82f6')); // { h: 217, s: 0.91, l: 0.60, alpha: 1 } 3-значный `#F73`, 4-значный с альфой `#F738`, 6-значный `#3b82f6`, 8-значный с альфой `#FF573380`, плюс вариант без `#` для каждого. Парсер нормализует их все в один и тот же внутренний цвет перед выводом HSL, поэтому вы можете вставить ту форму, которую использует ваш источник, без ручного раскрытия сокращения сначала. Регистр тоже нормализуется — `#3b82f6` и `#3B82F6` дают идентичный вывод HSL.
Поле HSL поднимает значение в современной форме CSS Color 4: `hsl(217 91% 60%)` для непрозрачных цветов, `hsl(217 91% 60% / 0.5)` для цветов с альфой. Обе формы работают в каждом вечнозелёном браузере (Chrome 65+, Safari 13+, Firefox 52+). Legacy-форма через запятую `hsl(217, 91%, 60%)` — это одна механическая замена, если её требует ваша цель; современный синтаксис предпочтительнее в новом коде, потому что выравнивается с другими функциональными синтаксисами CSS Color 4.
Хотя эта спица целится конкретно в HEX → HSL, общий базовый конвертер хранит канонический цвет как тройку OKLCH внутри. Это значит, что переходы туда-обратно HEX → HSL → RGB → OKLAB → HEX происходят без пошагового дрейфа плавающей точки; legacy-конвертеры, маршрутизирующие через HSL как точку опоры, накапливают ошибку округления и могут сместить hue на несколько градусов за несколько конвертаций. Опора на OKLCH удерживает каждый другой формат математически привязанным к одной и той же точке-источнику.
8-значный и 4-значный HEX с альфой (`#RRGGBBAA` и `#RGBA`) парсятся корректно. Конечная пара отображается на 0–1 float альфы: `00` → 0, `80` → 0.502, `FF` → 1. Вывод по умолчанию использует синтаксис со слэшем из CSS Color 4 (`hsl(217 91% 60% / 0.5)`); legacy-форма `hsla(217, 91%, 60%, 0.5)` — одна замена. Полезно для миграции дизайн-токенов, где значения альфы могли быть похоронены в 8-значных HEX-кодах.
Тот же HEX, который вы вставляете, также управляет RGB, HSV, HWB, OKLCH, OKLAB, CMYK и ближайшим именованным CSS-цветом — все видны с одного взгляда на одной странице. Вы никогда не заперты только в HEX → HSL. Если коллеге нужна тройка OKLCH для токена Tailwind v4 (где перцептивная равномерность важнее, чем гамма-причудливая L у HSL), ближайший именованный цвет для прозы документации или кортеж RGB для вызова canvas — значения уже там, со своими кнопками Copy.
Пропустите HEX через инструмент, и ряд контраста сразу же оценит его против белого и чёрного, используя WCAG 2.1 (регуляторный пол: 4.5:1 для основного текста, 7:1 для AAA) и APCA Lc (предложенный преемник WCAG 3: цель `|Lc| ≥ 75` для основного текста). Полезно, когда вы только что конвертировали брендовый HEX в HSL и хотите проверить, что результирующий цвет (или вариант с подстроенной светлотой) действительно читаем как цвет основного текста, прежде чем отгружать.
Под пипеткой раздел Copy as code превращает текущий цвет в готовые к вставке сниппеты для пяти платформ: CSS custom property (`--color-brand: hsl(217 91% 60%)`), токен Tailwind v4 `@theme`, литерал SwiftUI `Color(hue:saturation:brightness:)`, константа Jetpack Compose `Color.hsl(217f, 0.91f, 0.60f)`, Flutter `HSLColor.fromAHSL(...)`. Точный синтаксис, который ожидает каждая платформа, готовый бросить в asset-каталог iOS, файл темы Android или Flutter `ThemeData`.
Весь парсинг HEX, конвертация HSL, оценка контраста и генерация палитр работают локально в браузере. Ваши HEX-коды никогда не передаются, никогда не логируются ни на одном сервере, никогда не анализируются. Ноль сетевых запросов по мере ввода — проверьте в DevTools. Безопасно для необъявленных брендовых палитр, внутренних дизайн-токенов, черновых мокапов под NDA и любой другой конфиденциальной работы с цветом.
Текущий цвет автоматически кодируется в URL-хэш как `#hex=3b82f6` при каждом изменении. Скопируйте URL, вставьте в тред Slack или GitHub-issue, и любой, кто откроет ссылку, попадёт на тот же HEX с той же тройкой HSL. Хэш живёт только в адресной строке и никогда не передаётся на сервер (браузеры не включают URL-фрагменты в HTTP-запросы), поэтому даже общая ссылка не утекает цвет никакой третьей стороне.
Дефолтный результат Google по «hex to hsl» — однонаправленная форма с HEX на входе и HSL на выходе, других форматов не видно. Полезно для одноразовых проверок при переходе из поиска. Отсутствуют OKLCH, проверка контраста, определение цветового охвата, обработка альфы и одновременный многоформатный вид. Этот инструмент выигрывает по каждой оси, кроме голого случая одной конвертации.
Долгоживущие SEO-страницы по каждому цвету с глубокими метаданными: конвертации, палитры, гармонии, градиенты для любого запрашиваемого HEX. UI устарел (начало 2010-х), нет поддержки OKLCH, нет контраста APCA, нет обработки широкого охвата. Сильны для SEO-обнаружения конкретного HEX через Google; слабее для активных рабочих процессов конвертации, где ввод в UX с едиными полями быстрее.
Дружественный к новичкам переключатель HEX/RGB/HSL на учебно-ориентированной странице, повсеместный в результатах поиска. Нет OKLCH, нет обработки альфы за пределами hsla, нет продвинутых возможностей. Полезен как справочник рядом с поясняющим контентом W3Schools. Этот инструмент выигрывает по каждой другой оси: больше форматов, перцептивная математика, цветовой охват + контраст + возможности CVD, современный экспорт кода для Tailwind v4 / SwiftUI / Compose / Flutter.
DevTools Chrome, Firefox и Safari все поставляют пипетку, которая переключается между HEX, RGB и HSL инлайн, когда вы кликаете на образец цвета в CSS-панели. Бесплатно, без установки, всегда доступно. Отсутствуют OKLCH, отсутствуют ссылки, которыми можно поделиться, отсутствует экспорт кода для не-веб-платформ (SwiftUI, Compose). Берите DevTools, когда уже отлаживаете CSS; берите этот инструмент, когда нужен кросс-платформенный вывод.
Сфокусированная пипетка HSL с живыми слайдерами hue/saturation/lightness и выводом HEX. Минимальный UI, хорош для быстрого исследования HSL. Отсутствуют OKLCH и более широкая сетка форматов; нет возможностей контраста или цветового охвата. Полезен как сфокусированный инструмент только для HSL; этот инструмент покрывает тот же рабочий процесс плюс 8 других видов форматов и перцептивные проверки.
SEO-страницы по каждому цвету, покрывающие множество пространств (HEX, RGB, HSL, HSV, CMYK, XYZ, CIELAB). Отсутствует современная поддержка OKLCH и UX редактирования с едиными полями. Автогенерированные страницы выглядят немного как content-farm, но данные конвертации корректны. Хорошо для копания в метаданных отдельных цветов через Google; этот инструмент быстрее для активных рабочих процессов.
#3b82f6
Вывод HSL: `hsl(217 91% 60%)`. Канонический рабочий процесс для дизайн-системы, построенной на HSL: определите бренд как `--primary: hsl(217 91% 60%)` один раз, затем составьте более светлые оттенки, корректируя только процент L — `hsl(217 91% 70%)` для hover-оттенка, `hsl(217 91% 80%)` для состояния disabled, `hsl(217 91% 90%)` для тонкой фоновой заливки. Hue и saturation остаются зафиксированными, поэтому семейство читается как когерентная шкала. Таблицам стилей на основе RGB нужны три согласованные правки каналов на каждый шаг; HSL нужна одна.
#FF5733
Вывод HSL: `hsl(11 100% 60%)`. Дизайнеры, рассуждающие о цвете в терминах hue + saturation + lightness (когнитивная модель, которую Мансел формализовал в 1905 году), часто хотят тройку HSL, даже когда файл-источник истины поставляется в HEX. Hue = 11° помещает этот цвет на красную сторону оранжевого клина; saturation = 100% означает, что канал полностью хроматический; lightness = 60% сидит на ступеньку выше средней точки. Однократная вставка HEX из Figma даёт соответствующий HSL, готовый бросить в ментальную пипетку дизайнера без ручного угадывания по цветовому кругу.
#3b82f6
Вывод HSL: `hsl(217 91% 60%)`. С тройкой HSL в руках генерация шкалы светлых оттенков — это одномерный свип: переведите L на 70% для `hsl(217 91% 70%)`, на 80% для `hsl(217 91% 80%)`, на 90% для `hsl(217 91% 90%)`, чтобы подниматься к белому; опуститесь до 50%, 40%, 30% для более тёмных оттенков. Вся 9-шаговая шкала возникает из изменения одного числа. Светлые и тёмные оттенки остаются тонально связанными, потому что hue и saturation остаются постоянными — приём, который legacy дизайн-системы использовали до того, как OKLCH сделал перцептивно-равномерные шкалы дешёвыми.
#FF573380
Вывод HSL: `hsl(11 100% 60% / 0.5)`. Последняя пара (`80`) декодируется как `128/255 ≈ 0.502`, поднимается как альфа-канал через синтаксис со слэшем из CSS Color 4. Эквивалентная legacy-форма — `hsla(11, 100%, 60%, 0.5)`, которая поддерживалась во всех браузерах со времён IE 9 и которую ожидают старые препроцессоры. 8-значный HEX с альфой поставился нативно во всех вечнозелёных браузерах в 2018 году; до этого альфа должна была проходить через функцию `hsla()` явно.
Справочная таблица 10 самых часто конвертируемых HEX-кодов и их эквивалентов HSL — чистые primaries, чистые secondaries и два реальных брендовых цвета из палитры Tailwind.
Чистый чёрный. Lightness на 0% — отсутствие излучаемого света. Hue и saturation по соглашению равны 0 для серых.
#000000 → hsl(0 0% 0%) Чистый чёрный на экране редко правильный дизайн-выбор — попробуйте `hsl(0 0% 7%)` или OKLCH lightness 0.1–0.15 для более мягкого основного текста.
Нужен перцептивно-равномерный вывод вместо этого? Попробуйте специализированный конвертер HEX в OKLCH — каждый шаг L выглядит одинаково ярким по hue, в отличие от HSL.
Чистый белый. Lightness на 100% — самый яркий возможный цвет sRGB. Hue и saturation по соглашению равны 0 для серых.
#FFFFFF → hsl(0 0% 100%) Чисто белые фоны могут вызывать усталость глаз в тёмной среде — попробуйте `hsl(0 0% 98%)` или OKLCH 0.98 для более тёплых альтернатив.
Нужен перцептивно-равномерный вывод вместо этого? Попробуйте специализированный конвертер HEX в OKLCH — каждый шаг L выглядит одинаково ярким по hue, в отличие от HSL.
Чистый красный. Hue на 0° (стартовая позиция круга), saturation полностью хроматическая, lightness на средней точке, где живут чистые hue.
#FF0000 → hsl(0 100% 50%) Чистый красный очень насыщен и редко вписывается в брендовую палитру — большинство «красных» брендовых цветов сидят ближе к `hsl(0 73% 50%)` (#DC2626).
Нужен перцептивно-равномерный вывод вместо этого? Попробуйте специализированный конвертер HEX в OKLCH — каждый шаг L выглядит одинаково ярким по hue, в отличие от HSL.
Чистый зелёный. Hue на 120° (треть пути по кругу), saturation полностью хроматическая, lightness на 50%. Именованный CSS-цвет `lime`.
#00FF00 → hsl(120 100% 50%) Ключевое слово CSS `green` разрешается в #008000 (hsl(120 100% 25%)), а не #00FF00 — частый источник путаницы. Используйте `lime` для чистого hsl(120 100% 50%).
Нужен перцептивно-равномерный вывод вместо этого? Попробуйте специализированный конвертер HEX в OKLCH — каждый шаг L выглядит одинаково ярким по hue, в отличие от HSL.
Чистый синий. Hue на 240° (две трети пути по кругу), saturation полностью хроматическая, lightness на средней точке.
#0000FF → hsl(240 100% 50%) Чистый синий на белом фоне проваливает контраст WCAG AA (3.7:1) — рассмотрите `hsl(224 76% 48%)` (Tailwind blue-700) для основного текста.
Нужен перцептивно-равномерный вывод вместо этого? Попробуйте специализированный конвертер HEX в OKLCH — каждый шаг L выглядит одинаково ярким по hue, в отличие от HSL.
Циан. Hue на 180° (средняя точка круга, напротив красного), saturation полностью хроматическая, lightness на средней точке чистого hue. Именованный CSS-цвет `cyan` или `aqua`.
#00FFFF → hsl(180 100% 50%) Циан сидит напротив красного на круге (180°/0°), делая его естественным комплементарным партнёром гармонии для любого брендового цвета из красного семейства.
Нужен перцептивно-равномерный вывод вместо этого? Попробуйте специализированный конвертер HEX в OKLCH — каждый шаг L выглядит одинаково ярким по hue, в отличие от HSL.
Маджента. Hue на 300° (пять шестых по кругу), saturation полностью хроматическая, lightness на средней точке чистого hue. Именованный CSS-цвет `magenta` или `fuchsia`.
#FF00FF → hsl(300 100% 50%) Маджента сидит напротив зелёного на круге (300°/120°), делая её естественным комплементарным партнёром гармонии для любого брендового цвета из зелёного семейства.
Нужен перцептивно-равномерный вывод вместо этого? Попробуйте специализированный конвертер HEX в OKLCH — каждый шаг L выглядит одинаково ярким по hue, в отличие от HSL.
Жёлтый. Hue на 60° (одна шестая по кругу, между красным и зелёным), saturation полностью хроматическая, lightness на средней точке чистого hue.
#FFFF00 → hsl(60 100% 50%) Жёлтый при hsl(60 100% 50%) выглядит намного ярче, чем красный при hsl(0 100% 50%) — яркий пример перцептивной неравномерности HSL. OKLCH нормализует это.
Нужен перцептивно-равномерный вывод вместо этого? Попробуйте специализированный конвертер HEX в OKLCH — каждый шаг L выглядит одинаково ярким по hue, в отличие от HSL.
Дефолтный брендовый blue-500 Tailwind CSS — канонический «веб-синий» середины 2020-х. Используется в бесчисленных дашбордах, маркетинговых сайтах и админ-инструментах.
#3b82f6 → hsl(217 91% 60%) Tailwind v4 переопределяет blue-500 в OKLCH (`oklch(0.629 0.193 263.4)`) для перцептивно-равномерных шкал — HSL остаётся fallback v3.
Нужен перцептивно-равномерный вывод вместо этого? Попробуйте специализированный конвертер HEX в OKLCH — каждый шаг L выглядит одинаково ярким по hue, в отличие от HSL.
Дефолтный rose-500 Tailwind CSS — высоконасыщенный розово-красный, часто используемый для акцентных кнопок, состояний оповещения и брендового контраста.
#f43f5e → hsl(350 89% 60%) Hue rose-500 (350°) сидит чуть перед красным (0°/360°) на круге — небольшой розовый сдвиг, который читается как более тёплый, чем чистый красный.
Нужен перцептивно-равномерный вывод вместо этого? Попробуйте специализированный конвертер HEX в OKLCH — каждый шаг L выглядит одинаково ярким по hue, в отличие от HSL.
Бросьте любое HEX-значение во ввод HEX — с ведущим `#` или без, в 3-значном сокращении (`#F73`), 6-значной полной форме (`#3b82f6`), 4-значном альфа-сокращении (`#F738`) или 8-значной альфа-полной форме (`#FF573380`). Инструмент нормализует все пять входных форм в один и тот же канонический цвет внутри. Регистр не имеет значения (`#3b82f6` и `#3B82F6` парсятся идентично). Невалидные символы или неверное число цифр дают тихую инлайн-ошибку; валидный HEX обновляет каждое другое поле формата в реальном времени, включая HSL.
Поле HSL под полем HEX показывает соответствующее значение `hsl()` в современном синтаксисе через пробел из CSS Color 4: `hsl(217 91% 60%)` для непрозрачного цвета, `hsl(217 91% 60% / 0.5)` для цвета с альфой. Hue — целый градус от 0 до 360; saturation и lightness — целые проценты от 0 до 100. Значения округлены для читаемости отображения — внутренний источник истины OKLCH в инструменте означает, что базовая точность — float, поэтому переходы туда-обратно обратно в HEX остаются стабильными.
У каждой карточки формата есть кнопка Copy справа. Один клик — и значение оказывается в буфере обмена; метка кнопки кратко переключается на «Copied!», чтобы вы знали. Скопированная строка — это канонический синтаксис CSS Color 4 (`hsl(217 91% 60%)`); если цели нужна legacy-форма через запятую (`hsl(217, 91%, 60%)`), конвертация механическая. Для платформенно-специфического вывода (Tailwind v4, SwiftUI, Compose, Flutter) используйте раздел Copy as code под пипеткой — эти сниппеты выводят формат, который каждая платформа ожидает нативно.
Тот же HEX, который вы вставляете, зажигает и остальные поля форматов — RGB для вызовов canvas и аппаратуры, OKLCH и OKLAB для перцептивно-равномерных дизайн-систем, HSV и HWB для рабочих процессов с пипеткой у дизайнеров, CMYK для оценки печати и ближайший именованный CSS-цвет для документации и прозы. Вы никогда не заперты только в HEX → HSL. Если вам также нужна тройка OKLCH для блока `@theme` Tailwind v4 (где перцептивная светлота важнее, чем гамма-причудливая L у HSL), она прямо там, в поле OKLCH, со своей кнопкой Copy.
Под сеткой форматов — квадрат SL + слайдер оттенка + слайдер альфы для визуального исследования. Квадрат SL напрямую отображается на плоскость Saturation × Lightness у HSL: тяните вертикально, чтобы прогнать L с 0% до 100%, наблюдая, как поле HSL обновляется в реальном времени. Полезно для визуальной генерации светлого или тёмного оттенка перед фиксацией точного процента. На браузерах на базе Chromium (Chrome, Edge, Brave) кнопка EyeDropper активирует нативный API `EyeDropper` для сэмплирования любого пикселя на экране, включая за пределами окна браузера.
Зелёный при `hsl(120 100% 50%)` выглядит видимо ярче, чем синий при `hsl(240 100% 50%)`, хотя оба при L=50%. Генерация шкал светлых оттенков прогонкой L даёт визуально неровные результаты по hue — светлый конец зелёной шкалы поднимается быстрее, чем синей. Это структурное свойство HSL, наследующей гамма-причуды sRGB, а не баг в вашем коде. Для перцептивно-равномерных шкал переключитесь на OKLCH.
Прогоняем L в HSL для 9-шаговой палитры: hsl(120 100% 50%) и hsl(240 100% 50%) при одной и той же L Выглядят видимо разными по яркости — палитра ощущается неровной.
Прогоняем L в OKLCH вместо этого: oklch(0.7 0.2 130) и oklch(0.7 0.2 250) Выглядят одинаково ярко; палитра читается когерентно по всем hue.
Hue в HSL угловой — `hsl(370 91% 60%)` интерпретируется как `hsl(10 91% 60%)`, потому что 370° mod 360° = 10°. Анимация hue с 350° до 380° чисто оборачивается через 360°/0° (тонкая полоска красного), но линейная интерполяция с H=350 до H=10 неправильным путём идёт *длинной* дорогой через циан, зелёный, жёлтый — обход в 320°. Используйте `Math.min(diff, 360 - diff)`, чтобы выбрать короткий путь, или используйте встроенную интерполяцию hue в цветовой библиотеке.
Линейная интерполяция с H=350 до H=10: (350 + 10) / 2 = 180° (середина циан) Неверно — идёт длинной дорогой по кругу.
Интерполяция hue по короткому пути: midpoint = ((350 + 10 + 360) / 2) % 360 = 0° (середина красного) Идёт через красный, короткий путь по кругу.
HSL и HSV разделяют ось hue, но различаются третьей осью. Lightness у HSL симметрична — 0% чёрный, 50% чистый hue, 100% белый. Value у HSV асимметрична — 0% чёрный, 100% чистый hue, белый только когда Saturation опускается до 0. `hsl(0 100% 100%)` — это белый; `hsv(0 100% 100%)` — это чистый красный. Многие цветовые библиотеки и дизайн-инструменты (пипетка HSB у Photoshop, цветовая панель Sketch) используют HSV — копирование значений между двумя системами без конвертации даёт дико разные цвета.
Вставить значения HSV из Photoshop в CSS-правило hsl(): Photoshop HSB 0, 100, 100 (чистый красный) CSS hsl(0 100% 100%) рендерится как белый — совсем не тот цвет.
Конвертировать HSV → HSL перед вставкой в CSS: HSV 0, 100, 100 → HSL 0, 100%, 50% CSS hsl(0 100% 50%) рендерится как чистый красный — корректно.
Оси S и L у HSL требуют суффикс `%` в CSS — `hsl(217 91 60)` — это ошибка парсинга в каждом браузере; корректная форма — `hsl(217 91% 60%)`. Только Hue безразмерен (его единица — градусы, но суффикс опционален). Многие ad-hoc-конвертеры забывают выдавать знаки процента в своём выводе HSL, выдавая невалидный CSS, который тихо проваливается при вставке. Инструмент всегда выдаёт знаки процента в поле HSL.
Выдать HSL без знаков процента: hsl(217 91 60) Ошибка парсинга CSS — каждый браузер игнорирует всё правило.
Выдать HSL со знаками процента на S и L: hsl(217 91% 60%) Валидный CSS — работает в каждом вечнозелёном браузере и IE 9+.
Конвертеры
Конвертация между системами счисления — двоичной, hex, десятичной, восьмеричной и любой базой 2-36 мгновенно. Бесплатно, приватно — вся обработка в браузере.
Конвертеры
Конвертируйте HEX в RGB, HSL, OKLCH, OKLAB и CMYK прямо в браузере — копируйте любой формат в один клик. Бесплатно, без регистрации, ваши цвета никогда не покидают страницу.
Конвертеры
Конвертируйте HEX-цвета в CMYK прямо в браузере. Наивное приближение на основе sRGB для предпросмотра печати. Бесплатно, без регистрации, ваши цвета остаются локально.
Конвертеры
Конвертируйте HEX в OKLCH для токенов дизайна Tailwind v4. Живой перцептивно-равномерный вывод с предупреждениями цветового охвата Display P3. Бесплатно, только в браузере.
Конвертеры
Конвертируйте любой HEX-код цвета в RGB прямо в браузере — поддерживаются 3-значные, 6-значные и 8-значные HEX с альфой. Бесплатно, мгновенно, без регистрации, ваши цвета никогда не покидают страницу.
Конвертеры
Сжимайте JPEG, PNG и WebP до 80% меньше — в браузере, без загрузки. Batch до 20 изображений, регулировка качества, сравнение «до и после». Бесплатно и приватно.