Das Erstellen einer Website kann einige unerwartete Probleme mit sich bringen, darunter auch Farbe. Das Verständnis der Farbauswahl und der möglichen Wiedergabe von Farben auf verschiedenen Computern ist der erste Schritt, um sicherzustellen, dass Ihre Site das von Ihnen beabsichtigte Erscheinungsbild aufweist.
Neben dem Finden und Auswählen von Farben, die für Sie geeignet sind, ist es ratsam, ein Farbschema für Ihr Projekt zu entwickeln und zu verwalten. Es ist einfach, einen Satz von Farbfeldern in gängiger Bildsoftware wie Adobe Photoshop oder Illustrator zu erstellen und Farben so zu organisieren, dass sie leicht zu finden und zu verwenden sind.
Wie der Artikel? Abonnieren Sie unseren RSS-Feed und folgen Sie uns auf Twitter, um immer auf dem neuesten Stand zu bleiben.
Grundlegendes zu Web Color
Farben im Web werden durch Mischen von Kombinationen aus Rot-, Grün- und Blautönen hergestellt. Diese Form der Farbmischung wird als RGB-Farbe bezeichnet. Jeder Farbton wird durch einen Zahlenwert von 0 bis 255 dargestellt und jede eindeutige Farbe hat einen Wert für Rot, Grün und Blau. Schwarz hat zum Beispiel keinen Farbwert, der einen RGB-Farbwert von 0, 0, 0 ergibt. Die erste Ziffer bezieht sich immer auf den roten Wert, die zweite auf grün und die dritte auf blau.
Da es für jeden Farbton 256 Varianten gibt, sind mit RGB-Schemata 16 Millionen Farbkombinationen möglich. Die meisten Computer können heutzutage alle 16 Millionen Farbwerte verarbeiten und genau anzeigen. Es gibt jedoch einige, die sich noch an die alte Liste von 216 "web safe" halten. Farben, die entwickelt wurden, damit Farben auf Maschinen mit einer 256-Farben-Palette exakt wiedergegeben werden. Dieser Standard ist mit den Fortschritten in der Bildschirm- und Farbtechnologie ziemlich verschwunden.
Beim Erstellen von Farben haben Sie möglicherweise die Möglichkeit, jeden Farbton mit einem RGB-Wert oder mit einer Hexadezimal-Schreibweise oder einem HEX-Wert zu erstellen. Farb-HEX-Werte werden durch sechs Zeichen mit einem # -Zeichen gekennzeichnet. HEX-Werte verwenden eine Kombination aus Zahlen und Buchstaben. 0 ist der niedrigste Wert und FF (255) ist der höchste Wert. Jedes der sechs Zeichen im HEX-Wert entspricht den Zahlen im RGB-Wert. Schwarz hat einen HEX-Wert von # 000000.
Darüber hinaus werden 147 Farben nach Namen für HTML- und CSS-Anwendungen definiert, gemäß w3schools.com, das eine Tabelle mit Namen und Werten für jede Farbe enthält. Es gibt 17 Standardfarben - Aqua, Schwarz, Blau, Fuchsia, Grau, Grau, Grün, Lime, Maroon, Marine, Olive, Lila, Rot, Silber, Türkis, Weiß und Gelb. Jeder hat einen bestimmten RGB- und HEX-Wert. Maroon hat beispielsweise einen RGB-Wert von 128, 0, 0 und einen HEX-Wert von # 800000; Silber ist 192, 192, 192 oder # C0C0C0.
Erstellen Sie Farbfelder
Das Erstellen eines Farbschemas klingt manchmal einfacher als es ist. Abhängig von der Komplexität eines Site-Designs kann eine Handvoll Farben in einem Regenbogen erforderlich sein, um den gewünschten Effekt zu erzielen. Einige Designer haben ein Händchen für Farbpaare und erstellen ein Schema von Grund auf. Andere finden Inspiration von anderen Websites oder externen Quellen (wie z. B. das Durchsuchen von Paint-Chips in einem Baumarkt oder übereinstimmende Farben in der Natur).
Farbschemata werden auf vielfältige Weise basierend auf den Denkprozessen des Designers entwickelt. Während einige das Ziel haben, Farben im Handumdrehen zu erstellen, ist das Durchblättern eines Farbbuchs oder das Verwenden von Farbe aus einem Foto übliche Möglichkeiten, ein Schema zu entwickeln. Beachten Sie beim Erstellen eines Farbschemas die Farbkombinationen für jeden Teil Ihrer Website, z. B. Kopfzeile, Hintergrund, Navigationsleiste, Seitenleiste, Textfarben und Links.
Wenn Sie Farben verwenden möchten, die Sie an anderen Orten gefunden haben, machen Sie ein digitales Foto und öffnen Sie es mit einer Fotobearbeitungssoftware wie Adobe Photoshop. Vergrößern Sie das Bild, bis die Pixel deutlich sichtbar sind, und wählen Sie mit dem Pipettenwerkzeug die gewünschten Farbtöne aus, und notieren Sie deren Farbwerte.
Farbfelder importieren
Nicht alle Designer beginnen mit einem Farbschema von vorne. Es gibt eine Reihe kostenloser Tools, mit denen Benutzer innerhalb weniger Minuten eine Farbpalette entwickeln, herunterladen und importieren können. Farbschemata können mit einer einzigen Farbe erstellt werden, die sich ergänzende Schattierungen findet, oder mit einem Foto oder einem anderen Bild. Suchen Sie nach einem Tool, das die genauen Farbmischungen zum Herunterladen bereitstellt und mit Ihrer Computersoftware kompatibel ist. Hier sind ein paar einfache Optionen für Ihr nächstes Projekt.
ColorBlender
ColorBlender erstellt eine sofortige Palette von sechs Farben, die Designer als Photoshop-Farbtabelle, Illustrator-EPS herunterladen oder als E-Mail zum manuellen Mischen und zur Verwendung in anderen Programmen senden können. Die Farben werden mit einem Dia-Werkzeug für jeden RGB-Wert abgeglichen. Die Mischungen sind schön und haben eine große Auswahl. Sie können auch einen Wert für eine von Ihnen bevorzugte Farbe als Ausgangspunkt eingeben. Es ist nichts voreingestellt, Sie können jede Farbauswahl bearbeiten und sogar PANTONE-Farben anpassen.
ColorCombos.com
ColorCombos.com verfügt über eine umfangreiche Bibliothek an voreingestellten Farbkombinationen, die in Form von Fünf-Farben-Schemata vorliegen, die nach Farbton durchsucht werden können. Jeder zeigt HEX-, RGB- und sogar CMYK-Werte (für Druckprojekte) für jede Farbe an. Schemas können als PNG-Datei heruntergeladen werden. Verwenden Sie das Pipettenwerkzeug, um jeden Farbwert zu erweitern und zu speichern. Auf der Website können Benutzer auch benutzerdefinierte Farbkombinationen erstellen.
Farbpaletten-Generator
Der Farbpalettengenerator ist die automatisierte Version zum Erstellen eines Farbschemas aus einem Foto oder Bild. Benutzer können eines der voreingestellten Bilder auswählen oder ihr eigenes hochladen, um aus dem Bild eine benutzerdefinierte neunfarbige Palette zu erhalten. Farbkombinationen sind schön, können aber nicht heruntergeladen werden. Bewegen Sie die Maus über jeden Farbton, um den HEX-Wert anzuzeigen. RGB-Werte werden nicht bereitgestellt.
Farbschema-Designer
Der Farbschema-Designer ist das visuelleste Werkzeug auf dem Markt. Es erstellt ein Vierfarben-Schema wie viele andere Programme, aber es ermöglicht Benutzern auch eine Vorschau, wie dieses Schema auf ihrer Website verwendet werden kann, basierend auf hellen und dunklen Seitenbeispielen. Die Site ermöglicht Benutzern das Mischen von Farben mit einem großen Farbkreis. Die Schemata werden mit verschiedenen Optionen für Mono-, Komplementär-, Triaden-, Tetrad-, Analog- und Akzentpaletten entwickelt.Die Website bietet auch die meisten Optionen für das Downloadformat, einschließlich HTML-, XML-, Text- und Photoshop-Palettenoptionen. Für jeden Farbwert stehen HEX- und RGB-Werte zur Verfügung.
Swatch-Organisation
Die einfachste Methode zum Verwalten und Organisieren von Farbfeldern in Adobe Photoshop und Illustrator führt über Farbfeldbibliotheken. Sie können bestimmte Farbschemata einrichten und für bestimmte Projekte speichern und öffnen. (Adobe-Produkte werden auch mit ein paar voreingestellten Bibliotheken geliefert, darunter auch einige Pantone-Farbfelder für CMYK-Anwendungen.)
Um Ihre neuen Farben einer Farbfeldbibliothek hinzuzufügen, öffnen Sie die Farbfelder-Palette im Menü Fenster. Was geöffnet wird, ist die Standardfarbfeldpalette. (Sie können andere Optionen anzeigen, indem Sie auf die Erweiterungsregisterkarte klicken. Jede Option wird in einem anderen Fenster angezeigt.) Wählen Sie? Neues Farbfeld? eine benutzerdefinierte Farbmischung hinzufügen oder Farbfelder laden? ein heruntergeladenes Farbschema importieren. Ordnen Sie Farben in der Farbfelder-Palette so an, wie es für Sie funktioniert, und speichern Sie. Nach dem Speichern können die neuen Farbfelder jederzeit geladen und verwendet werden.
Eine Vielzahl von Farbfeldern zu haben, kann umständlich sein. Denken Sie daran, für jedes Projekt, zu dem Sie wiederholt zurückkehren, eine neue Datei zu erstellen. Halten Sie die Paletten klein und entfernen Sie Farben, die Sie nicht verwenden werden. Benennen Sie Farben so, dass Sie sich leicht an ihre Anwendungen erinnern können. Zum Beispiel in der Swatch-Bibliothek "Meine Website". Benennen Sie jedes Farbfeld anhand seiner Verwendung anstelle der RGB-Werte.
Speichern Sie keine Farbfelder für einmalige Anwendungen in einer Bibliothek. Es erfordert unnötige Zeit. Bibliotheken werden am besten für wiederkehrende Projekte oder Farben verwendet. Denken Sie daran, nicht verwendete Farben aus den Farbbibliotheken für Projekte zu entfernen, die Sie an Kunden weitergeben, um Ihre Dateien sauber und übersichtlich zu halten.
Fazit
Der erste Schritt, um großartige Farben für Ihr nächstes Projekt, im Web oder in gedruckter Form zu erstellen, besteht darin, zu verstehen, wie Farben funktionieren und wie Sie ein Schema erstellen, das zusätzliche Farbtöne aufweist. Wenn Sie wissen, was die mit Farben verknüpften Zahlen bedeuten, können Sie Farbfelder mit Leichtigkeit erstellen (oder sogar stehlen).
Spielen Sie mit Farbe, um Kombinationen zu erstellen, die für das Projekt geeignet sind. Sobald Sie mit einer Reihe von Farben arbeiten können, ist es ein Muss, die Farbfelder zu organisieren, um Ihren Workflow zu verbessern. Verwenden Sie die Organisationstools der Adobe Creative Suite, um das integrierte Farbmanagementsystem optimal zu nutzen. Gruppieren und benennen Sie Farben in einer Weise, die mit der Art und Weise der Verwendung synchronisiert wird.
Bildquellen: alikins und IvanWalsh.com.