Ändern des Farbraums einer Website - oder eine andere Möglichkeit, lebendige Farben zu erhalten

Ich habe eine Website, die einige sehr lebendige Farben verwendet. Einer von ihnen ist laut Photoshop (in Hex):#75d0ed

Betrachtet man diese Farbe Photoshop (mit einem Adobe RGB (1998)) Arbeitsbereich, ist sie elektrisch blau, aber im Browser (was ich vermute sRGB) sieht es sehr langweilig aus.

Kann ich etwas dagegen tun? Gibt es eine Möglichkeit, den Farbraum einer Website so zu ändern, dass es nicht sRGB ist? Oder gibt es eine andere Möglichkeit, die lebendigen Photoshop-Farben auf einer Website zu erhalten?

Der Adobe RGB-Wert 117 208 237 (#75d0ed) liegt außerhalb des sRGB-Farbraums.

Antworten (3)

Beim Arbeiten im sRGB-Farbraum gibt es zwei Probleme mit dieser Farbe.

1) Die angegebene Farbe (Adobe RGB 117 208 237 oder #75d0ed) ist in Bezug auf den Adobe RGB-Farbraum definiert.
Wenn ein unwissender Browser diesen RGB-Wert direkt als sRGB-Wert verwendet, wäre das Ergebnis offensichtlich eine völlig falsche Farbe:
Geben Sie hier die Bildbeschreibung ein

2) Die angegebene Farbe liegt außerhalb des sRGB-Farbraums.
Daher kann der Adobe RGB-Wert des angegebenen Farbwerts nicht korrekt in einen entsprechenden sRGB-Wert konvertiert werden.

Sie können zwei Lösungen für diese Probleme in Betracht ziehen:

a)
Verschiedene Browser unterstützen ICC-Profile (ICC-Version 2 oder sogar Version 4).
Sie können im Adobe RGB-Farbraum arbeiten und die angegebene Farbe verwenden, wenn Sie das Adobe RGB (1998) ICC-Profil einbetten.
Beispielsweise haben die beiden folgenden Quadrate denselben RGB-Wert 117 208 237; Das erste Quadrat hat jedoch das Adobe RGB (1998) ICC-Profil und das zweite Quadrat das sRGB IEC61966-2.1 ICC-Profil.
Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein
Wenn beide Farben identisch aussehen, unterstützt Ihr Browser keine ICC-Profile (z. B. Internet Explorer 8). Weitere Tests finden Sie unter Ist Ihr System bereit für ICC Version 4?

b)
Sie können die Adobe RGB-Werte in sRGB-Werte konvertieren und dann im sRGB-Farbraum arbeiten. Wenn Sie den Adobe RGB-Wert nicht korrekt in einen entsprechenden sRGB-Wert umwandeln können (wie im angegebenen Beispiel, da die Farbe außerhalb des sRGB-Farbraums liegt), möchten Sie möglicherweise die am besten passende sRGB-Farbe auswählen.
Beispielsweise entspricht der angegebene Adobe RGB-Wert 117 208 237 dem sRGB-Wert –8,3 209,2 238,7, der außerhalb des sRGB-Farbraums liegt. Der sRGB-Wert der am besten passenden sRGB-Farbe beträgt 0 209 239.
Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

Hinweis: Das tatsächliche Erscheinungsbild dieser Beispiele hängt von der Leistungsfähigkeit und Kalibrierung Ihres Systems ab.

Fantastisch. Wie fügen Sie Ihrer Webseite jedoch ein ICC-Profil hinzu?
@DjangoReinhardt Für meine Beispiele habe ich die ICC-Profile zu den einzelnen Bilddateien hinzugefügt. Kompatible Browser berücksichtigen die eingebetteten ICC-Profile ohne weitere Änderungen an der Webseite. Ich weiß nicht, welche anderen Objekte das Einbetten von ICC-Profilen unterstützen (einige sind hier aufgeführt ).
Das sieht vielversprechend aus: w3.org/TR/2003/CR-css3-color-20030514/#icc-color
Sehr schön Loong, danke für deine Antwort. Dein Profilbild sieht vielversprechend aus :) Wie hast du den Wert berechnet? Oder ist es einfach ein Auge zu?
@poor Alle numerischen Werte wurden berechnet; Eine visuelle Beurteilung ist nicht erforderlich. Welchen besonderen Wert meinst du? Die am besten passende sRGB-Farbe erhalten Sie in Photoshop: Sie malen Ihr Bild in Adobe RGB und verwenden dann „In Profil konvertieren…“, um es in sRGB umzuwandeln.
Ok, danke für deine Antwort Loong. Dachte, Sie hätten einen Algorithmus oder ein spezielles Farbwerkzeug verwendet, um es zu konvertieren, wie: github.com/gtaylor/python-colormath

Ja, das liegt am Adobe RGB-Farbraum, der viel größer als sRGB ist .

Best Practice für sRGB ist die Vorschau der Farben im Dialogfeld „Für Web speichern“ . Wenn Sie das Ergebnis sofort sehen möchten, können Sie sRGB als Standardfarbraum in Photoshop einrichten. Klicken Sie auf Bearbeiten > Farbeinstellungen und wählen Sie sRGB als RGB-Arbeitsbereich.

Wenn das Farbprofil der Photoshop-Datei und Ihres Arbeitsprofils nicht übereinstimmen, wird beim Öffnen der Photoshop-Datei ein Dialogfeld angezeigt. Konvertieren Sie die Farben nicht in ein anderes Profil, um Probleme zu vermeiden.

Hinweis: Webseiten werden in sRGB dargestellt, eine Änderung des Farbraums von Browsern ist nicht möglich. Außerdem gibt es keine universelle Displaykalibrierung, sodass sowieso niemand dasselbe Blau auf seinen Bildschirmen sehen wird, aber Sie können versuchen, eine durchschnittliche Farbe davon zu erhalten, indem Sie verschiedene Bildschirme testen.

Weitere Links:

Das dachte ich mir. Schade... der Designer wird sich ärgern! Gibt es keine Möglichkeit dies zu ändern?
@DjangoReinhardt Typischerweise kennen Designer diese Einschränkung.
Der Designer hätte wirklich im sRGB-Raum entwerfen sollen, denke ich. Das wird schwierig, denn das ist die Farbe ihrer Marke.
Wie wird das etwas ändern?
Du verstehst die Situation hier wirklich nicht. Der Designer hat NICHT in sRGB gearbeitet – weshalb er eine Farbe außerhalb dieses Spektrums gewählt hat. Es ist eine Markenfarbe, die im Druck gut funktioniert und in ihren Büros sehr lebendig ist, aber nicht auf ihre Website übertragen wird. Das hat nichts mit dem Farbraum zu tun, in dem ich arbeite.
@DjangoReinhardt Wie gesagt: Designer wissen um diese Einschränkung und bieten normalerweise eine Unternehmensfarbe an, die für alle Fälle und nicht nur für den Druck geeignet ist. Vielleicht gibt es kleine Unterschiede, aber das ist ok, denn man kann auch nicht einfach eine RGB-Farbe in eine Pantone-Farbe umwandeln. Um zu sehen, was Sie tun, ist es wichtig, im richtigen Farbraum zu arbeiten, und Sie müssen ein wenig über Logik/Physik dahinter wissen.
Es sollte ziemlich einfach sein, eine geeignete Webversion der Farbe auszuwählen. Denken Sie daran, dass es keine universelle Displaykalibrierung gibt, sodass sowieso niemand das gleiche Blau auf seinen Bildschirmen sehen wird. Kontrollierte Farben sind online nicht möglich, daher sollten Sie Slack annehmen.
Danke für diesen Hinweis @Yorik! Werde dies der Antwort hinzufügen.
@poor Ihre typische Situation ist in dieser realen Welt nicht aufgetreten. Nichts, was Sie sagen, ändert die einfache Tatsache, dass dieser Designer es nicht getan hat :(
@DjangoReinhardt Hehe - Entschuldigung. Wäre wirklich schön, einfach einen Knopf zu drücken, aber es gibt keinen in der realen Welt :)

Dieser Artikel von Marc Edwards (der auch hier kommentiert) sollte verwendet werden, um Photoshop für die Gestaltung von Websites einzurichten: http://bjango.com/articles/photoshop/

Wenn Sie außerdem mit einer neuen PSD beginnen, sollte das Öffnen eines neuen Dokuments vom Typ „Web“ dies standardmäßig für Sie erledigen (zumindest in Photoshop CC): https://cloudup.com/cjx5xj8jcjO (und wenn Sie nicht „Web“ Dokumenttyp, stellen Sie sicher, dass Sie „Dieses Dokument nicht farblich verwalten“ als Farbprofil auswählen).

Divya Manian, könnten Sie bitte etwas genauer erklären, was wir hinter dem von Ihnen bereitgestellten Link finden und warum er die Frage beantwortet? Auf diese Weise ist Ihre Antwort immer noch von Wert, falls der Link zu einem späteren Zeitpunkt unterbrochen wird. Linkfäule ist der Hauptgrund, warum wir hier nur-Link-Antworten wirklich nicht mögen. Danke für deine Mühe und trage weiter bei!
Ändern des Farbraums einer Website - oder eine andere Möglichkeit, lebendige Farben zu erhalten
AntwortenHierDatenschutz-Bestimmungen1y, 0v