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

Farbcodes ermitteln

Anregungen für die Farbgestaltung der eigenen Seiten können auch andere Websites liefern. Zwar wäre es mindestens schlechter Stil, die komplette Farbpalette einer anderen Website zu übernehmen, es spricht jedoch nichts dagegen, wenn Sie sich von einzelnen Farben inspirieren lassen. Spricht Sie beispielsweise die Hintergrundfarbe eines Logos besonders an, so picken Sie den Farbwert mit der Firefox-Erweiterung Colorzilla auf.

Eine ähnliche Funktion bietet das Windows-Tool Colorschemer Colorpix . Starten Sie das Programm und sammeln Sie Farbwerte über das Browserfenster hinaus auf der gesamten Windows-Oberfläche auf. Die Farben der Hintergründe, Linien und Texte sind in der Regel als CSS-Formate in den Webseiten selbst oder in externen Dateien abgelegt. Sie von Hand in den Quelltexten aufzuspüren kostet viel Aufwand. Schneller geht es mit dem Moo Color Finder. Tragen Sie die Adresse der jeweiligen Webseite in das Feld unter Script Demo ein und klicken Sie auf zeig mir die Farben!.

Mit Farbe gliedern

Verwenden Sie Farben zur Seitengliederung und zum Hervorheben besonders wichtiger Inhalte. Sie trennen beispielsweise die Bereiche für den Seitenkopf, das Menü und den Fließtext durch unterschiedliche Hintergrundfarben, farbige Trennlinien oder zusätzliche Weißraum zwischen den Blöcken.

Beachten Sie aber grundsätzlich beim Farbeinsatz: Zu viel ist zu viel. Kleistern Sie nicht die gesamte Seite mit kunterbunten Farbtapeten zu. Die Absicht, einzelne Bereiche in den Vordergrund zu rücken, verkehrt sich so schnell ins Gegenteil. Ein mit greller Signalfarbe hinterlegter Bereich zieht die Aufmerksamkeit zu stark auf sich und erdrückt die anderen Seitenabschnitte. Wählen Sie helle Farben und ausgewogene Kompositionen.Weiße Füllungen verleihen einer ohnehin hell gehaltenen Seite zusätzliche Leichtigkeit. Seien Sie auch mit intensiven Farbflächen rund um besonders ansprechende und hochwertige Grafikobjekte vorsichtig.

Feinschliff fürs Layout

Nutzen Sie lieber jede Möglichkeit, das Layout Ihrer Seiten weiter zu optimieren. Setzen Sie an Stelle einfarbiger Hintergrundflächen beispielsweise auf dezente Verlaufsfüllungen. Technisch realisieren Sie dies mit einer Grafikdatei, in die Sie den Verlauf von der ursprünglichen Füllfarbe zu einem nur wenige Stufen dunkleren oder helleren Farbton einfügen. Binden Sie die Grafik per CSS in den Hintergrund der entsprechenden Seitenbereiche ein.

Statt eines Farbverlaufs eignen sich übrigens auch kolorierte Muster beispielsweise in angedeuteter Fels-, Holz- oder Riffel-Optik. Der Langeweile monochromer Layouts beugen Sie mit gezielten Farbtupfern vor. Hinterlegen Sie zum Beispiel Menütexte beispielsweise nicht mit der lediglich aufgehellten Grundfarbe, sondern wählen Sie einen komplett anderen Farbton. Gegebenenfalls macht auch hier ein leichter Verlauf von Dunkel nach Hell Sinn.

Größere Abstände

Im Übrigen haben auch die Abstände zwischen den Seitenelementen und innerhalb des Textes Einfluss auf die Wirkung der verwendeten Farben. Je gedrängter die Objekte angeordnet sind, umso schwächer kommt die jeweilige Hintergrundfarbe zur Geltung. Schaffen Sie daher mit der CSS-Anweisung

einen Freiraum zwischen dem Rand der Abschnitte und den darin eingeschlossenen Seitenobjekten wie Text und Bildern. Weisen diese Klasse dem jeweiligen Abschnitt mit <div class="farbbereich"> zu. Bei den Absätzen des Fließtextes lässt sich der Abstand zwischen den einzelnen Buchstaben und zwischen den Zeilen mit dem folgenden Format vergrößern: