Конвертер цветовых кодов
Перевод между HEX, RGB, HSL, HSV и CMYK и проверка контрастности текста
Загрузка инструмента…
Введите цвет в любом из форматов HEX, RGB, HSL, HSV, CMYK, OKLCH или как CSS-название, и остальные форматы сразу обновятся. Пригодится, чтобы перенести цвет из макета в CSS или проверить, достаточно ли контрастен текст на фоне.
Как пользоваться
- Выберите цвет через «Выбрать цвет» или введите значение в одно из полей, например HEX или RGB. Остальные поля обновятся; любое из них можно скопировать кнопкой рядом.
- Задайте «Непрозрачность», чтобы добавить прозрачность; тогда HEX станет 8-значным, а RGB превратится в rgba.
- Выберите образец в разделе «Светлее и темнее» или «Цветовые гармонии», чтобы переключиться на этот цвет.
- В разделе «Проверка контраста» задайте «Цвет текста» и «Цвет фона» и посмотрите «Коэффициент контраста» и результаты по AA и AAA.
Как это работает
- HEX записывает значения красного, зелёного и синего (от 0 до 255) двумя шестнадцатеричными цифрами каждое. Например, rgb(255, 99, 71) — это #FF6347.
- Коэффициент контраста = (относительная яркость более светлого цвета + 0,05) ÷ (относительная яркость более тёмного цвета + 0,05); оценка — по критериям успеха WCAG 2.2 1.4.3 и 1.4.6. Коэффициент округляется вниз.
- CMYK рассчитывается по простой формуле без профиля печати, поэтому реальный цвет при печати будет отличаться. Недавние цвета и последний цвет сохраняются на этом устройстве.
Частые вопросы
- Как перевести HEX в RGB?
- Разбейте код на пары и переведите каждую пару из шестнадцатеричной системы в десятичную. #3B82F6 даёт 3B = 59, 82 = 130 и F6 = 246, то есть rgb(59, 130, 246). Введите код в поле HEX, чтобы сразу увидеть результат.
- Какой контраст нужен для текста?
- WCAG AA требует 4,5:1 для обычного текста и 3:1 для крупного; AAA — 7:1 и 4,5:1. Крупный текст — это не меньше 24px или 18,66px жирным.
- Что такое трёхзначный HEX-код?
- Краткая форма шестизначного кода, в которой каждая цифра удваивается. #F80 — тот же цвет, что и #FF8800.
- Можно ли узнать название цвета?
- Если цвет совпадает с одним из 148 названий цветов CSS, показывается это название; иначе появляется ближайшее CSS-название и его значение HEX.