Конвертер цветов онлайн
Вставьте цвет в любом формате CSS и получите все остальные форматы, а также контраст.
Вставьте HEX, rgb(), hsl(), hwb() или название цвета CSS либо выберите цвет
Светлые и тёмные оттенки
Значения
- HEX
- #3a5bd9
- RGB
- rgb(58, 91, 217)
- HSL
- hsl(227.5, 67.7%, 53.9%)
- HSV / HSB
- hsv(227.5, 73.3%, 85.1%)
- HWB
- hwb(227.5 22.7% 14.9%)
- CMYK
- cmyk(73%, 58%, 0%, 15%)
- Приблизительное значение. Цвет при печати зависит от красок и бумаги, поэтому точные значения уточните в типографии.
- OKLCH
- oklch(52.35% 0.1965 267.75)
- Ближайшее название CSS
- royalblue
Контраст (WCAG)
Текст этого цвета на каждом фоне. Обычному тексту нужно 4.5:1 для AA и 7:1 для AAA; крупному тексту (18pt или 14pt жирным) — 3:1 и 4.5:1.
На белом
Крупный текст
Съешь же ещё этих мягких французских булок, да выпей чаю
5.71:1
- AA обычный проходит
- AAA обычный не проходит
- AA крупный проходит
- AAA крупный проходит
На чёрном
Крупный текст
Съешь же ещё этих мягких французских булок, да выпей чаю
3.68:1
- AA обычный не проходит
- AAA обычный не проходит
- AA крупный проходит
- AAA крупный не проходит
На #ffffff
Крупный текст
Съешь же ещё этих мягких французских булок, да выпей чаю
5.71:1
- AA обычный проходит
- AAA обычный не проходит
- AA крупный проходит
- AAA крупный проходит
Далее: Прозрачный фон · Создать диаграмму
Сообщить о проблеме с этим инструментом
Как использовать Конвертер цветов
Введите цвет
Вставьте код HEX, rgb(), hsl(), hwb() или название вроде tomato либо выберите цвет в палитре.
Скопируйте нужный формат
Все форматы обновляются во время ввода. Скопируйте любой кнопкой рядом с ним или выберите привычный формат для большой кнопки «Копировать».
Проверьте контраст
Посмотрите коэффициент контраста WCAG на белом, на чёрном и на фоне по вашему выбору с результатами AA и AAA для обычного и крупного текста.
Почему стоит использовать Utils365
Читает любой цвет CSS
HEX из 3, 4, 6 и 8 цифр, rgb() и hsl() в старом синтаксисе с запятыми и новом с пробелами, hwb(), проценты, единицы оттенка и все 148 названий цветов.
И современные форматы
OKLCH для дизайн-систем и CSS с широким охватом, HWB и HSV для палитр и HEX с альфа-каналом для полупрозрачных цветов.
Доступность встроена
Коэффициенты контраста точно следуют WCAG 2 и никогда не округляются вверх до прохождения, поэтому 4.49:1 не засчитывается как 4.5:1.
Светлые и тёмные оттенки
Под образцом — пять более светлых и пять более тёмных ступеней. Нажмите на любую, чтобы сделать её текущим цветом.
Часто задаваемые вопросы
Чем отличаются HEX и RGB?
В самом цвете — ничем. Оба задают красный, зелёный и синий от 0 до 255. HEX записывает каждый двумя шестнадцатеричными цифрами, поэтому rgb(58, 91, 217) — это #3a5bd9. HEX короче, а rgb() проще читать и править вручную.
Что такое HSL?
Оттенок, насыщенность и светлота. Оттенок — положение на цветовом круге в градусах (0 — красный, 120 — зелёный, 240 — синий), насыщенность — насколько цвет яркий, а светлота идёт от чёрного при 0% до белого при 100%. С ним легко записать более светлую, тёмную или приглушённую версию цвета.
Почему CMYK не совпадает с цветом при печати?
Экраны смешивают свет, а принтеры — краску, и результат зависит от красок, бумаги и профиля принтера. Показанный CMYK рассчитан по простой стандартной формуле, поэтому считайте его отправной точкой, а точные значения уточните в типографии.
Что такое коэффициент контраста WCAG?
Мера того, насколько два цвета различаются по яркости: от 1:1 (одинаковые) до 21:1 (чёрный на белом). WCAG AA требует не менее 4.5:1 для обычного текста и 3:1 для крупного; AAA — 7:1 и 4.5:1.
Что такое OKLCH?
Новый способ записи цветов в CSS через светлоту, хрому и оттенок, основанный на том, как люди воспринимают цвет. При изменении светлоты оттенок выглядит прежним, поэтому OKLCH популярен в дизайн-системах и цветовых шкалах.
Как работает название цвета?
Если цвет точно совпадает с одним из 148 названий цветов CSS, показывается это название. Иначе вы получите ближайшее по внешнему сходству — удобно, чтобы описать цвет словами.