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

Переводите коды цвета между HEX, RGB, HSL, HSV, OKLCH и CMYK и проверяйте коэффициент контрастности (WCAG) текста и фона.

1. Введите цвет

Вставьте код цвета или нажмите на квадрат слева, чтобы выбрать цвет.

Например: #FF6B35, rgb(255, 107, 53), hsl(16, 100%, 60%), C0 M58 Y79 K0, tomato

2. Результат конвертации

Кнопки справа копируют значения в виде, готовом для вставки в CSS.

HEX
—
RGB
—
HSL
—
HSV (HSB)
—
OKLCH
—
CMYK (примерно)
—
Название цвета в CSS
—

3. Проверить контраст

Проверьте по WCAG (стандарту доступности веб-контента), хорошо ли читается сочетание цвета текста и фона.

Введённый цвет — это

Введите цвет выше, и здесь появится образец.

Коэффициент контрастности

—

  • Обычный текст AAне менее 4.5 : 1—
  • Обычный текст AAAне менее 7 : 1—
  • Крупный текст AAне менее 3 : 1—
  • Крупный текст AAAне менее 4.5 : 1—

Крупный текст — это текст размером от 18 pt (24 px) или жирный от 14 pt (около 18,7 px).

Конвертация выполняется на вашем устройстве — введённые цвета никуда не отправляются.

CMYK — приблизительный расчёт без цветового профиля печати (ICC-профиля). Перед отправкой макета в типографию проверьте значения в графическом редакторе.

Пригодилось? Будем рады, если поделитесь

Что-то не работает или есть идея, как сделать лучше?

Сообщить о проблемеПредложить улучшение

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

  1. 1. Ввести код цвета

    В поле «Код цвета» введите код цвета, который нужно перевести (например, #FF6B35). Ниже в блоке «Результат конвертации» сразу появятся RGB, HSL, HSV, OKLCH, CMYK и название цвета в CSS.

  2. 2. Выбрать цвет

    Нажмите на цветной квадрат слева от поля «Код цвета». Откроется окно выбора цвета: код выбранного цвета появится в поле, и результат обновится.

  3. 3. Скопировать результат

    В блоке «Результат конвертации» нажмите кнопку справа от «RGB», чтобы скопировать значение в виде rgb(…). Кнопка «Скопировать все результаты» ниже копирует все форматы, по одному на строку.

  4. 4. Проверить контраст

    Ниже, в блоке «Проверить контраст», нажмите «Чёрный» справа от «Цвет фона». Появятся образец текста на чёрном фоне, коэффициент контрастности и оценка, проходят ли обычный и крупный текст уровни AA и AAA.

Когда пригодится

  • Перенести цвета из макета в CSS

    Вставьте HEX, скопированный из графического редактора, и сразу получите rgb(), hsl() и новый oklch().

    Веб-разработчики и разработчики приложений

  • Проверить, хорошо ли читается текст

    Введите цвета текста и фона — и узнайте коэффициент контрастности и соответствие уровням AA и AAA по WCAG.

    Дизайнеры, которые заботятся о доступности

  • Прикинуть экранный цвет в CMYK

    Готовите листовку или визитки — узнайте, каким примерно получится веб-цвет в CMYK.

    Те, кто готовит макеты для печати

  • Собрать фирменный цвет во всех форматах

    Кнопка «Скопировать все результаты» копирует сразу все форматы от HEX до CMYK — для презентации или брендбука.

    Маркетологи и бренд-менеджеры

Что стоит знать заранее

  • CMYK — приблизительный расчёт. Точные значения под цветовой профиль типографии (ICC-профиль) проверяйте в графическом редакторе.
  • Чтобы извлечь цвета из изображения, воспользуйтесь инструментом Извлечь цвета из изображения.
  • Перевод в номера плашечных цветов, например PANTONE, и в значения по системе Манселла не поддерживается.

Чем отличаются форматы кодов цвета

Цвет на экране задаётся яркостью трёх основных цветов света — красного, зелёного и синего. HEX (#FF6B35) и RGB (rgb(255, 107, 53)) описывают одно и то же — в шестнадцатеричной и десятичной записи. HSL и HSV переводят это в тон, насыщенность и яркость, чтобы цвет было проще настраивать. OKLCH описывает светлоту близко к тому, как её воспринимает глаз, поэтому в нём удобно подбирать палитры с одинаковой светлотой; этот формат начинают использовать в современном CSS.

CMYK — это количество типографских красок (голубой, пурпурной, жёлтой и чёрной). Экран работает со светом, а печать — с краской, поэтому один и тот же цвет нельзя воспроизвести абсолютно точно. Значения CMYK в этом инструменте — приблизительный расчёт по распространённой формуле. Коэффициент контрастности показывает разницу в яркости между текстом и фоном по шкале от 1 до 21. По WCAG для обычного текста нужно не менее 4,5 (AA) или 7 (AAA).

Форматы кодов цвета
ПримерГде используется
HEX#FF6B35CSS, HTML, графические редакторы
RGBrgb(255, 107, 53)CSS, программирование, обработка изображений
HSLhsl(16, 100%, 60%)CSS (настройка светлоты)
HSV (HSB)hsv(16, 79%, 100%)Выбор цвета в Photoshop, Figma и др.
OKLCHoklch(70.5% 0.193 39.2)Современный CSS, подбор палитр
CMYKcmyk(0%, 58%, 79%, 0%)Печатная продукция (листовки, визитки)

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

Ответы на частые вопросы о конвертации кодов цвета и коэффициенте контрастности.

Введённые цвета куда-нибудь отправляются?

Нет. И конвертация, и расчёт контраста выполняются только в браузере на вашем устройстве.

В каких форматах можно вводить цвет?

HEX вида #FF6B35 или #F63 (можно без #), rgb() и rgba(), hsl() и hsla(), hsv() и hsb(), oklch(), cmyk() или «C0 M58 Y79 K0», а также названия цветов CSS, например tomato. Просто числа, например «255, 107, 53», читаются как RGB.

Можно ли конвертировать цвета с прозрачностью (альфа-каналом)?

Да. Если ввести 8-значный HEX, например #FF6B3580, или rgba(255, 107, 53, 0.5), HEX будет выведен 8-значным, а RGB, HSL и OKLCH — с прозрачностью. У HSV и CMYK нет записи для прозрачности, поэтому для них выводится только цвет.

Почему после перевода в HSL и обратно значения сдвигаются на 1?

HSL и HSV, как и на других сайтах и в графических редакторах, округляются до целых. При обратном переводе из округлённых значений RGB может сдвинуться на 1–2. Если нужны точные значения, используйте HEX или RGB.

Можно ли использовать значения CMYK прямо для печати?

Используйте их как ориентир. Реальный цвет при печати зависит от бумаги, красок и цветового профиля типографии (ICC-профиля). Этот инструмент считает по общей формуле без профиля. Перед сдачей макета проверьте значения в графическом редакторе или в типографии.

Что такое OKLCH?

Формат, который описывает цвет через светлоту (L), насыщенность (C) и цветовой тон (H) и близок к тому, как цвет воспринимает глаз. При одинаковой светлоте разные оттенки выглядят примерно одинаково светлыми. В современных браузерах его можно использовать в CSS как oklch().

Цвет, введённый в OKLCH, немного меняется. Почему?

В OKLCH можно записать и очень яркие цвета, которые обычный экран (sRGB) показать не может. Для таких цветов светлота и тон сохраняются, а насыщенность снижается до той, которую можно показать. В этом случае под полем ввода появляется уведомление.

Что значат AA и AAA для коэффициента контрастности?

Это уровни соответствия стандарту доступности веб-контента (WCAG 2). Для обычного текста AA — от 4,5, AAA — от 7; для крупного текста (от 18 pt или жирного от 14 pt) AA — от 3, AAA — от 4,5.

Почему контраст 4,49 не показывается как 4,5?

Чтобы сочетание, которое чуть-чуть не дотягивает до порога, не отображалось как «Соответствует», значение отбрасывается после 2 знаков после запятой, и оценка делается по нему.

Это бесплатно?

Да. Без регистрации и без рекламы.

Другие инструменты

  • Налоговый калькулятор (с налогом и без)

    Введите цену — и сразу увидите сумму без налога, налог и итог. Японские ставки 10 % и 8 % уже есть, можно задать и любую другую.

  • Калькулятор возраста

    Выберите дату рождения — и сразу увидите возраст, число дней до дня рождения, прожитые дни и знак китайского гороскопа. Есть таблица возрастов по годам рождения.

  • Калькулятор дат (прибавить и отнять дни)

    Сразу показывает дату и день недели через N дней, N дней назад или через N рабочих дней. Можно пропускать выходные и праздники.

  • Калькулятор времени (сумма рабочих часов)

    Считает отработанное время по началу, концу и перерыву и складывает его. Также можно складывать и вычитать время и переводить его в десятичные часы.

  • Калькулятор: разделить счёт

    Введите сумму и число людей — и сразу увидите, сколько платит каждый. Округление, коэффициенты, чтобы кто-то платил больше, и доплата остатка организатором.

  • Конвертер Unix-времени (epoch ⇔ дата)

    Сразу переводит Unix-время (epoch в секундах или миллисекундах) в дату и время по UTC или по Японии, а дату — обратно в Unix-время.