Gespräch buchen

Kostenloses Werkzeug

Farbpaletten für Websites

Diese Farbpaletten für Websites stammen aus meiner Arbeit, es sind dieselben Farbwelten, die ich Kunden im Briefing vorschlage. Unter jeder steht, ob sie Text trägt. Ein Klick auf eine Farbe kopiert den HEX-Wert.

So liest du die Karten

Schöne Kombinationen gibt es viele. Auf einer Website muss eine Palette aber vor allem eines können: Text lesbar machen. Deshalb rechnet jede Karte das stärkste Paar aus Text- und Hintergrundfarbe nach der WCAG-Formel nach. Reicht keines für Fließtext, steht dort, mit welcher Schriftfarbe die Palette trotzdem funktioniert.

Die Bandhöhen zeigen grob, wie viel Fläche jede Farbe bekommt: oben die Grundfläche, unten der Akzent. Warum eine Marke Rollen für ihre Farben braucht statt einer Lieblingsfarbe, steht im Beitrag Farben im Branding.

Häufige Fragen

Was bedeutet die Kontrast-Angabe unter jeder Palette?

Das ist das Kontrastverhältnis nach WCAG, dem Standard für barrierefreie Websites. Normaler Text braucht mindestens 4,5 : 1 zum Hintergrund (Stufe AA), ab 7 : 1 gilt Stufe AAA. Zwischen 3 und 4,5 reicht es nur für große Schrift und für Rahmen oder Symbole von Bedienelementen.

Darf ich die Paletten verwenden?

Ja, für alles. Farbkombinationen sind frei. Ein Klick auf eine Farbe kopiert den HEX-Wert, „CSS kopieren“ liefert alle Farben als CSS-Variablen.

Warum haben viele Paletten nur zwei oder drei Farben?

Weil eine Website selten mehr braucht. Eine Grundfarbe, ein heller und ein dunkler Neutralton, dazu höchstens eine Akzentfarbe für Knöpfe und Links. Wer fünf gleichberechtigte Farben einsetzt, hat am Ende keine, die noch hervorhebt.

Wie verteile ich die Farben auf der Seite?

Eine brauchbare Faustregel aus der Raumgestaltung ist 60-30-10: rund 60 Prozent für die ruhige Grundfläche, 30 Prozent für die zweite Farbe, 10 Prozent für den Akzent. Die Bandhöhen der Karten folgen ungefähr diesem Verhältnis.

Mehr zu Farben

Design

Farbe Grün: Bedeutung, Wirkung und Einsatz in Marke und Website

Design

Farbe Gelb: Bedeutung, Wirkung und Einsatz in Marke und Website

Design

Farbe Rot: Bedeutung, Wirkung und Einsatz in Marke und Website

Palette gefunden, Website fehlt?

Ich baue die Seite dazu

Eine Palette ist der leichte Teil. Schwieriger ist, sie über alle Seiten durchzuhalten: welche Farbe für Knöpfe, welche für Links, welche nie für Text. Das lege ich fest, bevor die erste Seite steht.

Webdesign ansehen

Lieber sofort? Dann so.