Suche
  • Arno Kuss Textdesign und Storytelling - für ausdrucksstarken Webcontent
  • Mo-Fr. 09:00 -18:00 Uhr Tel. +49 6196 / 9502018 Mail to: arno.kuss@buntetexte.de
Suche Menü

So einfach verwendest Du die richtigen Farben für Deine Webgrafik

Mit einer Farbpipette und den hexadezimalen Farbwerten gelingt die Erstellung einer Webgrafik gleich um ein vielfaches einfacher

Ihr kennt das sicher auch. Ihr sucht für die Erstellung einer Webgrafik die passenden Farben und kommt mit der eigenen Auswahl nicht zu dem gewünschten Ergebnis. Entweder, die Farbtöne oder Kontraste passen nicht zusammen, oder alles wirkt zu bunt, zu grell, zu eintönig? Ein weiteres Problem ist die Kennzeichnung, wie kann man sich die perfekte Kolorierung merken, damit man diese später weiter verwenden oder dokumentieren kann? Ich möchte Euch an dieser Stelle ein praktisches, sinnvolles und kostenloses Onlinetool, und das in fast jeder Grafiksoftware verfügbare Werkzeug Farbppipette vorstellen. Wenn Ihr das noch nicht kennt, Beides möchtet Ihr zukünftig sicher nicht mehr missen.

Praktisch für die Kration einer Webgrafik: das Colorwheel von Affinity Designer bietet das Kopieren des Hexadezimalen Wertes in die Zwischenablage.

Im Illustrationsprogramm Affinity Designer lässt sich bei der Verwendung der Farbpipette der hexadezimale Farbwert direkt in die Zwischenablage speichern.

Grafikdesign für Jedermann

Nicht jeder hat sich mit Grafikdesign so genau beschäftigt, dass es ihn oder sie, gleich zu einem Experten macht. Dennoch sind viele Leute mit einer gewissen Intuition gesegnet, die einen zumindest spüren lässt, ob die Farbzusammenstellung harmonisch wirkt oder nicht. Wer sich in der Farbenlehre auskennt weiß, dass bestimmte Farbkontraste existieren, wie:

  • Hell-Dunkel (Gelb-Braun)
  • Kalt-Warm (Blau-Rot)
  • Komplementär (Blau-Orange)

Die Kunst bei der Erstellung einer Webgrafik liegt in der Reduzierung

Diese Kontraste bieten einen breiten Spielraum für verschiedene Nuancen. Möchte man nun für das eigene Webprojekt eine Grafik erstellen, die Farben für die Webseite ergänzen, oder eine bestimmte Farbe für Textüberschriften heraussuchen, kann einen die Auswahl schnell überfordern. Das Ergebnis in der Webgrafik sieht dann alles andere als harmonisch oder professionell aus. Ein Problem ist, zu viele unterschiedliche Farben wirken unruhig, besser ist es, sich unterschiedliche Farbtöne einer Grundfarbe zusammenzustellen und mit einer neutralen Tönung in schwarz, weiß oder grau zu ergänzen.

Nicht nur für die Webgrafik interessant. Die hexadezimalen Farbwerte werden auch in der WordPress Backend für das Themdesign genutzt.

Die Farbwerte im WordPress Themedesign sind in Hexadezimalzahlen angeben.

Hat man für sich die richtige Zusammenstellung gefunden, ist es wichtig, sich die Farbpalette zu merken. Ganz einfach gelingt das, indem man sich die Farbbezeichnung beziehungsweise die hexadezimale Schreibweise notiert. Dieser Farbcode beginnt mit dem Zeichen “#“ gefolgt von einer Kombination aus Ziffern und Buchstaben. Weiß wird dementsprechend mit “#ffffff“ bezeichnet, Schwarz mit “#000000“.

Eine simple Darstellung der hexadezimalen Farbwerte in Pixelmator für Apple Mac OS

Farben erkennen und verwenden mit der Farbpipette

Jetzt zu der praktischen Anwendung: Die meisten Bildbearbeitungsprogramme verfügen über eine Pipette, mit der es möglich ist, einen Pixel auf dem Display  “aufzusaugen“ und sich die entsprechende Farbe, beziehungsweise die hexadezimale Bezeichnung anzeigen zu lassen. Das sieht dann im linken Beispiel, mit dem grauen Quadrat so aus. Mit dieser Technik lassen sich ganz einfach Farben auswählen, die jeweiligen Bezeichnungen erkennen und zum Beispiel in WordPress in die Designeinstellungen übertragen. Super praktisch dabei, die Farbpipette lässt sich nicht nur im aktiven Grafikprogramm nutzen, sondern für alle Inhalte, die auf dem Bildschirm angezeigt werden.

Online-Arbeitstool und Inspiration in einem

Diese manuelle Methode ist schon recht einfach, ein weiteres unkompliziertes Tool, das Adobe uns kostenlos online zu Verfügung stellt ist ebenfalls empfehlenswert. Hier gelangt Ihr zum Onlinetool Adobe Color CC. Dort könnt Ihr Euch Eure Lieblingsfarben über ein „Farbrad“ auswählen, ganze Farbpaletten zusammenstellen oder Euch bereits definierte Kombination aussuchen. Das beste daran, es ist total simpel, den HEX-Wert (oder RGB) per Copy-Paste in die Zielgrafik zu übertragen. Eventuell muss dann nur noch das “#-Symbol“ vor die Buchstaben-Ziffernfolge eingefügt werden, fertig.

Ein hervorragendes Onlinetool, das bei der Farbbestimmung einer Webgrafik unterstützt. Adobe Color CC

Über das kostenlose Onlinetool Adobe Color CC lassen sich Farbtöne mit den jeweiligen Informationen anzeigen. Die Werte lassen sich einfach per Copy/Paste verwenden.

In Adobe Color CC lassen sich ganze Farbpaletten für eine Webgrafik erstellen oder bereits vordefinierte Paletten auswählen.

Im Tab „Entdecken“ lassen sich neben eigener Farbzusamennstellungen, bereits vordefinierte Farbtöne auswählen und weiterverwenden.

Das wars schon mit meinen Tipps für den Umgang mit Farben und den hexadezimalen Werten. Ich wünsche Euch eine kreative Zeit mit Softwarepipette und dem Color Tool von Adobe. Wenn Ihr Fragen zu der Verwendung eurer Webgrafik habt, nur zu.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.