Нужна помощь в понимании разницы между RGB и CMYK [дубликат]

Я веб-разработчик, считающий себя графически подкованным, но я далек от графического дизайнера — все, что мне нужно, можно сделать в чистом HTML и CSS. Директор по маркетингу в нашей компании занимается укреплением брендинга в масштабах всей компании. Теперь, когда дело доходит до одежды, публичного сайта и почти всего остального, это имеет решающее значение. Но с нашим собственным собственным веб-программным обеспечением (которое является моей областью), эстетика является последней заботой каждого по сравнению с исправлением ошибок, функциями и т. д. Однако я пытаюсь сделать наше веб-приложение хотя бы немного более совместимым с брендом. Поэтому, когда директор по маркетингу раздал мне актуальное руководство по цветам в формате PDF, я был в восторге! Однако я быстро запутался. Вот образец из справочника по цветам:

Руководство по цветам моей компании

Я знаю, что CMYK в первую очередь предназначен для печати, а не для Интернета, и это все, что я о нем знаю. Однако вы заметите, что предоставленные значения RGB и Hex визуально создают цвета, отличные от отображаемых. Возьмем, к примеру, черный цвет. В нем говорится, что эквивалент RGB CMYK 0,0,0,100 равен 0,0,0. Однако легко сказать, что это не «настоящий» черный (по крайней мере, на моем дисплее), и сравнить его с RGB 0,0,0, который я сгенерировал в Paint (использование Windows здесь бестактно? : г) подтверждает это. Если я сделаю снимок экрана с руководством по цвету в формате PDF, а затем использую Paint для захвата цвета, он скажет мне, что его RGB равен 35,31,32.

Итак, что мне здесь не хватает? Если я использую значения RGB/Hex, предоставленные директором по маркетингу, цвета моего сайта не будут выглядеть так же, как при просмотре этого PDF-файла, и мои попытки объяснить ему это в терминах веб-дизайна прошли мимо его головы.

Есть ли у кого-нибудь рекомендации о том, как мне действовать и как мне реализовать эти цвета в Интернете?

Когда они экспортировали PDF, у них, вероятно, был включен «насыщенный черный». Это не CMYK (0,0,0,100). Когда (0,0,0,100) отображается в Acrobat, он выполняет преобразование цвета, чтобы приблизиться к тому, как он будет выглядеть на белой бумаге, обычно это заставляет людей думать, что он будет «выглядеть бледным», но всегда нужно помнить, что CMYK дисплей всегда является симуляцией чего-то, что не может быть воспроизведено с произвольной точностью в аддитивной цветовой модели RGB. Вы должны просто использовать их ценности, а не пытаться реконструировать их процесс принятия решений. Отправная точка: «относительная и перцептивная колориметрия».
Спасибо @Yorik и Зак, ваше объяснение и ссылки в значительной степени прояснили для меня.
@ZachSaucier, мне очень не нравится твоя вторая ссылка.
@joojaa, в чем проблема со второй ссылкой? (на самом деле я не люблю оба!)
Хорошо, попытался изменить свой ответ на что-то менее техническое и более понятное.

Ответы (3)

Учтите, что воспринимаемый цвет гораздо сложнее, чем кажется на первый взгляд. Возьмем известную иллюзию шахматной доски. Можно показать, что квадраты, помеченные буквами А и В, на самом деле одного цвета. Да, твой мозг врёт.

известная иллюзия шахматной доски

Изображение 1 : Иллюзия шахматной доски, квадраты A и B имеют одинаковые значения цвета. (см. здесь или здесь , если вы не верите этому утверждению)

Цвет, воспринимаемый человеком, зависит от окружающих цветов. Теперь по техническим причинам цвета печати Panatone, CMYK (Process color) и цвета монитора RGB в большинстве случаев не будут совпадать (они могут совпадать в подмножестве, но их диапазон различается). По той же технической причине черный цвет обработки не такой черный, как черный на мониторе. О техническом контексте можно было бы написать еще много.

Теперь, поскольку цвет окружен другой черной точкой, влияет на то, как воспринимаются все другие цвета, это означает, что все остальные цвета должны быть выполнены отдельно в этом контексте. Таким образом, цвета печати должны быть протестированы в процессе печати в калиброванном рабочем процессе с управлением цветом. Panatone необходимо протестировать на реальном Panatone и т. д.

То, что вы заметили, не является ошибкой

Предположительно, человек, разработавший для вас руководство по цвету, довольно много знал о том, как цвет реагирует в таких ситуациях. Так что это не ошибка, что цвета не совпадают с тем, что показывает ваш монитор, особенно если ваша система не откалибрована для рабочих процессов печати. Даже если вы полностью управляете цветом, должна быть разница, например, если черный цвет отличается.

Характерно, что не все руководства по стилю имеют задокументированное обоснование и объяснение всего. Для того, чтобы это сделать, см. Руководство по материальному дизайну от Google. Большинство графических дизайнеров могли бы сделать подобное руководство, но большинство клиентов не могли позволить себе платить, поэтому это делается нечасто.

Чтобы получить наиболее точные цвета для Интернета, придерживайтесь значений RGB или Hex, предоставленных с образцами цветов, и используйте их в CSS.

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

Я рад вашему так хорошо сформулированному вопросу.

Возьмем, к примеру, черный цвет. В нем говорится, что эквивалент RGB CMYK 0,0,0,100 равен 0,0,0. ... он говорит мне, что его RGB 35,31,32.

Черный — это очень специфический случай.

Это совершенно верно. Черный 0,0,0,100 не является «настоящим» черным, но он используется в качестве стандартного черного для текста. Например, в случае логотипа вы используете это значение, например, в 2 случаях.

1) Вы хотите сэкономить, поэтому используете только одну краску.

2) Вы не хотите, чтобы ваш логотип был «размытым» из-за использования дополнительных чернил для его дальнейшего затемнения.

В некоторых случаях, например фотография глубокой вселенной, вы используете комбинацию чернил, например, c75m68y67k90. Эти значения различаются в зависимости от типа бумаги, на которой вы печатаете, включая страну, в которой вы живете. Это значение задается цветовым профилем комбинации устройство+бумага+чернила.


Просто придерживайтесь значений RGB и hex. Если вы используете такую ​​программу, как Photoshop, отключите цветовые профили или используйте sRGB для файла RGB.