Color-конвертер
Конвертируйте любой цвет между HEX, RGB, HSL и HSV. Используйте picker или введите вручную — остальные форматы обновляются на лету. С WCAG-проверкой контраста для доступных пар цветов.
Полезно при переносе цветов дизайн-системы, выборе доступных пар foreground/background и сверке значений между инструментами.
Проверка WCAG-контраста
Pick a foreground and background color to check whether they meet the accessibility minimums from WCAG 2.1.
Normal text at 16 px — the quick brown fox jumps over the lazy dog.
Large text at 24 px — quick brown fox.
Пороги WCAG
- AA — normal text: contrast ratio ≥
4.5:1. - AA — large text (18 pt or 14 pt bold): ≥
3:1. - AAA — normal text: ≥
7:1. - AAA — large text: ≥
4.5:1. - UI components and graphical objects: ≥
3:1against adjacent colors.
Соотношение считается по относительной яркости WCAG 2.1, через линеаризованные sRGB-каналы и веса 0.2126·R + 0.7152·G + 0.0722·B.
Заметки по форматам
- HEX accepts
#rgb,#rgba,#rrggbband#rrggbbaaforms. The leading#is optional in the input. - RGB input accepts
rgb(r, g, b),rgba(r, g, b, a)and bare comma- or space-separated triplets like59, 130, 246. - HSL: hue is 0–360°, saturation and lightness are percentages.
hsl(217 91% 60%)(CSS Color 4) is accepted alongside the legacy comma form. - HSV (also called HSB) is not in CSS — it's shown here because it's useful in design tools. The display form is
hsv(h, s%, v%).
Частые вопросы
Почему HSL и HSV не совпадают точь-в-точь со значениями в Photoshop / Figma?
Округление. Hue, saturation и lightness непрерывны; инструменты округляют их по-разному. Разница в 1° по hue или 1% по saturation ожидаема и визуально идентична.
Учитывает ли проверка контраста альфа-канал (прозрачность)?
Нет. WCAG-соотношения подразумевают полностью непрозрачные цвета. Если передний план полупрозрачный, сначала смешайте его с фоном и проверьте получившийся непрозрачный цвет.
А что насчёт APCA, нового алгоритма контраста?
APCA — кандидат на замену соотношения WCAG 2.x в WCAG 3.0 (пока черновик). Для практической работы сегодня аудиторы и Lighthouse проверяют именно соотношение WCAG 2.1.
Отправляется ли что-нибудь на сервер?
Нет. Все конвертации и расчёты контраста идут в вашем браузере.