Конвертер цветов: HEX, RGB, HSL, HSV, HWB, CMYK, LAB и OKLCH

Преобразуйте цвет между HEX, RGB, HSL, HSV, HWB, CMYK, CIELAB и OKLCH, узнайте его имя в CSS и контраст WCAG на белом и чёрном. Бесплатно, в браузере.

Поддерживаются HEX (#rgb, #rrggbb, #rrggbbaa), rgb()/rgba(), hsl()/hsla(), hsv(), hwb(), cmyk(), lab(), oklch() и 148 именованных цветов CSS.

Имя в CSS: dodgerblue
HEX#1e90ff
RGBrgb(30, 144, 255)
HSLhsl(209.6, 100%, 55.9%)
HSV / HSBhsv(209.6, 88.2%, 100%)
HWBhwb(209.6 11.8% 0%)
CMYKcmyk(88.2%, 43.5%, 0%, 0%)
CIELABlab(58.36% 0.89 -64.78)
OKLCHoklch(65.2% 0.1901 253.21)
Aa
Контраст на белом
3,23:1
AA обычный текст (4.5:1) ✗AA крупный текст (3:1) ✓AAA обычный текст (7:1) ✗
Aa
Контраст на чёрном
6,48:1
AA обычный текст (4.5:1) ✓AA крупный текст (3:1) ✓AAA обычный текст (7:1) ✗

CIELAB использует белую точку D50, как в CSS Color 4. Значения округляются только при отображении, расчёты идут с полной точностью. Для CMYK, HSV и контраста прозрачность не учитывается.

Что такое Конвертер цветов?

Вставьте цвет в любой распространённой нотации и получите его сразу в восьми цветовых моделях: HEX, RGB(A), HSL(A), HSV, HWB, CMYK, CIELAB и OKLCH. Инструмент также показывает подходящее имя цвета в CSS (если есть точное совпадение) и коэффициент контраста WCAG цвета на белом и на чёрном фоне.

Как пользоваться Конвертер цветов

  1. Введите или вставьте цвет в поле Цвет (любой формат), например #1e90ff, rgb(30 144 255), hsl(210 100% 56%), oklch(65% 0.19 253) или tomato, либо выберите его пипеткой.
  2. Посмотрите преобразованные значения в списке результатов; у каждой строки есть своя кнопка Копировать.
  3. Проверьте Имя в CSS на точное совпадение с именованным цветом и карточки Контраст на белом / чёрном с результатами WCAG AA и AAA.
  4. Если значение LAB или OKLCH выходит за пределы sRGB, предупреждение сообщит, что оно приведено к ближайшему отображаемому цвету.

Пример

Ввод
#ff0000
Вывод
rgb(255, 0, 0) · hsl(0, 100%, 50%) · hsv(0, 100%, 100%) · hwb(0 0% 0%) · cmyk(0%, 100%, 100%, 0%) · lab(54.29% 80.8 69.89) · oklch(62.8% 0.2577 29.23) · CSS name: red

Контраст на белом равен 3.99:1, поэтому чистый красный не проходит WCAG AA для обычного текста.

Когда использовать Конвертер цветов

Используйте при переносе цветов между дизайн-инструментами и CSS, когда для построения палитр нужна перцептивная модель вроде OKLCH, и для быстрой проверки контраста текста. Не используйте вывод CMYK для профессиональной печатной цветопробы: для настоящей печати нужен цветовой профиль ICC, который эта простая формула не учитывает.

Как работает Конвертер цветов

Любой ввод разбирается в гамма-кодированные каналы sRGB и альфа-канал. HSL, HSV и HWB — стандартные цилиндрические преобразования sRGB; CMYK — простая независимая от устройства формула K = 1 − max(R,G,B). Для LAB значения sRGB линеаризуются, переводятся в CIE XYZ (D65), хроматически адаптируются к D50 матрицей Брэдфорда и превращаются в CIELAB — в точности как в CSS Color 4. OKLCH использует матрицы OKLab Бьёрна Оттоссона на линейном sRGB. Значения округляются только для показа (целые для RGB, один знак для HSL/HSV/HWB/CMYK, два для LAB). Контраст рассчитывается по относительной яркости WCAG 2.x: (L1 + 0.05) / (L2 + 0.05).

Распространенные Случаи Использования

  • Перевод фирменного HEX-кода из гайдлайна в hsl() или oklch() для переменных CSS
  • Преобразование значения rgba() из DevTools в 8-значный HEX с альфа-каналом
  • Проверка, проходит ли цвет текста WCAG AA (4.5:1) на белом фоне
  • Поиск ключевого слова CSS для HEX-значения вроде #663399 (rebeccapurple)
  • Получение приблизительных процентов CMYK для офисной распечатки

Часто Задаваемые Вопросы

Почему значение LAB отличается от Photoshop?

Этот инструмент следует CSS Color 4, где используется белая точка D50 с адаптацией Брэдфорда. Некоторые программы показывают LAB относительно D65, и числа немного отличаются.

Что значит «за пределами охвата sRGB»?

LAB и OKLCH могут описывать цвета, которые обычный экран sRGB показать не может. Такие значения по каналам обрезаются до ближайшего отображаемого цвета, а предупреждение сообщает, что значения HEX/RGB приблизительны.

Как округляется коэффициент контраста?

Он усекается, а не округляется вверх, до двух знаков, чтобы коэффициент 4.499 никогда не показывался как проходящий порог 4.5:1.

Сохраняется ли альфа-канал во всех форматах?

Альфа сохраняется в HEX (8 цифр), rgba(), hsla(), HWB, LAB и OKLCH. В HSV и CMYK альфа-канала нет, а контраст считается для непрозрачного цвета.

Другие категории

CRC
Алгоритмы циклической избыточной проверки для обнаружения ошибок
MD
Алгоритмы дайджеста сообщений (MD2, MD4, MD5)
SHA-1
Защищенный алгоритм хеширования 1 - 160-битная хеш-функция
SHA-2
Семейство защищенного алгоритма хеширования 2 (SHA-224, SHA-256, SHA-384, SHA-512)