Benötigen Sie Hilfe beim Verständnis des Unterschieds zwischen RGB und CMYK [Duplikat]

Ich bin ein Webentwickler, der sich einbildet, grafisch versiert zu sein, aber ich bin weit davon entfernt, ein Grafikdesigner zu sein – alles, was ich brauche, kann in reinem HTML und CSS gemacht werden. Der Marketingleiter unseres Unternehmens hat das Branding unternehmensweit konsolidiert. Wenn es um Bekleidung, die öffentliche Website und fast alles andere geht, ist dies von entscheidender Bedeutung. Aber bei unserer privaten Inhouse-Websoftware (das ist meine Domäne) ist die Ästhetik das letzte Anliegen aller im Vergleich zu Fehlerbehebung, Funktionen usw. Ich versuche jedoch, unsere Web-App zumindest ein wenig markenkonformer zu machen. Als der Marketingleiter mir also einen aktuellen Farbleitfaden im PDF-Format zuteilte, war ich begeistert! Ich war jedoch schnell verwirrt. Hier ist ein Beispiel aus dem Farbfächer:

Der Farbführer meines Unternehmens

Ich weiß, dass CMYK hauptsächlich für den Druck und nicht für das Internet gedacht ist, was so ziemlich alles ist, was ich darüber weiß. Sie werden jedoch feststellen, dass die bereitgestellten RGB- und Hex-Werte visuell andere Farben als die angezeigten erzeugen. Nehmen Sie zum Beispiel das Schwarze. Es besagt, dass das RGB-Äquivalent von CMYK 0,0,0,100 0,0,0 ist. Es ist jedoch leicht zu erkennen, dass dies kein "echtes" Schwarz ist (zumindest auf meinem Display), und es mit einem RGB von 0,0,0 zu vergleichen, das ich in Paint generiert habe (ist die Verwendung von Windows hier ein Fauxpas? : D) bestätigt dies. Wenn ich einen Screenshot des Farbleitfaden-PDF mache und dann Paint verwende, um die Farbe zu erfassen, sagt es mir, dass sein RGB 35,31,32 ist.

Also was übersehe ich hier? Wenn ich die vom Marketingleiter bereitgestellten RGB/Hex-Werte verwende, sehen die Farben meiner Website nicht so aus wie in diesem PDF, und meine Versuche, ihm dies in Webdesign-Begriffen zu erklären, gingen über seinen Kopf.

Hat jemand eine Anleitung, wie ich vorgehen soll und wie ich diese Farben im Web implementieren soll?

Als sie das PDF exportierten, hatten sie wahrscheinlich "sattes Schwarz" aktiviert. Dies ist nicht CMYK(0,0,0,100). Wenn (0,0,0,100) in Acrobat angezeigt wird, führt es eine Farbtransformation durch, um ungefähr zu sehen, wie es auf weißem Papier gedruckt aussehen wird. Dies lässt die Leute normalerweise denken, dass es „blass aussehen“ wird, aber man muss sich immer an CMYK erinnern Darstellung ist immer eine Simulation von etwas, das in einem additiven RGB-Farbmodell nicht beliebig genau reproduziert werden kann. Sie sollten einfach ihre Werte verwenden und nicht versuchen, ihren Entscheidungsprozess zurückzuentwickeln. Ausgangspunkt: „relativ vs. perzeptiv kolorimetrisch“
Danke @Yorik und Zach, deine Erklärung und Links haben es für mich ziemlich geklärt.
@ZachSaucier Ich mag deinen zweiten Link wirklich nicht.
@joojaa was ist das Problem mit dem zweiten Link? (Eigentlich mag ich beides nicht!)
Ok, ich habe versucht, meine Antwort in etwas weniger Technisches und schneller Verständliches zu ändern.

Antworten (3)

Bedenken Sie, dass die wahrgenommene Farbe viel komplexer ist, als es ohne weiteres ersichtlich ist. Nehmen Sie die bekannte Schachbrett-Illusion. Es kann gezeigt werden, dass die mit A und B bezeichneten Quadrate tatsächlich die gleiche Farbe haben. Ja, dein Gehirn lügt.

bekannte Schachbrett-Illusion

Bild 1 : Die Schachbrett-Illusion, Quadrate A und B haben die gleichen Farbwerte. (siehe hier oder hier, wenn Sie diese Aussage nicht glauben)

Die von einem Menschen wahrgenommene Farbe wird durch die Umgebungsfarben beeinflusst. Aus technischen Gründen stimmen jetzt die Druckfarben Panatone, CMYK (Prozessfarbe) und Monitor-RGB-Farben meistens nicht überein (sie können in einer Teilmenge übereinstimmen, aber ihr Bereich ist unterschiedlich). Aus einem ähnlichen technischen Grund ist die Prozessfarbe Schwarz nicht so schwarz wie das Schwarz in einem Monitor. Über die technischen Zusammenhänge ließe sich noch einiges schreiben.

Da nun die Farbe von einem anderen Schwarzpunkt umgeben ist, wirkt sich dies auf die Art und Weise aus, wie alle anderen Farben wahrgenommen werden. Dies bedeutet, dass alle anderen Farben in diesem Zusammenhang separat ausgeführt werden müssen. Daher müssen Druckfarben in einem kalibrierten Farbmanagement-Workflow im Druck getestet werden. Panatone muss an einem echten Panatone usw. getestet werden.

Was Sie beobachtet haben, ist kein Fehler

Vermutlich wusste die Person, die den Farbfächer für Sie entworfen hat, einiges darüber, wie Farbe in diesen Situationen reagiert. Es ist also kein Fehler, dass die Farben nicht mit dem übereinstimmen, was Ihr Monitor anzeigt, insbesondere wenn Ihr System nicht für Druckworkflows kalibriert ist. Selbst wenn Sie vollständig farbverwaltet sind, sollte es einen Unterschied geben, wenn sich beispielsweise die Schwarztöne unterscheiden.

Typisch ist, dass nicht alle Styleguides für alles eine dokumentierte Begründung und Erklärung haben. Informationen dazu finden Sie im Material Design Guide von Google. Die meisten Grafikdesigner könnten eine Anleitung wie diese erstellen, aber die meisten Kunden könnten es sich nicht leisten, zu bezahlen, also wird es nicht sehr oft gemacht.

Um die genauesten Farben für das Web zu erhalten, bleiben Sie bei den RGB- oder Hex-Werten, die mit den Musterfarben bereitgestellt werden, und verwenden Sie sie im CSS.

Der Versuch, CMYK in RGB umzuwandeln, wird nie ganz übereinstimmen, insbesondere bei so vielen Unterschieden in der Art der Anzeige, die Sie haben.

Ich freue mich über Ihre so gut formulierte Frage.

Nehmen Sie zum Beispiel das Schwarze. Es besagt, dass das RGB-Äquivalent von CMYK 0,0,0,100 0,0,0 ist. ... es sagt mir, dass sein RGB 35,31,32 ist.

Das Schwarze ist ein sehr spezieller Fall.

Das ist völlig richtig. Ein 0,0,0,100-Schwarz ist kein "echtes" Schwarz, wird aber als Standard-Schwarz für einen Text verwendet. Im Falle eines Logos verwenden Sie diesen Wert beispielsweise in zwei Fällen.

1) Sie wollen Kosten sparen, also verwenden Sie nur eine Tinte.

2) Sie möchten nicht, dass Ihr Logo "unscharf" wird, indem Sie zusätzliche Tinten verwenden, um es weiter abzudunkeln.

In einigen Fällen, beispielsweise bei einem Foto des tiefen Universums, verwenden Sie eine Kombination von Tinten, beispielsweise c75m68y67k90. Diese Werte variieren je nach Papiertyp, den Sie drucken, einschließlich des Landes, in dem Sie leben. Dieser Wert wird durch ein Farbprofil der Kombination aus Gerät + Papier + Tinte angegeben.


Halten Sie sich einfach an die RGB- und Hex-Werte. Wenn Sie ein Programm wie Photoshop verwenden, deaktivieren Sie die Farbprofile oder verwenden Sie sRGB für eine RGB-Datei.