TF

Дизайн и CSS

Конвертер цветов и проверка контраста

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

HEX, rgb(), hsl(), hsv(), hwb(), cmyk(), oklch() или CSS-имя, например tomato.

  • HEX#0f766e
  • RGBrgb(15 118 110)
  • HSLhsl(175 77% 26%)
  • HSV / HSBhsv(175 87% 46%)
  • HWBhwb(175 6% 54%)
  • CMYKcmyk(87% 0% 7% 54%)
  • OKLCHoklch(51.1% 0.086 186.4)

Светлые и тёмные оттенки

Что это за инструмент?

Вставьте цвет в любом формате — #ff6347, rgb(255 99 71), hsl(9 100% 64%) или просто tomato — и скопируйте его во всех остальных. Во вкладке проверки контраста можно протестировать цвета текста и фона по WCAG 2 и получить ближайший подходящий цвет, если пара не проходит.

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

Коэффициенты контраста WCAG — от 1:1 до 21:1. Обычному тексту нужно не меньше 4,5:1 для AA и 7:1 для AAA; крупному тексту (24px или 18,66px жирным) и элементам интерфейса — 3:1. Полупрозрачные цвета перед измерением смешиваются с фоном.

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

  1. Введите или вставьте цвет либо выберите его пипеткой.
  2. Скопируйте нужный формат: HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH или CSS-имя цвета.
  3. Нажмите на светлый или тёмный оттенок, чтобы посмотреть варианты того же тона.
  4. Откройте проверку контраста, задайте цвета текста и фона и посмотрите, проходят ли они WCAG AA и AAA.
  5. Если пара не проходит, примените предложенный цвет — он сохраняет тон и меняет светлоту.

Примеры

Tomato в других форматах

tomato
#ff6347
rgb(255 99 71)
hsl(9 100% 64%)

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

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

Вставьте HEX-код, например #3366cc, и скопируйте строку RGB: rgb(51 102 204). Каждая пара шестнадцатеричных цифр — один канал от 0 до 255.

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

Для основного текста — минимум 4,5:1 (WCAG AA). Крупным заголовкам и иконкам — 3:1. Для длинного чтения и людей со слабым зрением стремитесь к 7:1 (AAA).

Точна ли конвертация в CMYK для печати?

Это аппаратно-независимое приближение. Реальный результат зависит от бумаги и профиля принтера, поэтому для финальных макетов используйте цветовой профиль типографии.

Что такое OKLCH?

OKLCH описывает цвет светлотой, насыщенностью (chroma) и тоном в перцептивно равномерном пространстве. Его поддерживает современный CSS, и с ним легко строить согласованные палитры.

Понадобится больше возможностей?

Премиум-инструменты, повышенные лимиты и доступ через API — в наших планах. Версия 1 остаётся бесплатной и приватной в вашем браузере.