ToolsMaxxing

Конвертер цветов

Переводите цвет между HEX, RGB, HSL, HSV и CMYK и проверяйте контраст текста.

HEX
#4f46e5
RGB
rgb(79, 70, 229)
HSL
hsl(243, 75%, 59%)
HSV
hsv(243, 69%, 90%)
CMYK
cmyk(66%, 69%, 0%, 10%)

Контраст текста (WCAG)

Белый текст на этом цвете
6.29:1 Проходит AA
Чёрный текст на этом цвете
3.34:1 Только для крупного текста

Ваши файлы остаются на устройстве

Как это работает

  1. 1Введите цвет в любом формате или выберите его палитрой.
  2. 2Посмотрите тот же цвет в HEX, RGB, HSL, HSV и CMYK.
  3. 3Скопируйте нужный формат.
  4. 4Проверьте строки контраста, чтобы понять, читаем ли белый или чёрный текст на этом цвете.

Что делают параметры

Допустимый ввод
#rgb, #rrggbb, #rrggbbaa, rgb(), rgba(), hsl(), hsla() и названия цветов CSS, например tomato.
Контраст
Коэффициент WCAG относительно белого и чёрного. 4.5:1 соответствует AA для обычного текста, 3:1 для крупного.

Конфиденциальность

Всё выполняется в вашем браузере. Введённые данные не отправляются на сервер.

Частые вопросы

Точно ли значение CMYK для печати?

Нет. Это простое математическое преобразование из RGB. Принтеры используют цветовые профили, поэтому пробная печать в типографии будет выглядеть иначе, особенно для ярких синих и зелёных.

Чем отличаются HSL и HSV?

Оба описывают оттенок, насыщенность и ось яркости. В HSL светлота 100 процентов всегда даёт белый. В HSV значение 100 процентов это самая яркая версия цвета. Дизайнерские инструменты часто используют HSV, а CSS использует HSL.

Что означает восьмизначный hex?

Две последние цифры это непрозрачность от 00 (прозрачный) до ff (непрозрачный). #4f46e580 непрозрачен примерно на 50 процентов.

Почему название цвета не работает?

Распознаются только именованные цвета CSS, такие как tomato или rebeccapurple. Названия из дизайнерских инструментов не распознаются.

Какой контраст нужен?

WCAG AA требует 4.5:1 для основного текста и 3:1 для крупного текста и элементов интерфейса. AAA требует 7:1 для основного текста.

Похожие инструменты