Die 60-30-10-Regel
Sie ist die nützlichste Regel, um Farben aufzuteilen. Sie stammt aus der Innenarchitektur, funktioniert aber bei jedem Projekt.
- 60 %: dominante Farbe. Meist ein Neutralton oder ein sanfter Ton. Sie deckt Hintergründe und große Flächen ab.
- 30 %: Nebenfarbe. Sie bringt Persönlichkeit. Nutze sie für Blöcke, Menüs oder Möbel.
- 10 %: Akzentfarbe. Die kräftigste. Nutze sie für Buttons, Icons oder Details.
Zum Beispiel: gebrochenes Weiß zu 60 %, Marineblau zu 30 % und Orange zu 10 %.
Du musst nicht genau messen. Die Idee: Eine Farbe führt, eine unterstützt und eine sticht hervor.
Die Rolle der Neutraltöne
Neutraltöne sind Weiß, Schwarz, Grau, Beige, Creme und helle Brauntöne. Sie passen zu fast allem.
Sie geben den Augen Ruhe und lassen kräftige Farben besser wirken. Eine Farbpalette ohne Neutraltöne wirkt meist anstrengend.
- Weiß und gebrochenes Weiß: Sauberkeit und Raum.
- Grau: modern und zurückhaltend. Wähle warme oder kühle Grautöne passend zum Rest der Farbpalette.
- Beige und Sand: Wärme und Natürlichkeit.
- Schwarz oder fast Schwarz: Eleganz und Kontrast. Für Text ist ein sehr dunkles Grau meist angenehmer als reines Schwarz.
Nach Temperatur kombinieren
Farben teilen sich in warme (Rot-, Orange-, Gelbtöne) und kalte (Blau-, Grün-, Violetttöne). Es gibt drei einfache Wege, sie zu kombinieren:
- Nur warme Farben: gemütlich und energiegeladen. Ideal für Restaurants oder freundliche Marken.
- Nur kalte Farben: ruhig und professionell. Ideal für Gesundheit, Technik oder Finanzen.
- Kalte Basis mit warmem Akzent: die vielseitigste Option. Der warme Akzent zieht vor ruhigem Hintergrund den Blick an.
Was meist schiefgeht: viele intensive warme und kalte Farben gleichzeitig, ohne dominante Farbe.
Kontrast für Text
Eine schöne Farbe nützt nichts, wenn man den Text nicht lesen kann. Der Kontrast zwischen Text und Hintergrund ist entscheidend für Lesbarkeit und Barrierefreiheit.
- Nutze dunklen Text auf hellem Grund oder hellen Text auf dunklem Grund.
- Vermeide gelben, hellgrünen oder hellgrauen Text auf Weiß.
- Lege keine gesättigten Komplementärfarben übereinander, etwa Rot auf Grün. Das flimmert und strengt die Augen an.
- Die WCAG-Richtlinien verlangen ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text.
Jedes Farbpaar kannst du mit unserem Kontrast-Prüfer testen.
15 Farbkombinationen, die immer funktionieren
Diese Paare sind ein sicherer Ausgangspunkt. Nutze sie als Basis und ergänze bei Bedarf einen Neutralton oder einen Akzent.
- Marineblau und Creme: klassisch, seriös und gut lesbar.
- Schwarz und Gold: Luxus und Eleganz.
- Blau und Orange: komplementär und voller Energie.
- Tannengrün und Beige: natürlich und ruhig.
- Rosa und Anthrazit: modern und ausgewogen.
- Gelb und Schwarz: maximaler Kontrast, ideal für Warnhinweise.
- Bordeaux und Sand: warm und raffiniert.
- Türkis und Koralle: frisch und sommerlich.
- Violett und helles Flieder: monochrom und kreativ.
- Braun und Salbeigrün: erdig, ideal für Naturmarken.
- Grau und Pfirsich: sanft und freundlich.
- Petrolblau und Blassgelb: ruhig mit einem Hauch Licht.
- Terrakotta und gebrochenes Weiß: warm und mediterran.
- Dunkles Petrol und Senfgelb: retro und charakterstark.
- Weiß und Rot: direkt, energiegeladen und gut sichtbar.
Viele weitere Ideen mit HEX-Codes findest du auf unserer Seite mit Farbkombinationen.
Welche Farben zu welcher Farbe passen
Wenn du schon eine Hauptfarbe hast, gibt dir diese Liste einen schnellen Ausgangspunkt:
- Rot: Weiß, Schwarz, Grau, Marineblau und Beige. Für etwas Mutiges: Rosa oder Orange.
- Orange: Marineblau, Türkis, Weiß, Creme und Braun.
- Gelb: Grau, Schwarz, Marineblau und Weiß. Senfgelb passt gut zu Dunkelgrün.
- Grün: Beige, Weiß, Braun, Gold und zartes Rosa.
- Blau: Weiß, Orange, Grau, Gelb und Koralle. Marineblau wirkt fast wie ein Neutralton.
- Violett: Grau, Flieder, Gold, Salbeigrün und Weiß.
- Rosa: Grau, Marineblau, Olivgrün, Weiß und Gold.
- Braun: Creme, Grün, Petrolblau, Orange und gebrochenes Weiß.
Dir fällt sicher auf, dass Neutraltöne in fast jeder Liste stehen. Sie sind der sicherste Partner für eine kräftige Farbe.
So stellst du deine eigene Kombination zusammen
- Wähle eine Hauptfarbe nach dem, was du ausdrücken willst.
- Such im Farbkreis eine Nebenfarbe: eine Nachbarfarbe für etwas Ruhiges, eine Gegenfarbe für etwas Auffälliges.
- Ergänze ein oder zwei Neutraltöne.
- Wähle eine einzige Akzentfarbe für das Wichtigste.
- Teste die Farbpalette an einem echten Beispiel: einer Webseite, einer Folie oder einem Foto des Raums.
Im Zweifel lieber weniger Farben. Drei bis fünf Farben reichen für fast jedes Projekt.
Häufige Fehler bei Farben
- Zu viele Farben. Das Ergebnis wirkt unruhig, und nichts sticht hervor.
- Allen Farben das gleiche Gewicht geben. Ohne dominante Farbe weiß das Auge nicht, wohin es schauen soll.
- Den Kontrast vergessen. Text, den man nicht lesen kann, oder Buttons, die niemand sieht.
- Alles stark sättigen. Sehr knallige Farben ermüden. Kombiniere sie mit sanfteren Tönen.
- Den Kontext ignorieren. Eine Farbe wirkt bei Tageslicht, am Bildschirm und im Druck unterschiedlich.
- Kopieren ohne Anpassen. Eine Farbpalette, die für eine Marke funktioniert, passt nicht unbedingt zu deiner Zielgruppe.
- Neutraltöne verschiedener Temperatur mischen. Ein kühles Grau neben einem warmen Beige kann schmutzig wirken. Wähle Neutraltöne aus derselben Familie.
- Nicht auf mehreren Bildschirmen testen. Eine Farbe kann am Computer toll und am Handy blass aussehen. Prüfe sie immer auf mehr als einem Gerät.