Handwerk & Bau
Erdig, warm, beständig
Bone
#F4EFE6
Deep Ink
#1C1F26
Vermilion
#B8412A
Terracotta und Zinnober sind Siegelfarben, Materialität und Tradition. Cyan-Gradients hier wirken wie ein leerer Corporate-Anzug.
Leistung · Farbpsychologie für Websites
Farbe ist Strategie.
Kein Geschmack.
Jede Branche hat ihre eigene Farb-Erwartung. Wer sie bricht, verliert Vertrauen — oder gewinnt Aufmerksamkeit. Beides mit Absicht, nicht per Zufall.
Wähle Ihre Branche
Live-Beispiel · Handwerk
60 % Bone30 % Ink10 % Vermilion
Warme Erdtöne, nicht kühles Tech-Blau.
Handwerk lebt von Materialität und Tradition. Terracotta und Ocker signalisieren Beständigkeit — ein Elektriker-Portal in Cyan wirkt austauschbar.
Akzent Vermilion · #B8412A
01 — Warum das zählt
90 Sekunden.
So lange braucht ein Mensch, um eine Website zu beurteilen. Bis zu 90 Prozent dieser Entscheidung basieren auf Farbe allein — Typografie, Content, Technik kommen erst danach zum Tragen. [1]
Das ist kein Grund für Panik, sondern für Handwerk. Farbe ist kein Geschmack, sondern ein Signal — für Vertrauen, für Branche, für Preisklasse. Wer sie zufällig wählt, überlässt die erste Entscheidung dem Zufall.
Das Gegengift: ein dokumentiertes Color-Briefing vor dem ersten Layout. Wirkungsziel, Zielgruppe, Ausschluss-Kriterien, Branchen-Codes, Palette, WCAG-Check, Sektions-Mapping. 30 Minuten Vorarbeit spart drei Design-Iterationen im Nachhinein.
[1] Singh, S. (2006). „Impact of color on marketing.“ Management Decision, 44(6).
02 — Grundlagen
Vier Begriffe, die fast alles erklären.
01
Der Farbkreis
Zwölf Farben in Johannes Ittens Kreis (1961) ordnen sich nach Nähe. Benachbarte Farben harmonieren, gegenüberliegende erzeugen Spannung. Das ist kein Mystizismus — es ist ein Werkzeug.
02
Komplementärkontrast
Rot-Grün, Blau-Orange, Gelb-Violett: Diese Paare liegen im Kreis gegenüber. Ein Komplementär-CTA springt aus jeder Seite heraus — weil das Auge den Kontrast physisch spürt.
03
Kalt vs. Warm
Warme Töne kommen optisch näher, kalte Töne treten zurück. Hintergrund = kalt/neutral, Vordergrund-Akzent = warm. Nicht umgekehrt — sonst kippt die Tiefenwirkung.
04
Sättigung & Helligkeit
Weniger ist fast immer mehr. Vollgesättigte Farben wirken schreiend, gedämpfte Töne wirken teuer. Das erklärt, warum Luxus-Marken fast nie Neon verwenden.
03 — Die Regel
60 · 30 · 10.
60 % Dominante — meist ein neutraler Grundton. Trägt die Seite, ohne laut zu sein. Bone, Off-White, Warm-Grau.
30 % Sekundäre — strukturiert. Sektionsflächen, Navigations-Bereiche, Footer, Typografie-Farbe.
10 % Akzent — CTAs, Highlights, ein einziger Farbpunkt, der das Auge zieht. Komplementär zur Dominante.
Diese Seite folgt der Regel: Bone-White (60), Deep Ink (30), Vermilion (10). Links daneben das Beispiel als Balken-Visualisierung.
60 % Dominante
Bone · #F4EFE6
30 % Sekundäre
Deep Ink · #1C1F26
10 % Akzent · Vermilion · #B8412A
04 — Vier Branchen, vier Paletten
Jede Branche hat ihre eigene Erwartung.
Diese Paletten sind keine Vorlagen zum Kopieren, sondern Ausgangspunkte. Die finale Auswahl entsteht immer aus dem Briefing — aber die Richtung ist in 80 % der Fälle vorgezeichnet.
Medizin & Praxis
Ruhig, vertrauensvoll, nicht klinisch
Off-White
#F6F5F2
Ink
#223038
Sage
#4F6B4E
Salbei-Grün senkt nachweislich die wahrgenommene Wartezeit. Reines Weiß wirkt steril, Pastell-Rosa wirkt unseriös — Sage ist der Sweet Spot.
Finanz & Recht
Seriös, diskret, nicht Fintech-laut
Paper
#F1EFEA
Nachtblau
#1A2740
Ink-Blue
#2F4B7A
Tiefblau ist die Farbe der Verbindlichkeit — aber gedämpft, nicht Neon. Eine Kanzlei in Cyan-Gradient ist ein Widerspruch in sich.
Gastronomie
Appetitanregend, warm, satt
Cream
#F6EFDF
Espresso
#2B1F14
Ochre
#A26F12
Warme Erdtöne aktivieren den Appetit. Instagram-Pastell verkauft Matcha-Latte, aber kein Abendmenü. Ocker und Bordeaux sind Wein-Etiketten-Gold-Standard.
05 — Aus der Praxis
Zwei Farb-Entscheidungen, begründet.
Schäferhof Guteschaf
Wollverarbeitung · Rhön
Das Problem
Die Vorgänger-Seite nutzte ein kühles Tech-Grün. Das passte zu keinem einzigen Produkt — Wolle ist warm, handwerklich, kein SaaS.
Die Entscheidung
Umstieg auf warme Beige- und Espresso-Töne, mit einem einzigen moosgrünen Akzent für CTAs. Jetzt riecht die Seite nach Schaf statt nach Cloud.
Body Process
Personal Training · Limburg
Das Problem
Typische Fitness-Seiten setzen auf Neon-Grün und aggressive Rot-Schwarz-Kombis. Das passt zu Discounter-Studios, nicht zu persönlicher Begleitung.
Die Entscheidung
Bodenständiges Teal und warmes Off-White. Signalisiert: hier wird gearbeitet, aber mit Respekt vor dem Menschen. Premium ohne Arroganz.
06 — Für die Selbermacher:innen
Das Briefing, das ich selbst nutze.
Zehn Fragen. Dreißig Minuten. Ergebnis: eine Palette, die Sie gegenüber Designer:innen, Kolleg:innen und Ihrer Zielgruppe begründen können — statt „das gefällt mir halt“.
Kein Newsletter-Zwang. Keine E-Mail-Pflicht. Direkter Download.
07 — Häufige Fragen
Was Leute vorher wissen wollen.
Warum nicht einfach meine Lieblingsfarben?
Weil Ihre Kund:innen entscheiden, nicht Sie. Eine Palette funktioniert, wenn sie die Erwartungen Ihrer Zielgruppe trifft — oder sie bewusst bricht. Beides braucht Analyse, nicht Bauchgefühl.
Was ist die 60-30-10-Regel?
60 % dominierende Farbe (meist neutral, Hintergrund), 30 % strukturierende Farbe (Text, Sektionsflächen), 10 % Akzentfarbe (CTAs, Highlights). Diese Aufteilung stammt aus dem Interior Design und funktioniert auch auf dem Bildschirm, weil das Auge Hierarchie braucht.
Was bedeutet WCAG 4.5:1?
Ein Kontrastwert. Text muss sich stark genug vom Hintergrund abheben — 4.5:1 für normale Schrift, 3:1 für große Schrift. Ohne das geht Barrierefreiheit nicht (BFSG ab Juni 2025 Pflicht für viele Websites).
Ist das Teil eines Webseiten-Pakets?
Ja. In Paket 2 und Paket 3 meines Gründungsangebots ist die Farbpsychologie-Beratung inklusive. Das Color-Briefing führen wir dann gemeinsam durch — kein Fragebogen per E-Mail.
Palette statt Bauchgefühl. Reden wir drüber.
Kostenlose Erstberatung · 30 Minuten · unverbindlich. Ich höre zu, Sie entscheiden danach.
Kostenlose Erstberatung anfragen →Farbkreis-Referenz: Johannes Itten, „Kunst der Farbe“ (1961) · Palette WCAG-geprüft · Beratung persönlich, nicht per Formular-Abrechnung