Web-Site: Tipps und Tools zur Farbgestaltung der eigenen Homepage

Der erste Eindruck zählt: Surfer, die ein Web-Angebot zum ersten Mal besuchen, bilden sich schnell eine bleibende Meinung. Wirkt die Website unprofessionell, färbt dieser Eindruck auf den Website-Betreiber ab.Ein wichtiges Kriterium für die erste Bewertung ist die farbliche Gestaltung. Schließlich dienen Farben nicht nur dem bloßen Schmuck. Sie unterstützen die Struktur und damit die Les- und Benutzbarkeit der Online-Inhalte. Zudem hat die Verwendung von Farben auch eine psychologische Komponente.

Vorgaben durch Corporate Design

Grundsätzlich stehen Ihrer Kreativität Tür und Tor offen. Sie haben jedoch nicht bei allen Website-Projekten den vollen Gestaltungsspielraum. So ist die Farbpalette in vielen Firmen und Organisationen in Teilen oder sogar komplett durch ein Corporate Design vorgegeben. In diesem Fall bleibt dem Designer häufig nur die Möglichkeit, die Funktionen der einzelnen Farben für das Layout festzulegen sowie deren Wirkung durch Abstände und Linienbreiten zu beeinflussen.

Ist jedoch nur die Hauptfarbe durch ein Design-Manual oder das Firmenlogo vorgegeben, so haben Sie Raum für Kreativität. Nutzen Sie diesen, indem Sie beispielsweise in einer kühlen, annähernd monochromen Farbwelt in Abstufungen von blauen, grauen und weißen Farbtönen mit frischen warmen Farben wie Orange oder Rot gezielt Akzente setzen.

Palette zusammenstellen

Um die richtigen Farbkombinationen zu finden, müssen Sie nicht mühsam mit dem Grafikprogramm experimentieren. Lassen Sie sich bei der Zusammenstellung von Online-Diensten unterstützen: Einen guten Service bietet der kostenlose Color Scheme Designer ().

Legen Sie eine Palette nach unterschiedlichen Vorgaben an und passen Sie diese gegebenenfalls in Helligkeit, Sättigung und Kontrast an. Starten Sie mit der Auswahl einer Grundfarbe. Über den Button mono erzeugen Sie eine Palette, die die Ausgangsfarbe in verschiedenen Abstufungen enthält. Die Komplementärfarbe fügen Sie über complement zur Palette hinzu.

Weitere Methoden wie triad, tetrad und analogic kombinieren im Farbkreis gegenüber- oder nebeneinanderliegende Farbwerte. Wie weißer, grauer und schwarzer Text auf den Farbflächen wirken, sehen Sie bei Aktivierung der Option Show Text. Mithilfe zweier Musterseiten lässt sich die Auswahl noch anschaulicher begutachten.

Über Light page example sehen Sie eine Demoseite, die die ausgewählten Farben auf einem hellen Hintergrund präsentiert, und über Dark page example eine Seite in dunkler Optik. Exportieren Sie die fertige Palette über den Menüpunkt Export flexibel als Text- oder CSS-Datei oder im Palettenformat für Photoshop oder Gimp.

Bild als Vorlage

Anstatt die Farben der eigenen Seiten festzulegen und dazu passende Fotos auszusuchen, wird bisweilen auch der umgekehrte Weg beschritten. Ein Foto oder ein Logo dienen als Vorlage, nach der Sie dann die Farben des Hintergrunds und der übrigen Seitenelemente ausrichten. Eine zum jeweiligen Bild passende Palette lässt sich komfortabel mit dem Color Palette Generator online generieren.

Wählen Sie eine Grafikdatei in den Formaten .png, .jpeg oder .gif aus und laden Sie sie hoch. Legen Sie bei Grid Size fest, ob der Generator 9, 25 oder 49 Farbwerte zusammenstellen soll, und entscheiden Sie bei Method, ob der Dienst mit Precise ausschließlich Farben aus dem Bild anbieten oder mit Average auch eigene Mittelwerte berechnen soll. Das System erzeugt einen Link, über den Sie die Ergebnisseite auch später noch beliebig oft aufrufen können.

Nicht ganz so komfortabel: Die RGB-Werte erscheinen lediglich auf dem Bildschirm, und auch erst durch Berührung der Farbflächen mit der Maus. Eine Download- Möglichkeit für die komplette Liste bietet der Palette Generator. Neben Bildern von der eigenen Festplatte lassen sich hier auch Fotos von Flickr oder Facebook heranziehen. Mit Klick auf Create erscheint neben den Farbflächen ein Feld mit dem entsprechenden CSS-Code sowie ein Link zum Download der Farbpalette im Adobe Swatch Exchange Format (ASE) im Browserfenster.

Eine weitere Vergleichsmöglichkeit liefert der Dienst Whats its color. Das Online-Tool ermittelt die zehn Farbwerte, die am häufigsten im Bild vorkommen. Bei der Farbzusammenstellung lässt sich mit der Option Discard the background die dominierende Hintergrundfarbe ausblenden. Dies macht Sinn bei Bildern, die beispielsweise von einem breiten weißen oder schwarzen Streifen umgeben sind.