Конвертер Цветов
Переводите любой CSS-цвет между HEX, RGB, HSL, HWB, OKLCH и CMYK, проверяйте контраст текста по точной формуле WCAG и стройте десятиступенчатую шкалу светлоты из любого цвета — всё в браузере.
Один цвет, шесть записей
Каждый формат на этой странице называет один и тот же sRGB-цвет
по-своему. Hex и rgb() хранят каналы напрямую — hex по две
шестнадцатеричные цифры на канал, отсюда и шесть цифр у цвета
байт-на-канал. hsl() раскладывает те же числа в тон,
насыщенность и светлоту — рассуждать проще, но кривое чувство яркости
sRGB остаётся. hwb() описывает тон, смешанный с белым и
чёрным — модель смешивания красок. oklch() — современная
перцептивная запись, а CMYK — приближение того, как цвет разделится в
печати.
| Формат | #336699 в этой записи | Где используется |
|---|---|---|
| HEX | #336699 | везде; формат обмена |
| RGB | rgb(51 102 153) | CSS, canvas, данные изображений |
| HSL | hsl(210 50% 40%) | ручная подстройка тона и светлоты в CSS |
| HWB | hwb(210 20% 40%) | CSS Level 4; логика пипетки |
| OKLCH | oklch(49.93% 0.0987 250.4) | современные дизайн-системы, перцептивные палитры |
| CMYK | cmyk(67%, 33%, 0%, 40%) | подготовка к печати, приближённо |
Контраст: число, решающее читаемость
Коэффициент WCAG идёт от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом). Он считается по яркости, а не по различию тонов — красный и зелёный могут быть максимально разными по тону и почти одинаковыми по яркости; именно такие пары не различают читатели с цветовой слепотой. Пороги:
| Уровень | Обычный текст | Крупный текст (18pt / 14pt жирный) |
|---|---|---|
| WCAG AA | 4.5:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 |
Всё работает локально в браузере — ни один введённый или выбранный цвет никуда не отправляется.
Частые вопросы
Какие форматы цвета читает инструмент?
Hex во всех четырёх длинах (#369, #3699, #336699, #33669980), rgb() и hsl() в старом синтаксисе с запятыми и в современном с пробелами — включая проценты и альфа-канал, записанный четвёртым значением или после косой черты. Что бы ни вошло, все форматы вывода показываются сразу.
Что такое OKLCH и чем он лучше HSL?
OKLCH — запись цвета, поддерживаемая всеми современными браузерами, в которой светлота действительно соответствует видимой яркости. В HSL жёлтый на 50% светлоты сияет, а синий на тех же 50% выглядит тёмным — число обманывает. В OKLCH два цвета с одинаковым L по-настоящему одинаково светлые, что куда лучше для палитр с ровными ступенями. Новые CSS-системы цвета пишутся в основном в нём.
Как считается коэффициент контраста?
По точной формуле WCAG 2: каждый канал линеаризуется (значения ниже колена 0.04045 делятся на 12.92, остальные возводятся в степень 2.4), собирается в относительную яркость с весами 0.2126/0.7152/0.0722, и две яркости дают (L1+0.05)/(L2+0.05). Результат совпадает с показаниями аудиторских инструментов — обязан совпадать: это число цитируют в аудитах доступности.
Что означают вердикты AA и AAA?
WCAG задаёт минимальный контраст текста: AA требует 4.5:1 для обычного текста и 3:1 для крупного (18pt, или 14pt жирного); AAA поднимает пороги до 7:1 и 4.5:1. Большинство регламентов ссылаются на уровень AA. Знаменитый пограничный случай: чистый красный на белом — 4.0:1, достаточно для крупных заголовков и провал для основного текста.
Учитывает ли проверка прозрачность?
Коэффициент считается по непрозрачным цветам. Если у цвета текста есть альфа, его реальный контраст зависит от того, что просвечивает, и меняется от пикселя к пикселю — сначала сведите цвет с настоящим фоном, затем проверяйте. Полупрозрачное значение показывается в форматах, но контраст использует базовый цвет.
Как строится шкала светлоты?
Тон и насыщенность вашего цвета сохраняются, а светлота ровно шагает в HSL от 95% до 5%. Это классическая лестница от подсветки к тени — для hover-состояний, рамок и тёмных вариантов фирменного цвета. Клик по любой ступени копирует её hex.
Похожие инструменты
- Конструктор схем и блок-схемРисуйте блок-схемы и диаграммы, соединяйте блоки стрелками, которые прокладывают себя сами, и раскладывайте всё автоматически. Экспорт в SVG.
- Генератор паролейСоздавайте надёжные пароли криптографическим генератором браузера с оценкой стойкости.
- HTML-сущностиКодируйте текст для HTML или декодируйте сущности обратно — ломающие разметку знаки, именованные наборы, числовые ссылки до эмодзи. Ровно один проход.