Конвертер HEX в CMYK

Что такое конвертер HEX в CMYK?

// sRGB hex → naive CMYK approximation
// NOTE: This is the textbook K = 1 - max(R,G,B); C = (1-R-K)/(1-K) formula.
// It is NOT an ICC-profile conversion. Real print accuracy requires color
// management against the specific press (US Web Coated SWOP v2, Fogra39,
// Japan Color 2011 Coated, etc.), ink set, and paper substrate. Channel
// values can drift 5-15% from this naive output once ICC conversion runs.
// Use as estimate for proofs, briefs, and digital press — never as a press-
// ready deliverable.
function hexToCmyk(hex) {
  const h = hex.trim().replace(/^#/, '');
  const [r, g, b] = [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16) / 255);
  const k = 1 - Math.max(r, g, b);
  // Pure black short-circuit: max RGB = 0 ⇒ K = 1, C/M/Y undefined (0/0)
  if (k === 1) return { c: 0, m: 0, y: 0, k: 100 };
  const c = (1 - r - k) / (1 - k);
  const m = (1 - g - k) / (1 - k);
  const y = (1 - b - k) / (1 - k);
  return { c: Math.round(c * 100), m: Math.round(m * 100), y: Math.round(y * 100), k: Math.round(k * 100) };
}
console.log(hexToCmyk('#3b82f6')); // → { c: 76, m: 47, y: 0, k: 4 }
console.log(hexToCmyk('#FF5733')); // → { c: 0, m: 66, y: 80, k: 0 }
console.log(hexToCmyk('#000000')); // → { c: 0, m: 0, y: 0, k: 100 }

Ключевые возможности

Альтернативы конвертеру HEX в CMYK

Примеры HEX в CMYK

#3b82f6

#FF5733

#0F172A

#FF0000

Распространённые конвертации HEX → CMYK

Справочная таблица 10 канонических цветов с их HEX и эквивалентами наивного CMYK. Значения используют учебную формулу `K = 1 - max(R,G,B); C = (1-R-K)/(1-K)`, округлённую до целого процента. **Напоминание**: это наивные приближения, а не ICC-корректные готовые к печати значения. Для производственных тиражей подтвердите через ICC-профиль вашей типографии против реального пресса, краски и бумаги.

Как пользоваться конвертером HEX в CMYK

1. 1

   Вставьте HEX-код в поле HEX

   Бросьте любое HEX-значение во ввод HEX — с ведущим `#` или без, в 3-значном сокращении (`#F73`), 6-значной полной форме (`#FF5733`), 4-значном альфа-сокращении (`#F738`) или 8-значной альфа-полной форме (`#FF5733CC`). Парсер нормализует все пять входных форм в один и тот же внутренний цвет перед получением CMYK. Регистр не имеет значения (`#FF5733` и `#ff5733` парсятся идентично). Невалидные символы или неверное число цифр дают тихую инлайн-ошибку; валидный HEX обновляет все остальные поля форматов в реальном времени, включая CMYK. Альфа игнорируется при выводе CMYK — у краски нет прозрачности.

2. 2

   Считайте проценты CMYK из поля CMYK

   Поле CMYK поднимает значение как четыре процента каналов: `cmyk(76%, 47%, 0%, 4%)` для Tailwind blue-500. Каналы — Cyan, Magenta, Yellow, Key (чёрный). Каждый процент представляет покрытие краской — 0% означает отсутствие краски для этого канала, 100% — полное покрытие. **Напоминание**: это наивная инверсия sRGB, а не конвертация через ICC-профиль. Используйте как стартовую оценку; подтвердите финальные значения через ICC-конвейер типографии против реального пресса, краски и бумаги перед любым производственным запуском.

3. 3

   Нажмите Copy, чтобы получить строку CMYK

   У каждой карточки формата есть кнопка Copy справа. Один клик — и значение оказывается в буфере обмена; метка кнопки кратко переключается на «Copied!», чтобы вы знали. Скопированная строка — стандартная нотация CMYK (`cmyk(76%, 47%, 0%, 4%)`), готовая, чтобы бросить её в дизайн-бриф или письмо поставщику. Для платформенно-специфичного вывода, где CMYK не является нативным (CSS, SwiftUI, Compose, Flutter все работают в RGB-ориентированных цветовых пространствах), раздел Copy as code под пипеткой выводит эквивалент в формате каждой платформы — полезно, когда нужно выразить тот же цвет одновременно для экрана и для печати.

4. 4

   Сверьтесь с RGB, HSL, OKLCH, именованным цветом

   Тот же HEX, который вы вставляете, зажигает и остальные поля форматов — RGB для вызовов canvas и аппаратуры, HSL для legacy CSS, OKLCH и OKLAB для современных перцептивно-равномерных дизайн-систем (Tailwind v4, shadcn/ui), HSV и HWB для пипеток в UI дизайнеров, и ближайший именованный CSS-цвет для прозы документации. Вы никогда не заперты только в HEX → CMYK. Пипетка (квадрат SL + слайдер оттенка + слайдер альфы) управляет всеми девятью одновременно, а на браузерах Chromium кнопка EyeDropper берёт любой пиксель на экране, включая за пределами браузера.

5. 5

   Отправляйте в типографию исходный HEX (не CMYK)

   Лучший рабочий процесс подготовки к печати — отправить в типографию исходный HEX (или тройку OKLCH) и позволить препресс-команде подготовить готовый к печати CMYK через подходящий ICC-профиль (US Web Coated SWOP v2, Fogra39, Japan Color 2011 Coated или кастомный профиль конкретного пресса). Наивный вывод CMYK здесь — для ваших внутренних оценок, брифов поставщикам и работы proof-of-concept, но не для прямого производства. Сочетайте наивный CMYK с исходным HEX в любом документе спецификации, чтобы у печатника был авторитетный референс.

Типичные ошибки HEX / CMYK

Спецификация, отправленная в типографию:
Брендовый цвет CMYK: cmyk(76%, 47%, 0%, 4%)
(вывод наивной формулы, без ICC-конвертации)
Печатник отгружает готовые к печати файлы без изменений.
Финальная вещь: обесцвеченный, не-брендовый синий.

Спецификация, отправленная в типографию:
Исходный брендовый цвет: #3b82f6
Наивная оценка CMYK: cmyk(76%, 47%, 0%, 4%)
Целевой пресс: ICC-корректно через US Web Coated SWOP v2
Печатник запускает ICC-конвертацию: cmyk(82%, 53%, 0%, 0%) (пример сдвига)
Финальная вещь: соответствует цифровой пробе.

Одобрить экранный цвет, ожидать идентичной печати:
#FF0000 выглядит ярко-красным на мониторе
Наивно cmyk(0%, 100%, 100%, 0%)
Печатник запускает ICC: ближайший в цветовом охвате CMYK
Финальная печать: красный со сдвигом в оранжевый, ~20% менее насыщенный.
Реакция: «это неверно, перепечатать».

Заложите время на мокрую пробу; примите несовпадение цветового охвата:
#FF0000 → приближение CMYK: cmyk(0%, ~95%, ~95%, 0%) ICC
Мокрая проба на реальной бумаге: со сдвигом в оранжевый, менее насыщенный
Дизайн-команда одобряет пробу как новый референс
Финальная печать соответствует одобренной пробе.

Указать высокопокрывающий тёмный цвет без проверки итога:
cmyk(85%, 85%, 85%, 95%) = 350% общего покрытия
Отправить на газетный пресс (лимит 220%)
Результат: краска не сохнет, листы слипаются, размазывание.

Проверьте общее покрытие краской против лимита пресса:
cmyk(85%, 85%, 85%, 95%) = 350% — выше лимита 220% газетной бумаги
Снизить через GCR / UCR: cmyk(40%, 30%, 30%, 80%) = 180% итого
Вписывается в лимит, печатает чисто, сохнет в срок.

Указать брендовый CMYK без деталей бумаги:
Брендовый красный: cmyk(0%, 95%, 80%, 0%)
Печать на глянцевой мелованной И немелованной из того же файла
Глянцевая: яркий красный, как ожидалось
Немелованная: тусклый оранжево-красный, выглядит не-брендово.

Указывайте CMYK по подложке, ICC-корректно для каждой:
Брендовый красный на глянцевой мелованной: cmyk(0%, 95%, 80%, 0%) через Fogra39
Брендовый красный на немелованной: cmyk(0%, 85%, 70%, 0%) через Fogra47
Каждая подложка получает готовый к печати CMYK, настроенный под её ICC-профиль.
Обе вещи читаются как один и тот же брендовый красный на прессе.

Кто пользуется HEX в CMYK

Дизайнеры печати, готовящие брифы для поставщиков

Перед заказом печатной работы дизайнеры отправляют в типографию бриф с брендовыми цветами, указанными и в HEX (источник истины), и в приближении CMYK (чтобы печатник мог прикинуть стоимость краски и время на пробы). Вставьте каждый брендовый HEX сюда, скопируйте наивный CMYK, бросьте оба в документ спецификации. Затем печатник запустит реальную ICC-конвертацию против профиля своего пресса и подготовит готовый к печати CMYK перед изготовлением форм. Не пропускайте исходный HEX — это то, чему типография доверится для финальной конвертации.

Бренд-менеджеры, оценивающие стоимость печати до сметы

Сметы печати частично зависят от общего покрытия краской. Наивный CMYK даёт быструю прикидку загрузки краски для предлагаемой палитры: цвета с высоким K дешевле (меньше краски, быстрее сушка), цвета с высоким CMY дороже (больше краски, дольше сушка, риск насыщения бумаги). Вставьте кандидата брендового HEX, считайте проценты CMYK — и у вас защищаемое число для разговора о бюджете с печатным провайдером перед заказом полной настройки пресса.

Дизайнеры упаковки, сверяющие экран и печать

Работа над упаковкой живёт в обоих пространствах одновременно — страница e-commerce рендерится в sRGB HEX на экранах, физическая коробка печатается в CMYK на картонной подложке. Используйте одновременный вид HEX + CMYK, чтобы заметить цвета, которые будут читаться драматически по-разному на двух носителях (сильно насыщенные красные, глубокие синие, яркие зелёные, превышающие цветовой охват CMYK), и пометьте эти цвета либо для обработки в Pantone-споте, либо для намеренной корректировки брендовой системы, принимающей разницу цветового охвата.

Маркетинговые команды, выпускающие мультиканальные кампании

Мультиканальная кампания обычно доставляет один и тот же брендовый ассет на сайт (sRGB HEX), в email-рассылку (sRGB HEX с sRGB fallback), в графику соцсетей (sRGB HEX на платформах, сжимающих в AVIF/WebP), на печатные плакаты (CMYK на мелованной бумаге) и в direct mail (CMYK на немелованной бумаге). Сконвертируйте исходный HEX один раз, считайте наивный CMYK для печатных материалов, передайте оба в производственную команду вместе со спецификацией профиля пресса, чтобы они могли провести корректную ICC-конвертацию.

Дизайнеры, делающие короткие тиражи на цифровом прессе

Для разовых визиток, прототипов упаковки и малотиражных маркетинговых материалов, идущих через цифровой пресс (HP Indigo, Kodak NexPress, Xerox iGen), наивное приближение CMYK отслеживает реальный вывод ближе, чем на офсете, потому что цифровые прессы работают с более плотным управлением цветом, встроенным в RIP. Всё ещё не готово к печати, но ближе — а экономика короткого тиража делает пробную печать перед запуском дешёвой. Вставьте HEX, считайте CMYK, сделайте пробу.

Дизайнеры, переносящие старые логотипы с экрана на печать

Старые веб-only брендовые ассеты часто живут только как HEX-коды, без формальной спецификации CMYK. Когда бренд впервые должен появиться на печатной визитке, брошюре или баннере выставки, команде нужна стартовая точка для CMYK. Вставьте каждый legacy HEX сюда, считайте наивный CMYK, передайте оба печатнику для ICC-корректной конвертации. Это канонический рабочий процесс «digital-first бренд идёт в печать», который рано или поздно ударяет по каждой дизайн-команде.

Преподаватели, объясняющие разницу цветовых моделей

Одновременный вид HEX + RGB + CMYK делает аддитивно-vs-субтрактивный контраст очевидным. Чистый красный (`#FF0000`) рендерится как `rgb(255, 0, 0)` на экране и `cmyk(0%, 100%, 100%, 0%)` в наивном CMYK — студенты видят инверсию напрямую. Перейдите к цвету OKLCH с широким охватом, наблюдайте, как CMYK насыщается, а sRGB обрезается. Готовая для класса демонстрация того, почему конвертация экран-в-печать — сложная задача и почему наивная формула — это не то же самое, что управление цветом с учётом ICC.

Математика HEX в CMYK и оговорка про ICC

Наивная формула CMYK

Работает на нормализованных значениях sRGB (0–1 float из исходных целых 0–255). Шаг первый: `K = 1 - max(R, G, B)`. Это устанавливает K в количество «недостающей яркости» — чистый белый (R=G=B=1) даёт K=0, чистый чёрный (R=G=B=0) даёт K=1. Шаг второй: `C = (1 - R - K) / (1 - K); M = (1 - G - K) / (1 - K); Y = (1 - B - K) / (1 - K)`. Это вычисляет каждый канал CMY как оставшуюся инверсию после учёта K. Шаг третий: умножьте каждый канал на 100 для формы процента и округлите до ближайшего целого для отображения. Короткое замыкание для чистого чёрного: когда max(R,G,B) = 0, знаменатель (1 - K) равен нулю, поэтому возвращаем `cmyk(0%, 0%, 0%, 100%)` напрямую.

Почему это НЕ ICC-конвертация

Реальная конвертация через ICC-профиль применяет многоступенчатое преобразование: исходный профиль (sRGB) → Profile Connection Space (обычно CIE LAB или XYZ) → выходной профиль (US Web Coated SWOP v2, Fogra39 и т. д.). Каждая стадия кодирует эмпирические измерения реальной комбинации «краска-бумага-пресс» — спектральные кривые отражения, растискивание на различных уровнях покрытия, общий лимит краски, корректировки серого баланса. Наивная формула не делает ничего из этого. Она трактует CMYK как математическую абстракцию, а не как физику впитывания краски, поэтому вывод может отклоняться на 5–15% по каналу от того, что выдаёт ICC-конвейер. Для производства запустите конвертацию в Photoshop, Illustrator или InDesign против целевого профиля пресса или передайте исходный HEX в препресс-команду типографии.

Стандартные ICC-профили по регионам и прессам

**Североамериканский офсет**: US Web Coated SWOP v2 (SWOP-сертифицированный стандарт для мелованной бумаги, используется большинством коммерческих офсетных типографий США); GRACoL 2006 Coated #1 для премиальной мелованной. **Европейский офсет**: Fogra39 (стандарт ISO 12647-2 для мелованной бумаги); Fogra51 для новой премиальной мелованной; Fogra52 для немелованной; Fogra47 для газетной. **Японский офсет**: Japan Color 2011 Coated; Japan Color 2003 Web Coated для рулонного офсета. **Цифровые прессы**: каждый производитель поставляет свой ICC-профиль для конкретной модели пресса и набора красок (HP Indigo IndiChrome, Kodak NexPress E-Series, Xerox iGen). Всегда подтверждайте с типографией — у многих кастомный профиль конкретного пресса, заменяющий общие стандарты.

Растискивание, общий лимит краски и эффекты подложки

**Растискивание**: точки краски физически расплываются, попадая на впитывающую бумагу, увеличивая видимое покрытие на 10–30% по каналу; оператор пресса компенсирует кривыми в RIP. Наивная формула полностью игнорирует это. **Общий лимит краски**: офсетные прессы ограничивают общее покрытие C+M+Y+K около 280–320%, чтобы избежать оттискивания (влажная краска переходит на оборот следующего листа) и предотвратить насыщение бумаги; газетная бумага ограничивает около 220%. Наивная формула может выдать 400% общего покрытия для тёмных цветов, что было бы непечатаемо. **Подложка**: кремовая бумага сдвигает белую точку и согревает каждый напечатанный цвет; немелованная бумага впитывает больше краски и приглушает насыщенность; глянцевая мелованная удерживает больше насыщенности, но отражает свет иначе.

Почему существует K (генерация чёрного)

В теории C+M+Y по 100% каждый даёт чёрный. На практике выходит мутный тёмно-коричневый, потому что реальные краски не идеальные поглотители — каждая отражает какой-то свет на каждой длине волны, идеальное наложение невозможно из-за смешения красок и растискивания. K решает три проблемы: чистая чёрная краска даёт чистый чёткий чёрный для типографики и теней; подстановка K позволяет формуле уменьшить общее покрытие краской (дешевле краска, быстрее сушка, меньше насыщение бумаги); и выделенная форма K сохраняет приводку текста плотнее (нужно совместить только одну форму вместо трёх для основного текста, построенного из CMY). K = 1 - max(R,G,B) в наивной формуле — простейшая возможная стратегия генерации K; реальный препресс использует стратегии UCR (Under Color Removal) и GCR (Gray Component Replacement), которые перемещают больше или меньше CMY в K в зависимости от характеристик пресса.

Несовпадение цветового охвата: красные sRGB, недостижимые в CMYK

У sRGB и CMYK по-разному сформированные цветовые охваты. sRGB может достичь насыщенных красных, глубоких синих и ярких зелёных, выпадающих из печатного диапазона CMYK — знаменитый случай «чистый красный на экране выглядит оранжевым в печати». Наивная формула сообщает `cmyk(0%, 100%, 100%, 0%)` для `#FF0000`, но никакая реальная комбинация красок на любом уровне покрытия не может воспроизвести этот точный экранный цвет на бумаге. ICC-конвертация использует один из четырёх rendering intents для обработки несовпадения цветового охвата: Perceptual (сжимает весь исходный цветовой охват, чтобы вписаться в целевой, сохраняя общие цветовые отношения), Relative Colorimetric (обрезает вне-охватные цвета до ближайшего внутри-охватного значения, сохраняет внутри-охватные точно), Absolute Colorimetric (похож на Relative, но не компенсирует разницу белых точек) или Saturation (сохраняет насыщенность ценой точности, используется в основном для бизнес-графики).

Стабильность переходов туда-обратно через источник истины в OKLCH

Внутреннее каноническое представление инструмента — OKLCH (по дизайну унифицированного хаба), а не CMYK. CMYK получается из OKLCH на каждом нажатии клавиши через цепочку OKLCH → OKLAB → XYZ D65 → линейный sRGB → sRGB → наивный CMYK. Это значит, что прямое редактирование CMYK тоже поддерживается: распарсите четыре процента, запустите обратную формулу для восстановления sRGB (`R = (1 - C) * (1 - K); G = (1 - M) * (1 - K); B = (1 - Y) * (1 - K)`), обновите источник OKLCH, затем перерендерьте каждое другое поле. Переходы туда-обратно стабильны, но lossy на краях цветового охвата CMYK, где обратное отображение направляет несколько цветов sRGB в одно и то же приближение CMYK.

Лучшие практики для HEX / CMYK

Подтверждайте реальный CMYK через ICC-профиль вашей типографии

Перед любым производственным запуском подтвердите готовый к печати CMYK через ICC-конвейер типографии против реальной комбинации пресса, краски и бумаги. Наивный вывод здесь может отклоняться на 5–15% по каналу от ICC-корректного значения, чего достаточно, чтобы превратить чёткий красный в мутный оранжевый или глубокий брендовый синий в обесцвеченный navy. Препресс-команда типографии — авторитетный источник — передайте им исходный HEX (а не наивный CMYK) и позвольте им провести свою конвертацию против US Web Coated SWOP v2, Fogra39, Japan Color 2011 Coated или кастомного профиля конкретного пресса.

Используйте CMYK этого инструмента как стартовую оценку для бюджета и охвата

Наивный CMYK действительно полезен для прикидок: общее покрытие краской для разговоров о стоимости, грубое доминирование K для проверки темноты, быстрая проверка цветового охвата на вопрос «вообще напечатается ли этот цвет». Используйте его для бюджетного звонка, брифа поставщику, разговора об охвате. Затем передайте исходный HEX в типографию для реальной готовой к печати конвертации. Не отгружайте наивный вывод как производственный результат; отгружайте как артефакт планирования.

Для подбора по Pantone библиотека спот-цветов типографии перевешивает всё

Pantone (и HKS, RAL, Toyo) спот-цвета — это предварительно смешанные краски со своей фиксированной цветовой идентичностью — они не строятся из составных каналов CMYK. Если ваш бренд требует подбора по Pantone (распространено для упаковки, премиальной печати, всего, где точный цвет критичен), типография использует краску Pantone напрямую, а CMYK в картину не входит. Укажите номер Pantone в брифе; игнорируйте и наивный, и ICC-корректный CMYK для этого цвета. CMYK имеет значение только тогда, когда работа идёт чисто в составных цветах без спот-краски.

Отправляйте в типографию исходный HEX или OKLCH, а не наивный CMYK

Препресс-команде типографии нужен авторитетный исходный цвет, чтобы провести конвертацию против профиля своего пресса. Передайте им исходный HEX (или OKLCH для современных брендовых систем) плюс любые callouts по спот-цветам (номера Pantone). Никогда не передавайте наивный CMYK как готовый результат — у них нет способа узнать, пришли ли значения из наивной формулы, старой Photoshop-конвертации против другого профиля пресса или реальной ICC-корректной конвертации против правильного профиля. Исходные данные снимают неоднозначность.

Проверьте, что канал K разумен (K=100 только для чистого чёрного)

Сделайте sanity-проверку значения K после конвертации. Чистый чёрный (`#000000`) должен дать K=100 при C=M=Y=0. Тёмные почти-чёрные цвета должны попасть в диапазон K=80–95 при низком CMY. Полутона (средняя насыщенность, средняя светлота) должны попасть куда-то в K=20–60. Яркие насыщенные цвета должны сидеть на K=0 с одним-двумя каналами CMY на высоком покрытии. Если вы видите значения K за пределами этих паттернов для воспринимаемой яркости данного цвета, перепроверьте входной HEX — опечатка может тихо перевернуть цвет с «почти-чёрного» на «почти-белый». Вывод CMYK делает ошибку ввода видимой.

Сделайте мокрую пробу на реальной бумаге перед производством

Для любого значимого производственного запуска получите мокрую пробу от типографии на реальной бумажной подложке с реальными красками перед подписанием. Soft-пробы (экранные ICC-симуляции) полезны, но никогда не идеальны — текстура бумаги, плотность краски и спектр освещения просмотра все влияют на финальное восприятие. Заложите время и деньги хотя бы на одну итерацию мокрой пробы. Наивный CMYK здесь, ICC-корректный CMYK и мокрая проба — три всё более точных снимка одного и того же цвета; мокрая проба — единственный, который точно соответствует финальной печатной вещи.

Документируйте исходный HEX рядом с финальным CMYK

Когда типография подготовит готовый к печати CMYK и вы подпишете пробу, задокументируйте и исходный HEX, и финальный ICC-корректный CMYK в спецификации бренда. Через полгода, когда кто-то должен будет перепечатать или расширить палитру, оба значения сохраняют полный след происхождения — источник для повторной конвертации против другого пресса, зафиксированный CMYK для перепечатки на том же прессе. Наивный CMYK принадлежит только стадии брифа; готовый к печати CMYK принадлежит зафиксированной спецификации.

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