Extras
Zufällige Farbe
Farbe und Palette für Layout, Hintergrundbild oder Stimmung – mit einem Klick.
Aa Auf diesem Hintergrund liest sich weißer Text gut – Kontrast 5,7 : 1.
Wie man eine Farbe wählt
Eine zufällige Farbe ist nicht nur Inspiration. Manchmal braucht man einfach einen „anderen“ Ton, um Testdaten von echten Daten zu unterscheiden, einen Hintergrund für eine Karte zu finden oder zu sehen, wie eine Kombination im echten Layout wirkt. Der Generator liefert eine gleichverteilt zufällige Farbe aus 16,7 Millionen Varianten und zeigt sie sofort in drei Modellen.
Danach beginnt das Design: Derselbe Farbton wirkt als Hintergrund, als Akzent und als Text unterschiedlich. Deshalb wird neben der Farbe der Kontrast angezeigt – so siehst du sofort, ob sie als Beschriftung taugt.
HEX, RGB und HSL – der Unterschied
HEX und RGB beschreiben dasselbe: drei Kanäle – Rot, Grün, Blau – mit je 256 Werten. Der Unterschied liegt nur in der Schreibweise: #7C3AED oder rgb(124, 58, 237). Diese Schreibweise ist praktisch für Code, aber unbequem für Menschen: Man sieht nicht, wie sich der Farbton „verschieben“ lässt, ohne die Helligkeit zu ändern.
HSL zerlegt eine Farbe in hue (Farbton im Kreis, 0–360°), saturation (Sättigung, 0–100 %) und lightness (Helligkeit, 0–100 %). Hier wird die Logik sichtbar: Für eine Komplementärfarbe genügt es, den Farbton um 180° zu drehen. Genau deshalb werden Harmonien in HSL berechnet und nicht in RGB.
Harmonien und wann du sie einsetzt
| Schema | Farbton-Drehung | Wo passend |
|---|---|---|
| Komplementär | 180° | Button auf einem Hintergrund, Akzent in einem ruhigen Layout |
| Analog | ±30° | Verläufe, Illustrationen, weiche Übergänge |
| Triade | 120°, 240° | drei Kategorien mit gleichem Gewicht |
| Tetrade | 90°, 180°, 270° | gesättigte Schemata, Infografiken |
Die 60-30-10-Regel hilft, das Layout nicht zu überladen: sechzig Prozent der Fläche die Hauptfarbe, dreißig Prozent eine Stützfarbe, zehn Prozent der Akzent. Eine Harmonie liefert den Satz, aus dem sich diese drei Rollen leicht wählen lassen.
Kontrast und Lesbarkeit
Die Helligkeit einer Farbe wird nach der WCAG-Formel berechnet: Die Kanäle werden in den linearen Raum überführt und dann mit den Gewichten 0,2126 für Rot, 0,7152 für Grün und 0,0722 für Blau addiert. Der Kontrast zweier Farben ist das Verhältnis (L1 + 0,05) / (L2 + 0,05), wobei L1 die Helligkeit der helleren Farbe ist.
Der Schwellenwert für normalen Text – 4,5 : 1 (Stufe AA), für großen Text 3 : 1. Der Generator wählt sofort, welcher Text besser lesbar ist – weiß oder schwarz – und zeigt das erreichte Verhältnis. Liegt der Wert unter 4,5, taugt die Farbe als Kartenhintergrund, aber nicht für eine Beschriftung.
Eine eigene Feinheit: Der Kontrast berücksichtigt keine Farbfehlsichtigkeit und ersetzt keine Prüfung in der echten Oberfläche. Für wichtige Zustände dupliziere die Farbe mit einem Symbol oder Text.
Was du mit der fertigen Palette machst
- Kopiere die HEX-Werte und füge sie in die Theme-Variablen ein;
- Prüfe den Textkontrast zu jedem Hintergrund, nicht nur zum Hauptbereich;
- Nutze nicht mehr als zwei gesättigte Farben in einem Block;
- Speichere eine gelungene Kombination – sie lässt sich nicht neu erzeugen.