Der Zufallsfarben-Generator erzeugt Sätze von 1 bis 24 Farben und zeigt jede als Farbkarte mit ihren HEX-, RGB- und HSL-Werten. Drei Harmoniemodi grenzen die Ausgabe ein: Zufällig schöpft aus dem vollen RGB-Würfel, Pastell begrenzt Sättigung und Helligkeit auf weiche Bereiche, und Kräftig erzwingt kühne, stark gesättigte Töne. Die Farben stammen aus der kryptografisch sicheren Zufallsquelle des Browsers statt aus Math.random, und jede Farbkarte lässt sich mit einem Klick in die Zwischenablage kopieren.
Verwendung
- Wählen Sie einen Harmoniemodus: Zufällig, Pastell oder Kräftig.
- Ziehen Sie den Schieberegler, um zwischen 1 und 24 Farben zu wählen. Die Voreinstellung ist 6.
- Klicken Sie auf Generieren, um einen frischen Satz zu würfeln. Ein Wechsel des Modus oder der Anzahl erzeugt das Raster ebenfalls sofort neu.
- Klicken Sie auf eine Farbkarte, um ihren HEX-Code zu kopieren. Die Karte zeigt für etwa eineinhalb Sekunden eine Bestätigung.
Die auf jeder Karte angezeigten RGB- und HSL-Zeichenfolgen werden nicht automatisch kopiert — markieren Sie sie von Hand, wenn Sie diese Formate brauchen.
Wie sich die drei Modi unterscheiden
Der Zufallsmodus wählt jeden Rot-, Grün- und Blaukanal unabhängig von 0 bis 255, kann also alles von fast Schwarz bis fast Weiß liefern. Pastell und Kräftig wählen einen Farbton von 0 bis 359 und schränken dann Sättigung und Helligkeit ein, wodurch jedes Ergebnis in einem nutzbaren Bereich bleibt:
| Modus | Farbquelle | Sättigung | Helligkeit | Typische Verwendung |
|---|---|---|---|---|
| Zufällig | RGB 0–255 | uneingeschränkt | uneingeschränkt | Brainstorming, Platzhalter |
| Pastell | Farbton 0–359 | 55–85 % | 75–90 % | Hintergründe, Karten, ruhige UI |
| Kräftig | Farbton 0–359 | 85–100 % | 40–55 % | Schaltflächen, Akzente, Diagrammreihen |
Weil Pastell die Helligkeit bei 75 % oder höher hält, bleiben diese Farben hell genug, um hinter dunklem Text zu stehen. Kräftig hält die Helligkeit zwischen 40 % und 55 % bei nahezu maximaler Sättigung, sodass das Ergebnis als starker Akzent wirkt statt als Verwischung.
Praxisbeispiele
Die genauen Farben unterscheiden sich bei jedem Lauf, aber das Anzeigeformat ist immer gleich. Eine Pastell-Farbkarte könnte zeigen:
#A8D8EA—rgb(168, 216, 234)—hsl(196, 61%, 79%)
Eine Kräftig-Farbkarte könnte zeigen:
#FF5733—rgb(255, 87, 51)—hsl(11, 100%, 60%)
Um eine davon in CSS zu verwenden, kopieren Sie den HEX-Wert und schreiben color: #FF5733;, oder nutzen Sie die RGB-Form als rgb(255, 87, 51). HSL ist von den dreien am besten editierbar: Erhöht man die Helligkeit von #FF5733, während Farbton 11 und Sättigung 100 erhalten bleiben, bleibt die orange Identität gleich und nur die Helligkeit ändert sich.
Eine Farbkarte lesen: HEX, RGB und HSL
HEX packt jeden Kanal in zwei hexadezimale Ziffern und erzeugt so eine kurze #RRGGBB-Zeichenfolge. RGB listet dieselben drei Kanäle als ganze Zahlen von 0 bis 255. HSL ist ein anderes Modell: Der Farbton ist ein Winkel auf dem Farbkreis, die Sättigung gibt an, wie weit die Farbe von Grau entfernt ist, und die Helligkeit, wie nah sie an Weiß oder Schwarz liegt. Alle drei beschreiben eine Farbe, jede einzelne genügt also für CSS. Das Tool rechnet jeden erzeugten Wert intern von Hex über RGB nach HSL um, weshalb die drei Zeilen auf einer Karte immer übereinstimmen.
Wie der Zufall erzeugt wird
Der Zufallsmodus liest eine 32-Bit-Ganzzahl aus crypto.getRandomValues und reduziert sie in jeden Kanalbereich, wodurch ein Rot-, Grün- und Blauwert von 0 bis 255 entsteht. Pastell und Kräftig nutzen dieselbe Quelle dreimal pro Farbe — einmal für den Farbton von 0 bis 359, einmal für die Sättigung, einmal für die Helligkeit — und wandeln das HSL-Tripel dann in Hex um. Weil der Browser die Entropie liefert, greift der Generator nie auf Math.random zurück. Es bleibt eine gewöhnliche Webseite: Die Zahlen sind unvorhersehbar, aber nicht auf kryptografische Qualität geprüft, behandeln Sie die Ausgabe also als Designmaterial und nicht als Schlüsselmaterial. Die Hex-, RGB- und HSL-Umrechnungen sind für die Anzeige exakt, wobei die Kanalwerte auf ganze Zahlen gerundet werden; deshalb kann das Ändern einer Farbe um eine HSL-Einheit eine Hex-Ziffer um einen Schritt verschieben.
Häufige Fehler
- Kräftige Farben für Fließtext auf Weiß verwenden. Eine Farbe mit 100 % Sättigung kann als Schaltfläche funktionieren und trotzdem den WCAG-AA-Kontrast für kleinen Text verfehlen. Prüfen Sie das Paar aus Vordergrund und Hintergrund, bevor Sie es einsetzen.
- Eine Farbe nur anhand des Farbfelds beurteilen. Ein großer Block sieht anders aus als ein dünner Rahmen oder ein einzelnes Symbol. Testen Sie die Farbe im echten Kontext.
- Einen Satz als Palette behandeln. Zufallsfarben sind unabhängig, nicht harmonisch. Wenn Sie Farben brauchen, die zusammenwirken, geben Sie eine gewählte Farbe in einen Paletten-Generator.
- Annehmen, dass Wiederholung unmöglich ist. Zufällige Stichproben können eine Farbe wiederholen oder zwei fast identische im selben Satz liefern. Erzeugen Sie einen größeren Satz oder wechseln Sie den Modus, statt einem kleinen zu vertrauen.
Praktische Tipps
Erzeugen Sie mehr Farben als nötig — 12 bis 24 — und wählen Sie dann die besten wenigen aus, statt einen kleinen Satz neu zu würfeln. Nutzen Sie Kräftig für Vordergrundakzente und Pastell für große Hintergrundflächen; die beiden Bereiche ergänzen sich. Wenn eine erzeugte Farbe nahe an Ihrem Wunsch liegt, aber nicht ganz passt, kopieren Sie ihre HSL-Werte und justieren Sie Sättigung oder Helligkeit von Hand, statt von vorn zu beginnen. Und wenn eine Seite einen Hintergrund mit Text darauf braucht, lassen Sie das Paar vor der Entscheidung durch einen Kontrastprüfer laufen.
Verwandte Tools
Häufig gestellte Fragen
Welche Sättigungs- und Helligkeitsbereiche nutzen Pastell und Kräftig genau?
Pastell wählt einen zufälligen Farbton von 0 bis 359 und begrenzt dann die Sättigung auf 55–85 % sowie die Helligkeit auf 75–90 %. Kräftig nutzt denselben Farbtonbereich, erzwingt aber eine Sättigung von 85–100 % und eine Helligkeit von 40–55 %. Der Zufallsmodus überspringt HSL ganz und zieht jeden der Kanäle Rot, Grün und Blau unabhängig von 0 bis 255.
Warum ist die Farbanzahl auf 24 begrenzt?
Der Schieberegler reicht von 1 bis 24, und der Wert wird in diesen Bereich geklemmt, selbst wenn der zugrunde liegenden Funktion eine größere Zahl übergeben wird. Ein Raster mit 24 Farbfeldern reicht bereits mehr als aus, um daraus eine Palette zusammenzustellen, ohne scrollen zu müssen, und die niedrige Obergrenze hält Erzeugung und Darstellung sofort.
Ein Klick auf Generieren würfelt jede Farbkarte neu — kann ich Farben behalten, die mir gefallen?
Nein. Generieren ersetzt das gesamte Raster auf einmal, und ein Wechsel des Modus oder des Schiebereglers tut dasselbe. Es gibt keine Sperre und keine Behalten-Schaltfläche pro Farbfeld, kopieren Sie also die HEX-Werte, die Sie behalten möchten, bevor Sie erneut klicken.
Warum sehen zwei Farben in einem Durchlauf manchmal fast identisch aus?
Im Zufallsmodus wird jeder Kanal unabhängig gezogen, sodass gelegentlich ähnliche Werte nebeneinander landen. Es gibt keine Mindestabstandsregel zwischen den Farbfeldern. Erzeugen Sie einen größeren Satz und wählen Sie daraus, oder wechseln Sie zu Pastell oder Kräftig, deren schmalere Sättigungs- und Helligkeitsbänder Fast-Duplikate unwahrscheinlicher machen.
Wird Math.random verwendet, um die Farben zu erzeugen?
Nein. Der Generator liest ganze Zahlen aus crypto.getRandomValues, der kryptografisch sicheren Zufallsquelle des Browsers. Das macht die Ausgabe weit weniger vorhersehbar als Math.random, das für nichts Sicherheitsrelevantes ausgelegt ist. Für kryptografisches Schlüsselmaterial ist die Ausgabe dennoch nicht geeignet — es ist ein Farbwähler, kein Geheimnisgenerator.
Welcher Wert wird kopiert, wenn ich auf eine Farbkarte klicke?
Nur die HEX-Zeichenfolge in Großbuchstaben, etwa #FF5733. Die Karte zeigt kurz eine Kopiert-Bestätigung und stellt dann den Code wieder her. Die RGB- und HSL-Zeilen auf der Karte dienen nur der Anzeige, kopieren Sie sie also manuell, wenn Ihr Code diese Formate braucht.
Geprüft vom HandyTools-Hub-Team · Zuletzt aktualisiert