Конвертер цветов HEX, RGB и HSL
Перевод цвета из HEX в RGB и HSL с разбором по каналам.
Заполните поля — результат появится здесь автоматически.
Преобразует текстовый код sRGB из трёх или шести шестнадцатеричных цифр в RGB и HSL. Например, #F0A разворачивается в #FF00AA удвоением каждой цифры. RGB и развёрнутый HEX сохраняют исходные байты; HSL округляется для вывода. CSS-строки используют десятичную точку во всех языках, поэтому их можно копировать в таблицу стилей.
Как считается
Формула и логика
Каналы r,g,b — целые байты от 0 до 255. Для HSL они делятся на 255: светлота L=(max+min)/2, насыщенность S=Δ/(1−|2L−1|) при Δ=max−min>0, тон определяется каналом максимума. При Δ=0 насыщенность равна нулю, а тон условно записывается как 0°. Светлота HSL не является физической яркостью или показателем контраста. Тон округляется до градуса, S и L — до двух знаков процента.
Пример
#2E86DE → rgb(46, 134, 222), округлённый CSS hsl(210, 72.73%, 52.55%). #F0A → #FF00AA → rgb(255, 0, 170). Десятичные точки в hsl() обязательны для записи CSS.
Поля и единицы
- Шестнадцатеричный код цвета — без единицы
Как пользоваться
- — Введите HEX как текст: #2E86DE, 2E86DE или #F0A.
- — Читайте точные RGB-байты и развёрнутый HEX.
- — Копируйте CSS-строки RGB/HSL; округлённый HSL может немного изменить цвет при обратном переводе.
Методика и ограничения
- Методика расчёта
- Формула и логика
- Источник данных или нормы
- W3C CSS Color 4: HEX и синтаксис HSL
- Ограничение
- Поддерживаются только непрозрачные коды HEX из 3/6 цифр в sRGB. Коды 4/8 цифр с альфа-каналом, вход RGB/HSL, цветовые профили и проверка доступности контраста не рассчитываются.
FAQ
Почему #F0A превращается в #FF00AA?
Короткая запись разворачивается удвоением каждого знака — так устроен сам формат. Дописать нули было бы другим цветом: #F00A00 вместо #FF00AA.
Обязательно ли ставить решётку?
Нет, она необязательна, и регистр букв тоже не важен. Подойдут и #2e86de, и 2E86DE.
Что означает яркость в списке?
Это светлота из HSL, выраженная в процентах: 0 — чёрный, 100 — белый, около 50 — чистый насыщенный цвет. Она же стоит третьим числом в записи hsl().
Чем светлота HSL отличается от воспринимаемой яркости?
Светлота считается по формуле, одинаковой для всех каналов, а глаз воспринимает зелёный намного светлее синего. Поэтому два цвета с одинаковой светлотой HSL могут выглядеть по-разному, и для проверки контраста нужна отдельная мера.
Теряется ли точность при переводе?
RGB и развёрнутый HEX сохраняют исходные байты точно. HSL округлён: тон до целого градуса, насыщенность и светлота до двух знаков. Обратное преобразование округлённого HSL может дать другие RGB-байты.