Конвертер цвета HEX/RGB/HSL
Вводите #rrggbb — получаете RGB, HSL по стандартному алгоритму и подсказку по контрасту: 4f46e5 — это hsl(243, 75%, 59%).
Проверено по 1 эталонному значению
Как считается
Одно поле.
- Вставьте цвет в HEX — с решёткой или без.
- Смотрите RGB и HSL сразу, при вводе.
- Забирайте подсказку, какой текст класть поверх фона.
Что важно знать
HEX — это RGB, записанный в шестнадцатеричной системе: две цифры на канал, от 00 до FF. Решётка необязательна, регистр тоже: 4f46e5 и #4F46E5 — один цвет.
HSL объясняет цвет человеку: оттенок в градусах по кругу (243 — синий), насыщенность в процентах, светлота тоже в процентах. Стандартный алгоритм берёт максимум и минимум каналов: светлота — их среднее, насыщенность и оттенок — из разницы.
Бонус для вёрстки — прикидка контраста: по яркости каналов калькулятор подсказывает, какой текст положить сверху, тёмный или белый. Прикидка грубая, точные проверки контраста делают по WCAG с гамма-коррекцией.
Частые вопросы
А короткая запись #fff?
Калькулятор ждёт шесть знаков. Разверните короткую руками: #fff — это ffffff, каждая цифра удваивается. Три знака — компактный синтаксис, а не другой цвет.
Почему HSL в градусах?
Оттенок идёт по цветовому кругу: 0 и 360 — красный, 120 — зелёный, 240 — синий. Градусы здесь не про температуру, а про угол поворота по кругу.
Насколько точна подсказка контраста?
Это прикидка по яркости 0,299/0,587/0,114 без гамма-коррекции. Для accessibility-аудита считайте коэффициент по WCAG — подсказка здесь для быстрого выбора цвета кнопки.