Die Farbe Braun auf einer Website: Was sie auslöst
Braun ist die Farbe vertrauter Materialien: Holz, Leder, Kaffee, Schokolade, Papier und Erde. Eine Seite in Braun kann diese Bilder wecken, noch bevor jemand ein Wort liest.
Technisch ist Braun ein dunkles, gedämpftes Orange. Im Farbkreis liegt es zwischen Rot und Gelb, nur mit weniger Helligkeit und Sättigung. Darum gibt es nicht das eine Braun. Zwischen hellem Sand und tiefem Espresso liegen Welten, und die Töne wirken unterschiedlich.
Für eure Website zählt deshalb, welcher Ton in welcher Rolle zu eurer Marke passt.
Die Bedeutung der Farbe Braun: Eine Deutung, kein Beleg
Die gängige Deutung nennt Erdverbundenheit, Wärme, Verlässlichkeit und Beständigkeit. Diese Eigenschaften gehen vermutlich auf die Materialien zurück, an die Braun erinnert. Kontext und Kultur verschieben sie, und nicht jeder Besucher liest dieselbe Botschaft heraus.
Als feste Wirkung, die bei allen gleich eintritt, ist das nicht belegt. Belastbare Messungen zu Braun auf Websites kennt dieser Artikel nicht, für die Praxis ist Vorsicht angebracht.
Aus diesen Deutungen folgt noch kein Vertrauen. Eher als die Farbe tragen vermutlich klare Angaben, gut lesbare Seiten und sichtbare Menschen zum Vertrauen bei.
Schreibt auf eurer Seite nicht «Braun schafft Vertrauen». Die Aussage ist nicht belegt. Sagt lieber, wofür Braun in eurer Branche steht, etwa für Holz, Genuss oder Natur.
Für welche Branchen Braun passt
Braun funktioniert dort, wo Besucher die zugehörigen Materialien ohnehin erwarten. Drei Felder liegen nahe, jedes mit eigener Tonlage.
| Passende Töne | Worauf ihr achtet | |
|---|---|---|
| Handwerk (Schreinerei, Gartenbau, Sattlerei) | Walnuss, Eiche, Leder | Echte Fotos der Arbeit zeigen, Braun als Rahmen statt als Dauerfläche |
| Genuss (Rösterei, Bäckerei, Confiserie) | Espresso, Karamell, Kakao | Einen hellen Ton als Ausgleich einsetzen, damit dunkle Töne nicht schwer wirken |
| Natur (Bio-Hof, Naturkosmetik, Outdoor) | Erdtöne mit gedämpftem Grün | Nur Natur-Versprechen machen, die sich einlösen lassen |
Die Zuordnung ist eine Orientierung aus der Gestaltung.
Schwieriger wird es, wo Besucher Tempo und Technik erwarten, etwa bei Software oder Finanzprodukten. Ein schweres Braun kann dort altmodisch wirken, solange ein klarer Gegenton fehlt.
Dass Braun auch dort bestehen kann, wo Tempo zählt, zeigt ein Beispiel aus der Logistik. Die Lieferwagen von UPS sind seit Generationen braun, die Wagenfarbe wurde zum Markenzeichen.
Braun auf der Website einsetzen: drei Rollen
Auf einer Website kann Braun drei Rollen übernehmen: Textfarbe, Fläche und Akzent. Welche ihr vergebt, legt ihr früh fest, denn das gibt den Rest der Palette vor.
Braun als Textfarbe
Braun als Fläche
Braun als Akzent
Wie viel Fläche Grundton, zweite Farbe und Akzent bekommen, lässt sich grob schätzen.
Eine bekannte Faustregel teilt die Fläche in 60 Prozent Grundton, 30 Prozent zweite Farbe und 10 Prozent Akzent. Bei Braun ist der Grundton oft ein heller Neutralton wie Leinen, und Braun selbst die zweite Farbe.
Eine Braun-Palette zum Ausprobieren
Das Beispiel zeigt drei Brauntöne, zwei helle Neutraltöne und einen Gegenton. Die Werte sind ein Vorschlag zum Testen.
Ein dunkler Ton (Espresso) übernimmt Text, ein mittlerer (Walnuss) die Flächen, ein heller (Leinen oder Sand) den Hintergrund. Karamell bleibt Akzent für einzelne Stellen. Mit diesen Rollen lässt sich eine Seite meist schon aufbauen, danach folgt die Kontrastprüfung.
Kontraste: Wann Braun lesbar bleibt
Die Falle sind Brauntöne wie Karamell, deren Helligkeit zwischen Text und Hintergrund liegt. Sie wirken auf dem Bildschirm angenehm, liegen aber zu nah am Hintergrund.
Die Web Content Accessibility Guidelines (WCAG) verlangen für normalen Text ein Kontrastverhältnis von mindestens 4.5:1. Für grosse Schrift (ab etwa 24 px, fett ab 19 px) und die Umrisse von Bedienelementen genügen 3:1.
Karamell besteht auf Leinen nur für grosse Schrift und die Umrisse von Bedienelementen. Für Fliesstext und Beschriftungen fällt es durch. Wann solche Vorgaben Pflicht werden, erklärt der Artikel zur Barrierefreiheit auf der Website.
Prüft Braun auf dem Handy im Freien. Bei Sonnenlicht sinkt der Kontrast jedes Farbpaars, und ein Wert, der am Bildschirm knapp besteht, kann dort durchfallen.
Komplementärfarben von Braun und gute Kombinationen
Braun ist ein dunkles Orange, deshalb liegt sein Gegenüber im Farbkreis bei Blau. Ein gedämpftes Petrol oder Blaugrau gibt der Palette Spannung, ohne mit dem Braun zu konkurrieren.
Drei Kombinationen lohnen einen ersten Test. Dunkles Braun wie Espresso oder Walnuss wirkt mit Leinen oder Sand ruhig und klassisch, und der Kontrast ist hoch. Karamell erreicht auf Sand dagegen nur 2.8:1. Mit Petrol bekommt die Seite einen klaren Gegensatz, und Petrol eignet sich für Links und Buttons mit heller Schrift. Braun mit gedämpftem Grün bleibt nah an der Natur, nur muss die Helligkeit klar getrennt sein, sonst verschwimmen beide Töne.
Passt Braun zu eurer Marke? Drei Prüffragen
Bevor Braun in die Markenentscheidung geht, helfen drei Fragen:
- Erwarten Besucher in eurer Branche Holz, Kaffee, Leder oder Erde?
- Lässt sich Braun in einer hellen, einer mittleren und einer dunklen Stufe lesbar einsetzen?
- Passt die Farbe zu dem, wofür euer Unternehmen in fünf Jahren stehen soll?
Wer dreimal ja sagt, für den spricht einiges für Braun. Bei einem Nein zur ersten Frage, etwa bei Software oder Finanzprodukten, braucht Braun einen klaren Gegenton. Bei einem Nein zur dritten Frage lohnt ein Blick auf die Positionierung eures Unternehmens. Die Farbe folgt der Marke. Bei einem Nein zur zweiten Frage helfen Palette und Kontraste weiter oben.
Checkliste «Braun auf der Website»: eine Seite zum Abhaken
In fünf Abschnitten geht ihr von den drei Prüffragen über Töne, Kontraste und Kombinationen bis zum Aufschalten. Dazu gehören die Farbmuster der Beispielpalette und sieben Kontrastpaare mit ihren Werten.
Vielen Dank. Der Download startet gleich.
Fazit: Von der Farbe zum Markenauftritt
Die Farbe ist ein Teil des Markenauftritts. Wer einen Relaunch plant, klärt zuerst, wofür das Unternehmen stehen soll, danach folgen Farben, Schrift und Bilder. Die Grundlagen dazu stehen im Artikel zur Corporate Identity für KMU und in dem zur Bildsprache. Wie der Ablauf bei einer neuen Website aussieht, steht auf der Seite Website erstellen lassen.
In einem kurzen Gespräch klären wir gemeinsam, ob Braun zu eurer Marke passt und was ein Relaunch dafür braucht.
Häufig gestellte Fragen
Was bedeutet die Farbe Braun?
Braun steht in der gängigen Deutung für Erde, Holz, Wärme und Beständigkeit. Diese Bedeutung geht vermutlich auf die Materialien zurück, an die die Farbe erinnert. Ton, Umfeld und Kultur verschieben sie, darum gilt sie als Tendenz.
Wirkt Braun auf einer Website vertrauenswürdig?
Braun kann zu einer Branche passen, etwa Handwerk, Genuss oder Natur, und dort vertraut wirken. Garantieren kann es Vertrauen nicht. Dafür sind klare Angaben, lesbare Seiten und sichtbare Menschen vermutlich wichtiger.
Welche Farben passen zu Braun?
Leinen, Creme und Sand geben ruhige Hintergründe, auf denen dunkle Brauntöne wie Espresso und Walnuss hohen Kontrast erreichen. Petrol oder Blaugrau setzen einen Gegenton, und ein gedämpftes Grün bleibt nah an der Natur. Bei jeder Kombination lohnt ein Blick auf den Kontrast.
Was ist die Komplementärfarbe von Braun?
Braun ist ein dunkles Orange, das Gegenüber im Farbkreis ist deshalb Blau. In der Praxis eignet sich ein gedämpftes Petrol oder Blaugrau, weil ein reines Blau neben Braun schnell hart wirkt.
Für welche Branchen eignet sich Braun?
Braun passt dort, wo Besucher Holz, Leder, Kaffee oder Erde erwarten, also bei Handwerk, Genuss und Natur. Bei Software oder Finanzprodukten kann ein schweres Braun altmodisch wirken, wenn ein klarer Gegenton fehlt.
Welcher Kontrast ist für braune Schrift nötig?
Die Web Content Accessibility Guidelines verlangen für normalen Text mindestens 4.5:1. Für grosse Schrift sowie die Umrisse von Bedienelementen genügen 3:1. Dunkle Brauntöne wie Espresso und Walnuss erreichen das auf hellem Grund leicht. Töne wie Karamell erreichen es oft nicht, weil sie dem Grund in der Helligkeit nah sind.
Welcher Hex-Wert ist Braun?
Den einen Wert gibt es nicht. In CSS steht der Name «brown» für #A52A2A, ein rötliches Mittelbraun. Für eine Marke lohnt sich ein eigener Ton. Gemeinsam mit euch bauen wir ihn in drei Stufen auf: dunkel für Text, mittel für Flächen, hell für Hintergründe.
