Wie man Farbe für das Netz kalibriert
Wann ist Orange eher rot? Web-Designer, selbst wählerische, ignorieren manchmal die Farbverschiebung auf Monitoren.
Wie kann ein Webdesigner Farben verwalten, wenn die Bildschirme ihrer Benutzer eine beliebige Größe oder Farbe haben oder unter allen Lichtbedingungen betrachtet werden können?
Im Gegensatz zum Beheben von HTML-Fehlern, die sich beim Laden der Seite auf die Browser auswirken, gehört das Erzielen genauer Farben zum Arbeitsprozess des Designers.
Farben können projektübergreifend beibehalten werden, sobald die Probleme verstanden sind. Lesen Sie weiter für die Herausforderungen und Lösungen, um konsistente Farben im Internet zu erhalten.
Können Sie den Unterschied zwischen den Fotos erkennen?
Eines der Bilder ist etwas blauer als das andere. Diese "Farbverschiebung" oder die Gesamttönung eines bestimmten Farbtons könnte vom zufälligen Betrachter unbemerkt bleiben. Eine leichte Veränderung des Farbtons macht das Ganze nicht weniger zu einer Blume oder schmälert das Detail des Tautropfens. Es ist eine kumulative Veränderung.
Im Laufe der Zeit verbrauchen JPEG-Bilder mit maximaler Qualität und 256-Farben-PNG-Symbole wertvolle Bandbreite. Die Komplexität in HTML erhöht die Auslastung des Browsers bei jedem Laden der Seite. Im Gegensatz zu diesen Problemen, die sich beim Besuch der Website addieren, ist das Farbmanagement ein Problem beim Designprozess . Bilder, die auf einem nicht kalibrierten Monitor erstellt wurden, werden im Laufe der Zeit inkonsistent.
Farbverschiebung könnte einen anderen Namen haben: Unaufmerksamkeit.
Wann können wir sagen, dass die Farbe einer Grafik der Seite nahe genug ist? An welchem Punkt ist die Farbe eines Fotos zu ungenau? Welche Details sind für das Projekt als Ganzes nicht relevant? Jeder kann unterschiedliche Antworten haben, aber niemand, der digitale Bilder ernst nimmt, kann die Farbkalibrierung ignorieren.
Die Druckindustrie hat Jahrzehnte damit zu kämpfen, akkurate Farben zu bekommen. Sicherzustellen, dass die exakt gleichen Farben in allen Phasen der Produktion erscheinen - einschließlich in verschiedenen Monitoren, Bürodruckern und High-End-Druckmaschinen - hat eine eigene Industrie von Kalibriergeräten, Softwarelösungen und sogar ISO-Standards hervorgebracht.
Die Webdesign-Community kümmert sich im Allgemeinen nicht um Presse-Checks. Aber vielleicht sollte es.
Das Web hat Farbprobleme, seit es Farbe hat
In den 1990er Jahren bedeutete die genaue Farbgebung im Web eine Palette von 216 "websicheren" Farben. Diese Farben und Schattierungen waren (meistens) garantiert nicht zittrig, wenn sie auf Monitoren angezeigt wurden, die nicht mehr als 8-Bit-Farbe verarbeiten konnten.
Oben ist ein Farbverlauf mit und ohne Dithering. Heute kann die überwiegende Mehrheit der Computer 24-Bit-Farbe oder besser zeigen (nach Diese Browser zeigen Statistiken an und Google Analytics Tracking von Websites, einschließlich Webdesigner Depot). Das heißt, jedes Pixel kann eine von Millionen von Farben anzeigen, was die Kalibrierung sowohl kompliziert als auch kritischer macht.
Das Web hat sich seit langem auf hexadezimale Codes wie # F35C23 verlassen, um Farben zu definieren. Diese sechsstelligen Strings können eine große Vielfalt an Farbtönen und Werten mit großer Präzision anzeigen. Ein Bild mit # F35C23 und einem CSS-Hintergrund in # F35C23 wird perfekt übereinstimmen.
Das Problem ist, dass der Code eine Kombination aus Rot, Grün und Blau definiert, aber nicht immer zu konsistenten Farben führt. Display-Bildschirme berücksichtigen den Unterschied.
Weiß ist weiß, außer wenn es nicht ist
Viele Faktoren beeinflussen die Farbgenauigkeit beim Erstellen und Bearbeiten von digitalen Bildern. Wie beim Drucken hängt die Farbe im Web von der Umgebung ab, in der das Bild erstellt wird. Im Gegensatz zum Druck können sich webbasierte Bilder bei jeder Anzeige ändern, da die Monitore der Benutzer variieren und keine Druckprüfung Probleme aufdecken kann.
Obwohl viele moderne Webbrowser angezeigt werden können
Aber nicht alle Monitore sind gleich aufgebaut, und so könnte ein bestimmter Orangeton über verschiedene Bildschirme hinweg inkonsistent sein. Hier sind einige der Ursachen für Farbwechsel:
- Geringfügige Änderungen zwischen Herstellern und Modellen führen zu leichten Ungenauigkeiten bei Farbton und Farbton.
- Viele Bildschirme (insbesondere CRT- Monitore) ändern ihre Farbe im Laufe der Jahre und sogar während sie sich im Laufe eines Tages aufwärmen.
- Bis vor kurzem verwendeten Mac OS X und Windows zwei verschiedene "Gammas", was dazu führte, dass Bilder auf Macs heller erschienen als auf PC. Mac OS X 10.6 (Snow Leopard) verwendet das gebräuchlichere Gamma von 2.2 , das ist das gleiche wie Windows und viele Fernseher und Camcorder.
- Menschen durchsuchen das Internet von vielen verschiedenen Standorten und in vielen verschiedenen Lichtverhältnissen. Die Wirkung von Deckenleuchten und die Menge und Farbe von natürlichem Licht beeinflussen das Erscheinungsbild der Farbe auf dem Bildschirm.
Oben zeigt eine andere Kalibrierung, dass "weiß" oft eine angenommene Farbe ist:
- Das Originalbild, aufgenommen mit einer Kompaktkamera unter Fluoreszenzlicht.
- Ungefähre Farbverschiebung auf einem Mac vor Snow Leopard.
- Ungefähre Farbverschiebung auf einem alternierenden CRT-Monitor.
- Nahe der echten Farbe, wie auf dem Laptop zu sehen, auf dem das Foto verarbeitet wurde.
Ein leicht roter Monitor könnte ein ansonsten perfektes Blau als leicht violett oder ein grün mit einem gelben Farbton zeigen. Zu helle Monitore werden Schatten und Lichter auswaschen; Wenn die Monitore zu dunkel eingestellt sind, werden die Schatten matschig und die Gefahr einer Farbverschiebung in den Lichtern erhöht. Für Designer, denen diese Details wichtig sind, ist die Qualitätskontrolle definitiv eine Herausforderung.
PNG Farbverschiebung
Einfach gesagt, der Gamma-Wert ändert die Helligkeit eines angezeigten Bildes. Das PNG-Bildformat wurde für die digitale Anzeige entwickelt und ermöglicht Designern, jedem Bild eine Gammakorrektur hinzuzufügen. Aber ohne die Helligkeit des Ausgabegeräts zu kennen (das heißt, ohne den Typ des Monitors zu kennen, auf dem das Bild erscheint), fällt es den Designern schwer, eine genaue Gammakorrektur hinzuzufügen.
Diese Eigenschaft ist das berüchtigtste Problem von PNG geworden. Im Web entspricht ein Bild manchmal den Hexadezimalfarben, die im CSS angegeben sind, und manchmal auch nicht, obwohl es mit der richtigen Farbe erstellt wurde.
Programme wie PNGCrush (Windows) und PNGenie (Mac) kann überschüssige Informationen aus PNG-Dateien entfernen, einschließlich der Gamma-Einstellung, die Farbe zuverlässiger macht.
Andere Probleme
Die Vermeidung von Farbverschiebungen kann Änderungen in der Arbeitsweise von Designern erfordern. Schlechte Farbkalibrierung wird im Laufe der Zeit auffallen. Es ist eines dieser Designdetails, über die nicht gesprochen wird und die nicht bemerkt werden sollten.
Branchenlösungen
Verschiedene Lösungen haben das Rätselraten bei der Verwaltung von Farben und der Vermeidung von Farbverschiebungen erheblich verringert.
Das Internationales Farbkonsortium (
ICC-Profile sind Dateien, die Informationen darüber enthalten, wie verschiedene Geräte Farbe anzeigen. Drucker und die meisten Computer werden mit eingebauten ICC-Profilen ausgeliefert, weil ihre Hersteller genau wissen, wie sie arbeiten. Benutzerdefinierte ICC-Profile können jedoch ein bestimmtes Gerät an bestimmte Bedingungen anpassen, z. B. wenn ein Monitor unter Leuchtstofflampen verwendet wird und nicht neben einem großen Fenster.
Adobe Flash Player 10 unterstützt nicht nur die Farben auf verschiedenen Bildschirmen (und im Druck), sondern auch ICC-Profile Aktivieren des Farbmanagements zwischen Flash und Druckern (vorausgesetzt, der Drucker des Endbenutzers verwendet ein ICC-Profil).
Im Jahr 1996 definierten Hewlett-Packard und Microsoft den Standard rot, grün, blau (
Diese technischen Lösungen sind branchenweite Reaktionen von professionellen Organisationen. Aber Designer können auch Maßnahmen ergreifen, um ihre Arbeit im Laufe der Zeit konsistent zu halten.
Tipps, um einen Raum für Farbarbeiten vorzubereiten
Welche Art von Licht verwendest du gerade? Wenn Sie dies in Ihrem primären Arbeitsbereich lesen und genaue Farben für Sie wichtig sind, können Sie jetzt Schritte zur Verbesserung Ihres Arbeitsbereichs ergreifen.
- Zehn Sekunden pro halbe Stunde
Machen Sie eine kurze Pause und starren Sie auf eine 18% Graukarte . Ein Blick auf die gleiche Karte unter den gleichen Lichtverhältnissen ist ein guter Weg, um Ihre Augen "zurückzusetzen". (Hinweis: Puristen empfehlen 12% graue Karten. Sie sind auch in Ordnung, solange Sie jedes Mal die gleiche Karte verwenden. Der Punkt ist, etwas Konsequentes und Neutrales zu betrachten.) - Zehn Minuten
Bewegen Sie Ihren Monitor aus direktem Licht. Lassen Sie niemals eine Lichtquelle direkt auf den Bildschirm fallen. - Fünfzehn Minuten
Entfernen Sie farbiges Schreibtischzubehör (Kalender, Marker, Fotos, Ordner - alles nicht grau) aus Ihrer Sichtlinie. Wenn Ihr Monitor reflektierend ist, halten Sie farbige Gegenstände nicht direkt hinter sich. - Zehn Minuten pro Tag
Lassen Sie Ihre Augen sich vor der Arbeit an die Umgebung anpassen. Geben Sie Ihren Augen Zeit, sich an den Arbeitsplatz anzupassen, besonders wenn Sie gerade von der Sonne oder von der Außenbeleuchtung kommen. Verwenden Sie ggf. einen Timer. - Zehn Minuten pro Woche
Reinigen Sie Ihren Monitor. Benutze einen fusselfreie Kleidung um Staub und Fingerabdrücke sanft zu entfernen, oder lesen Sie in der Bedienungsanleitung Ihres Reinigers nach. Tun Sie das gleiche für Ihre Brille, wenn Sie sie tragen. - Ein Tag oder so
Decken Sie Fenster in der Nähe mit dicken Leinwänden oder Vorhängen ab. Die Hauptvorteile von natürlichem Licht sind Genauigkeit - es ist kaum natürlicher als Sonnenlicht - und Verfügbarkeit. Aber natürliches Licht variiert. Es ändert sich den ganzen Tag, mit dem Wetter und mit den Jahreszeiten. - Ein Wochenende
Umgeben Sie Ihren Arbeitsbereich mit neutralem Grau. Malen Sie die Wände und ersetzen Sie dunkle Möbel durch etwas Fades. Im Idealfall sollte Ihr Desktop nur etwa 60% des auftreffenden Lichts reflektieren. GTI Munsell Neutrale graue Farbe ist unter Fotografen beliebt für die Erstellung neutraler Hintergründe. - Ein Wochenende oder Lieferzeit
Wenn Sie Ihre Bürobeleuchtung nicht anpassen können, Kaufen oder montieren Sie eine Monitorhaube um Blendung und veränderte Bedingungen zu verhindern.
Tipps zum Kalibrieren Ihres Monitors
Der Zweck der Kalibrierung besteht darin, Farbverschiebungen zu eliminieren und den Tonwertumfang Ihres Monitors zu optimieren. Schatten sollten reich sein, aber trotzdem Details zeigen. Die hellsten Lichter sollten weder zu warm noch zu kühl sein. Auf lange Sicht sorgt dies für eine genaue, konsistente Farbe.
Hier sind die allgemeinen Schritte:
- Wärmen Sie Ihren Monitor mindestens 30 Minuten lang auf.
- Wählen Sie gamma (5000-9500 ° K, gamma 1,8-2,2).
- Finde die besten weißen und schwarzen Punkte.
- Balance rot, grün und blau, um Farbstiche zu vermeiden.
- Wiederholen Sie diesen Vorgang monatlich.
Viele Programme führen Sie durch diesen Prozess. Adobe Gamma ist eine beliebte schnelle Lösung für die Kalibrierung von CRT-Displays. Abgesehen davon, dass es einfach zu bedienen ist, ist es beim Kauf von Photoshop oder Photoshop Elements kostenlos. Andere Lösungen sind QuickGamma (Windows) und Datacolors Spyder Hardwarekalibrator.
Farbe ich wählerisch
Akkurate, konsistente Farben sind eines dieser kleinen Details, die die meisten Menschen - einschließlich Webdesigner - angesichts von Parsing-Fehlern, Webstandards, Kundenfehlinformationen und gutem Termindruck ignorieren.
Aber es ist auch eines dieser Elemente, die für eine bessere Gesamterfahrung sorgen. Sobald Designer beginnen, Abweichungen in Farbton und schlammigen Schatten zu bemerken, wird es unüblich, nicht besser arbeiten zu wollen.
Geschrieben exklusiv für Webdesigner Depot von Ben Gremillion. Ben ist freiberuflich tätig Webdesigner Wer löst Kommunikationsprobleme mit besserem Design?