Как пользоваться
- Введите цвет:
#5be49b,rgb(91 228 155),hsl(148 72% 63%),hwb(),oklch()или имя вродеrebeccapurple. Или нажмите на цветной квадрат и выберите пипеткой. - Справа появятся все форматы — HEX с альфой и без, RGB в трёх записях, HSL, HWB, CMYK, OKLCH и ближайшее CSS-имя. У каждой строки кнопка Копировать.
- В блоке Контраст WCAG задайте цвет фона — увидите коэффициент и вердикты AA/AAA для обычного и крупного текста; кнопка ⇅ меняет текст и фон местами.
- Ниже — 11 оттенков того же цвета и гармонии (комплементарная, триада, аналоговые, сплит, тетрада). Клик по любому образцу копирует его HEX.
Что делает конвертер цветов
Инструмент понимает все записи цвета, которые встречаются в CSS, макетах Figma и рекламных кабинетах: короткий и длинный HEX (#abc, #aabbcc, #aabbccdd с прозрачностью), rgb()/rgba() с запятыми и через пробел, hsl()/hsla(), hwb(), oklch() и 148 именованных цветов CSS. На выходе — таблица со всеми форматами сразу, поэтому не нужно переключать режимы: HEX для CSS, RGB для Photoshop и Canva, HSL для генерации оттенков, CMYK для печати визиток и мерча, OKLCH для современных дизайн-систем.
CMYK считается по простой формуле из sRGB без цветового профиля — для точной печати всё равно нужен профиль типографии, но для оценки «уйдёт ли цвет в грязь» этого достаточно. OKLCH переводится через sRGB → линейный RGB → OKLab по формулам Бьёрна Оттоссона; для цветов внутри sRGB-гаммы результат совпадает с тем, что показывает браузер.
Зачем проверять контраст WCAG
Коэффициент контраста — отношение яркостей текста и фона от 1 до 21. WCAG 2.x требует минимум 4.5:1 для обычного текста и 3:1 для крупного (от 24px или от 19px жирным) на уровне AA; уровень AAA — 7:1 и 4.5:1. Это не только про доступность: Google Ads и Meta отклоняют креативы с нечитаемым текстом, а серый дисклеймер на светлом лендинге, который никто не может прочитать, — повод для претензии рекламодателя. Проверьте цвет кнопки на фоне баннера здесь, прежде чем заливать 20 вариантов в кабинет.
Оттенки и гармонии — для чего
- Шкала оттенков — 11 тонов того же оттенка от почти белого до почти чёрного через изменение светлоты в HSL. Удобно, чтобы взять фон, рамку и hover-состояние одного цвета, не подбирая на глаз.
- Комплементарная пара — цвет напротив на круге (+180°): контрастный акцент для кнопки CTA на фоне бренда.
- Триада и тетрада — три или четыре равноудалённых цвета для инфографики и графиков.
- Аналоговые (±30°) — спокойная палитра для фона и вторичных элементов; сплит-комплементарная — мягче прямой противоположности.
Частые вопросы
Как перевести HEX в RGB?
Каждая пара символов HEX — это байт одного канала: #5be49b → 5b=91, e4=228, 9b=155, то есть rgb(91, 228, 155). Инструмент делает это мгновенно и заодно показывает HSL, CMYK и остальные форматы.
Почему CMYK из конвертера отличается от Photoshop?
Photoshop переводит через ICC-профиль (обычно U.S. Web Coated или FOGRA), а здесь — прямая формула из sRGB без профиля. Расхождение в единицы процентов нормально; для печати уточняйте профиль у типографии.
Какой контраст нужен для текста по WCAG?
AA: 4.5:1 для обычного текста и 3:1 для крупного (≥ 24px или ≥ 19px жирный). AAA: 7:1 и 4.5:1. Иконки и границы элементов управления — не ниже 3:1.
Что такое OKLCH и зачем он здесь?
OKLCH — перцептивно равномерная запись цвета (светлота, насыщенность, оттенок), которую поддерживают все современные браузеры. В нём удобно строить палитры: шаг светлоты выглядит одинаково для синего и жёлтого, чего не даёт HSL. Конвертер считает OKLCH приблизительно через sRGB.
Понимает ли конвертер имена цветов вроде tomato или rebeccapurple?
Да, все 148 именованных цветов CSS, а также transparent. Для любого другого цвета показывается ближайшее имя по расстоянию в OKLab с пометкой «≈».
Отправляются ли цвета на сервер?
Нет. Все преобразования выполняет JavaScript в вашем браузере, страница не делает ни одного сетевого запроса после загрузки.
