DevToolPal
RU

Конвертер цветов (HEX, RGB, HSL)

Конвертация цветов между HEX, RGB, HSL, HSV и CMYK с живым предпросмотром и контрастом на белом и чёрном фоне.

Работает локально, без загрузки на сервер

Параметры

Цвет

Результат

Здесь появится результат

Что делает инструмент

Конвертер цветов принимает цвет в любой распространённой нотации CSS и сразу показывает его во всех остальных: HEX, RGB, HSL, HSV и CMYK. Также отображаются образец цвета, имя цвета в CSS при точном совпадении и коэффициент контрастности на белом и чёрном фоне, чтобы можно было проверить читаемость.

Как пользоваться

  1. Введите или вставьте цвет в поле Цвет либо воспользуйтесь пипеткой рядом с ним.
  2. Все нотации обновляются по мере ввода. Нажмите Копировать рядом с нужной.
  3. Включите HEX в верхнем регистре, если ваш стайлгайд пишет HEX заглавными буквами.
  4. Перед использованием цвета для текста проверьте строки контраста: зелёный значок означает, что требование WCAG AA выполнено.

Пример

#1e90ff — это цвет CSS dodgerblue. Он конвертируется в:

  • RGB: rgb(30, 144, 255)
  • HSL: hsl(210, 100%, 55.9%)
  • HSV: hsv(210, 88.2%, 100%)
  • CMYK: cmyk(88%, 44%, 0%, 0%)

Его контраст на белом — 3.24:1: этого достаточно для крупных заголовков, но не для основного текста.

Коротко о цветовых моделях

  • HEX и RGB описывают, сколько красного, зелёного и синего света излучает экран. Именно их используют внутри браузеры и инструменты дизайна.
  • HSL описывает тон (угол на цветовом круге), насыщенность и светлоту, поэтому в нём легко получать более светлые или тёмные оттенки одного цвета.
  • HSV (также HSB) используется в большинстве палитр выбора цвета в дизайнерских программах.
  • CMYK описывает голубую, пурпурную, жёлтую и чёрную краски для печати.

Цвета с прозрачностью, например #1e90ff80 или rgb(30 144 255 / 50%), показываются с альфа-каналом в HEX, RGB и HSL.

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

› Как перевести HEX в RGB?

Разбейте шесть шестнадцатеричных цифр на три пары и прочитайте каждую пару как число от 0 до 255. Для #1e90ff это 1e = 30, 90 = 144 и ff = 255, то есть rgb(30, 144, 255). Инструмент делает это за вас прямо во время ввода.

› Какие форматы можно вставлять?

HEX с # или без него (3, 4, 6 или 8 цифр), rgb() и rgba(), hsl() и hsla() в синтаксисе с запятыми и с пробелами, проценты, единицы углов вроде deg и turn, а также все 148 именованных цветов CSS.

› Что означает коэффициент контрастности?

Это контраст по WCAG 2 между цветом и белым или чёрным фоном. Основному тексту нужно не меньше 4.5:1 для уровня AA; крупному тексту (около 24px или 19px жирным) — 3:1.

› Почему CMYK только приблизительный?

Принтеры используют профили красок, зависящие от бумаги и печатной машины. Здесь показан CMYK по стандартной аппаратно-независимой формуле: он годится как отправная точка, но не заменяет печатный профиль.