Конвертер цветов
Переводите цвета между HEX, RGB, HSL и OKLCH с живым предпросмотром
Об этом инструменте
Введите цвет в любой распространённой нотации — #hex, rgb(), hsl() или именованный цвет CSS — и получите все форматы сразу: HEX, RGB, HSL и OKLCH, рядом с живым образцом. Альфа-каналы сохраняются во всех форматах, а вывод использует современный синтаксис CSS (каналы через пробел), который чисто вставляется в актуальные стили.
OKLCH включён, потому что именно туда движется цвет в CSS: в отличие от HSL, его ось светлоты перцептивно равномерна, поэтому два цвета с одинаковым L действительно выглядят одинаково яркими, а подстройка тона не меняет случайно воспринимаемую яркость. Конвертация существующей палитры в OKLCH — первый шаг к построению согласованных цветовых шкал.
Математика конвертации выполняется локально по опубликованным преобразованиям sRGB↔OKLab, и значения проходят туда и обратно без потерь: RGB, который вы получаете из HSL-ввода, — ровно тот, который вычислил бы браузер.
Частые вопросы
- Почему значения светлоты в HSL и OKLCH расходятся?
- Светлота HSL — геометрическое свойство значений RGB, а не человеческого зрения: жёлтый hsl(60 100% 50%) выглядит куда ярче синего hsl(240 100% 50%) при одинаковом L. Ось L в OKLCH спроектирована под восприятие, поэтому равный L означает равную видимую яркость. Это расхождение — сама причина существования OKLCH.
- Что означает альфа и где она стоит в каждом формате?
- Альфа — это непрозрачность, от 0 (прозрачный) до 1 (непрозрачный). В 8-значном hex это последний байт (#RRGGBBAA); в современном функциональном синтаксисе она идёт после слэша: rgb(76 141 255 / 0.5). Этот конвертер автоматически переносит альфу через все форматы.
- Каждый ли цвет OKLCH можно показать в sRGB?
- Нет — OKLCH покрывает широкие гаммы, и у некоторых сочетаний хромы и светлоты нет эквивалента в sRGB. Конвертация из sRGB (как делает этот инструмент) всегда остаётся представимой; в обратную сторону цвета за пределами гаммы приходится обрезать или отображать, поэтому насыщенный зелёный P3 выглядит тусклее на sRGB-экране.
- Почему rgb(76 141 255) через пробелы, а не через запятые?
- CSS Color Module Level 4 стандартизировал каналы через пробел с необязательной /alpha, и каждый современный браузер это поддерживает. Форма с запятыми всё ещё работает, но форма с пробелами — та, что используют новые спецификации (и этот инструмент).