Farbpalette erstellen
Aus einer Ausgangsfarbe eine stimmige Palette ableiten – oder die Farben eines Bildes übernehmen. Mit Abstufungen für Hintergründe und Ränder und einer Kontrastprüfung neben jedem Wert.
Ausgangsfarbe
Farbharmonie
Der Gegenpol im Farbkreis. Starker Kontrast – sparsam einsetzen.
Palette
Primär
Weiß 5.7 ✓ · Schwarz 3.7 (nur groß)
Akzent 1
Weiß 2.0 ✗ · Schwarz 10.7 ✓
Akzent 2
Weiß 2.5 ✗ · Schwarz 8.2 ✓
Akzent 3
Weiß 1.4 ✗ · Schwarz 14.6 ✓
✓ heißt: besteht die WCAG-Anforderung für normalen Text (4,5:1). „nur groß“ reicht ab etwa 24 Pixel oder 19 Pixel fett (3:1).
Abstufungen der Primärfarbe
Für Hintergründe, Ränder und Zustände. Die Sättigung ist an den Enden zurückgenommen – mit voller Sättigung wirken sehr helle und sehr dunkle Töne giftig.
50
100
200
300
400
500
600
700
800
900
:root {
--primaer: #1f5fd6;
--akzent-1: #9dbaf1;
--akzent-2: #d6961f;
--akzent-3: #f1d49d;
--primaer-50: #f4f6fa;
--primaer-100: #e6ebf4;
--primaer-200: #bcd0f5;
--primaer-300: #8baeee;
--primaer-400: #5688e6;
--primaer-500: #1f5fd6;
--primaer-600: #1c57c4;
--primaer-700: #17459c;
--primaer-800: #1b366a;
--primaer-900: #112445;
}
Warum überall Kontrastwerte stehen
Eine Palette, die hübsch aussieht und deren Text niemand lesen kann, ist keine Palette. Neben jeder Farbe steht deshalb, ob weiße oder schwarze Schrift darauf die WCAG-Anforderung erfüllt: 4,5:1 für normalen Text, 3:1 ab etwa 24 Pixel oder 19 Pixel fett.
Das ist keine Kür. Seit Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz viele Unternehmen zu barrierefreien digitalen Angeboten – und Kontrast ist der Punkt, an dem es am häufigsten scheitert.
Zu den Abstufungen
Die Reihe von 50 bis 900 folgt dem, was gängige Designsysteme verwenden. Die Sättigung ist an den Enden zurückgenommen: Sehr helle und sehr dunkle Töne wirken mit voller Sättigung giftig – ein Fehler, den man erst sieht, wenn eine ganze Fläche damit gefüllt ist.
Zur Harmonie
Die Farbenlehre gibt Anhaltspunkte, keine Garantien. Einfarbig ist am schwersten falsch zu machen. Gegenüber liefert den stärksten Kontrast – und wird am häufigsten überdosiert. Eine Faustregel, die trägt: eine Hauptfarbe, eine Akzentfarbe, der Rest Grautöne.
Die fertige Palette lässt sich direkt im Joomla-Template-Generator einsetzen.