Конвертер цвета RGB ⇄ HEX и HSL
Перевод цвета в обе стороны: RGB (0–255) → HEX (#RRGGBB) и обратно HEX → RGB. С HSL, контрастом по WCAG и названием базового CSS-цвета.
RGB → HEX: каждый канал 0–255 записывается двумя шестнадцатеричными цифрами. HEX → RGB: обратный разбор пар (0x25 = 37). HSL — через MAX/MIN каналов: L = (max+min)/2, S зависит от L, H — из доминирующего канала.Что считает калькулятор
Переключатель «Направление перевода» задаёт режим:
- RGB → HEX — подбираете цвет ползунками каналов R, G, B (0–255) и получаете HEX.
- HEX → RGB — вписываете готовый код вида
#2563EB(можно без#и в сокращённой форме#27E) и получаете десятичные значения каналов.
В обоих режимах ниже выводятся HSL, контраст по WCAG и название базового CSS-цвета, если код совпадает с ним точно.
- HEX — стандартный формат CSS вида
#RRGGBB. Каждая пара символов — это десятичное значение канала 0–255, записанное в шестнадцатеричной системе. - HSL — цветовая модель «оттенок-насыщенность-светлота», в которой удобнее подбирать парные оттенки и состояния (hover, active). Браузеры её тоже понимают:
hsl(217, 91%, 53%). - CSS-название — выводится только если HEX точно совпадает с одним из базовых цветов CSS Color Module Level 4 (
red,blue,purple,teal…). Если ваш цвет «не круглый» — поле скрывается. - Контраст WCAG — сразу два значения: контраст текста на чёрном и на белом фоне. Уровень AA для основного текста требует ≥ 4,5 : 1, для крупного (от 18 pt) — ≥ 3 : 1.
Формулы
Перевод RGB → HEX — это просто запись каждого канала в шестнадцатеричной системе с дополнением до двух цифр:
255 → "FF", 128 → "80", 7 → "07"
HEX = "#" + R₁₆ + G₁₆ + B₁₆HSL рассчитывается через минимум и максимум каналов (нормализованных в 0–1):
L = (max + min) / 2
S = (L > 0.5) ? (max − min) / (2 − max − min)
: (max − min) / (max + min)
H = угол по доминирующему каналу (R, G или B), приводится к 0…360°WCAG-яркость учитывает гамма-коррекцию sRGB:
L = 0.2126·R' + 0.7152·G' + 0.0722·B',
где X' = (X/255 ≤ 0.03928) ? (X/255)/12.92 : ((X/255 + 0.055)/1.055)^2.4Почему именно 0–255
Один канал занимает 8 бит = 1 байт, поэтому укладывается ровно 256 значений (0…255). Три канала по 8 бит = 24-bit color = «true color», стандарт sRGB. Этого хватает на ~16,7 млн оттенков — больше, чем различает человеческий глаз.
В графике с расширенным диапазоном (HDR, фотография, кино) используются 10, 12 или 16 бит на канал и другие цветовые пространства (Display P3, Rec. 2020). Для веба-2026 по-прежнему стандарт — sRGB 8-bit.
Как использовать HEX в коде
.button {
background: #2563EB; /* Tailwind blue-600 */
color: #FFFFFF;
border: 1px solid #1E40AF; /* Tailwind blue-800 */
}
.button:hover {
background: hsl(217 91% 47%); /* тот же blue, но темнее на 6% по L */
}В Tailwind вы можете задать произвольный HEX через квадратные скобки: bg-[#2563EB], text-[#FFFFFF]. Но для палитры лучше расширить theme.colors в tailwind.config.ts — тогда цвет станет переиспользуемым именем.