Brauchen Sie eine Farbe für ein Mockup, ein Diagramm oder eine leere Fläche, und möchten lieber nicht aus Gewohnheit eine wählen? Dieser kostenlose Zufallsfarben-Generator zieht Farben aus dem vollen 24-Bit-Bereich, den ein Bildschirm darstellen kann, und zeigt jede als Farbfeld neben ihrem Code. Wählen Sie im Feld Anzahl, wie viele Sie möchten — von 1 bis 50 —, markieren Sie die benötigten Formate und klicken Sie auf Generieren. Die Seite öffnet sich mit einer einzelnen Farbe in HEX, sodass das erste Ergebnis nur einen Klick entfernt ist. HEX-Code ist von Anfang an markiert, RGB-Code und HSL-Code stehen daneben, und jede Kombination der drei kann gleichzeitig eingeschaltet werden. Die Zahnrad-Schaltfläche neben Generieren öffnet den Abschnitt Erweiterte Einstellungen, wo Sie die Farben auf eine Art oder einen Bereich beschränken, Wiederholungen ausschließen und die Schreibweise von HEX ändern können.
Jede Farbe entsteht in Ihrem Browser über die Web Crypto API (crypto.getRandomValues), die kryptografisch starke Zufallsbytes aus der eigenen Zufallsquelle Ihres Systems liefert, statt aus einer Pseudozufallsfunktion wie Math.random(). Eine Bildschirmfarbe besteht aus drei Kanälen — Rot, Grün und Blau —, jeder eine ganze Zahl von 0 bis 255, und ein Zufallsbyte kann genau 256 Werte annehmen. Jeder Kanal ist also einfach ein Byte, ohne irgendetwas dazwischen: Es bleibt kein Rest übrig, und kein Umrechnungsschritt bevorzugt einen Farbton. Das macht alle 16.777.216 Farben, die die Seite erzeugen kann, jedes Mal, wenn Sie auf Generieren klicken, exakt gleich wahrscheinlich. Ein engerer Bereich im Abschnitt Erweiterte Einstellungen hält dieses Versprechen innerhalb des Bereichs: Die Farben werden weiterhin aus dem gesamten Raum gezogen, und alle, die außerhalb liegen, werden aussortiert, sodass jede vom Bereich erlaubte Farbe die gleiche Chance hat. Ihre Farben werden niemals an unseren Server gesendet, sodass wir sie weder sehen noch protokollieren, und sobald die Seite geladen ist, funktioniert sie auch ohne Verbindung weiter.
Die drei Formate beschreiben dieselbe Farbe auf drei Arten. HEX-Code ist die sechsstellige Form, die in CSS und den meisten Designtools verwendet wird, etwa #0778ff; sie wird in Kleinbuchstaben mit vorangestelltem # geschrieben, und die Optionen Großbuchstaben und Ohne # im Abschnitt Erweiterte Einstellungen ändern das für Tools, die es anders erwarten. RGB-Code schreibt die drei Kanäle aus, etwa rgb(7, 120, 255), was zu Code passt, der jeden Kanal einzeln verarbeitet. HSL-Code beschreibt die Farbe über Farbton, Sättigung und Helligkeit, etwa hsl(213, 100%, 51%), die Form, die sich anschließend am leichtesten von Hand anpassen lässt. Alle drei lassen sich direkt in ein Stylesheet einfügen. Gleich genau sind sie jedoch nicht. HEX und RGB sind exakt; HSL ist gerundet. Die Seite schreibt Farbton, Sättigung und Helligkeit als ganze Zahlen, und bei etwa 89% der Farben lässt sich dieser gerundete Wert nicht exakt in dieselbe Farbe zurückrechnen: #646503 wird als hsl(61, 94%, 20%) angezeigt, was zurückgerechnet #616303 ergibt. Der Unterschied beträgt nie mehr als 5 Schritte in einem Kanal, meist 1 oder 2 — auf dem Bildschirm unsichtbar, aber real, wenn Sie den HSL-Wert speichern und erwarten, den ursprünglichen HEX-Wert zurückzubekommen. Behalten Sie HEX oder RGB als den Wert, den Sie speichern.
Eine Farbe erscheint als einzelnes Farbfeld in der Mitte des Ergebnisses; mehrere erscheinen als nummerierte Liste, eine Farbe pro Zeile, mit den gewählten Formaten nebeneinander und einem kleinen Kontrast-Badge am Ende. Eine Liste mit mehr als drei Farben scrollt im Ergebnisfeld, und der Pfeil in seiner Ecke öffnet sie auf volle Höhe; die Seite merkt sich, wie Sie sie zuletzt verlassen haben. Klicken Sie auf einen Code, um nur diesen Code zu kopieren. Die Kopierschaltfläche am Ende einer Zeile kopiert alle Codes dieser Farbe in einer Zeile, durch Leerzeichen getrennt. Klicken Sie auf das Farbfeld selbst, und der eigene Farbwähler Ihres Browsers öffnet sich: Wählen Sie dort eine andere Farbe, und alle Codes in dieser Zeile werden entsprechend neu geschrieben, in jedem eingeschalteten Format, samt Badge. Alles kopieren kopiert die ganze Serie, eine Farbe pro Zeile, und Als Datei speichern schreibt denselben Text in eine einfache .txt-Datei; beide berücksichtigen jede Farbe, die Sie im Farbwähler geändert haben. Verlauf speichert Ihre letzten 10 Serien in diesem Browser, genau so, wie sie erzeugt wurden, und Löschen leert das Ergebnis. Ihre Einstellungen, einschließlich derer im Abschnitt Erweiterte Einstellungen, werden für den nächsten Besuch gespeichert.
Gleich wahrscheinliche Farben sehen nicht gleichmäßig verteilt aus, und zu wissen, was zu erwarten ist, erspart ein Klicken auf Generieren aus dem falschen Grund. Gemessen über den gesamten Bereich sind etwa 35% der Farben kräftig und gesättigt, mit einer HSL-Sättigung von mindestens 70% und einer Helligkeit zwischen 35% und 65%. Nahezu graue Farben mit einer Sättigung unter 20% machen nur etwa 4% aus, und sehr dunkle Farben (Helligkeit unter 20%) sowie sehr helle (über 80%) liegen bei jeweils etwa 3%. Eine Serie von zehn Farben mit dem Farbtyp Alle Farben enthält daher meist mehrere kräftige Farben und selten ein Pastell oder ein Anthrazit. Wenn Sie eine bestimmte Art benötigen, wählen Sie sie im Feld Farbtyp: Kräftig liefert genau diese Gruppe, und Pastell, Dunkel, Gedämpft und Grautöne liefern jeweils ihre eigene. Benutzerdefiniert erlaubt es, eigene Bereiche für Farbton, Sättigung und Helligkeit festzulegen, und ein Farbtonbereich kann über 0 hinausgehen, sodass ein Bereich von 330 bis 30 Rottöne ergibt. Der Bereich wird gegen den HSL-Code geprüft, den die Seite anzeigt, sodass kein Code außerhalb davon liegt, und wenn er zu wenige Farben für den Wert im Feld Anzahl enthält, bittet die Seite Sie, ihn zu erweitern, statt Farben zu wiederholen. Ansonsten sind Wiederholungen möglich, aber selten: Markieren Sie Ohne Wiederholungen, um sie auszuschließen; ohne diese Option liegt die Wahrscheinlichkeit, dass zwei von 50 Farben aus dem vollen Bereich identisch sind, bei etwa 1 zu 13.700.
Eine Zufallsfarbe wird oft als Hintergrund gewünscht, was die eine Frage aufwirft, die ein Farbfeld nicht mit bloßem Auge beantworten kann: Wird Text darauf lesbar sein? Die Web-Barrierefreiheitsrichtlinie WCAG verlangt für normalen Text ein Kontrastverhältnis von mindestens 4,5:1. Gemessen über alle Farben, die diese Seite erzeugen kann, erreicht schwarzer Text das bei etwa 65% von ihnen und weißer Text bei etwa 36%, und es gibt keine Farbe, bei der beide scheitern: Die bessere der beiden erreicht immer mindestens 4,58:1. Für jeden zufälligen Hintergrund besteht also entweder schwarzer oder weißer Text die Prüfung, und die Seite zeigt Ihnen, welcher. An jeder Farbe steht ein kleines Badge: Aa in der besser lesbaren der beiden Textfarben, gefolgt vom Kontrastverhältnis. Das Verhältnis wird abgerundet, sodass es nie beschönigt, und es aktualisiert sich, wenn Sie die Farbe im Farbwähler ändern. Das Badge vergleicht nur schwarzen und weißen Text; für eine Markenfarbe oder jede andere Textfarbe nutzen Sie einen Kontrastprüfer.
Zufällig ist nicht dasselbe wie harmonisch. Jede Farbe einer Serie wird unabhängig gezogen, ohne Kenntnis der anderen, sodass der Generator nie eine Palette im Sinne eines Designers erstellt — keine Komplementärpaare, keine analogen Reihen, keine gemeinsame Helligkeit. Ein engerer Bereich ändert den Charakter einer Serie, nicht diese Regel: Pastelltöne oder eine Reihe von Blautönen erscheinen weiterhin nacheinander, ohne dass etwas sie verbindet. Genau das ist der Sinn: Der Generator liefert Ihnen die Farbe, die Sie nicht selbst gewählt hätten, und genau das durchbricht eine Gewohnheit oder eine kreative Blockade. Um einen Zufallsfund in etwas Brauchbares zu verwandeln, behalten Sie die Farbe, die Ihnen gefällt, und bauen Sie darum herum, statt so lange auf Generieren zu klicken, bis ein ganzes Set zufällig zusammenpasst. Halten Sie ihren Farbton fest und stufen Sie die Helligkeit für hellere und dunklere Varianten ab, oder drehen Sie den Farbton um 180 Grad für einen kontrastierenden Partner. HSL-Code ist das Format, das aus diesen Schritten Arithmetik statt Raten macht.
Warum diesen Zufallsfarben-Generator wählen?
- Jede Farbe wird in Ihrem Browser mit der Web Crypto API erzeugt, nichts wird hochgeladen
- Alle 16.777.216 Farben sind exakt gleich wahrscheinlich, ein Zufallsbyte pro Kanal
- HEX-, RGB- und HSL-Codes für dieselbe Farbe, in jeder Kombination
- Bis zu 50 Farben gleichzeitig, jede als Farbfeld mit einem Text-Kontrast-Badge
- Kräftig, Pastell, Dunkel, Gedämpft und Grautöne, oder ein eigener Bereich für Farbton, Sättigung und Helligkeit
- Ohne Wiederholungen, wenn Sie es brauchen, und HEX in Großbuchstaben oder ohne #
- Klicken Sie auf einen Code, um ihn zu kopieren, oder ändern Sie jede Farbe im Farbwähler Ihres Browsers
- Alles kopieren, Als Datei speichern und ein Verlauf Ihrer letzten 10 Serien, gespeichert in Ihrem Browser
- Kostenlos und unbegrenzt: keine Anmeldung, kein Kontingent, nichts wird auf unseren Servern gespeichert
Zufallsfarben machen sich überall nützlich, wo eine Farbe gebraucht wird, bevor sich jemand für eine entschieden hat. Designer nutzen sie, um eine kreative Blockade zu überwinden und einen Ausgangspunkt zu finden, den ihre gewohnte Palette nie erreicht hätte. Entwickler füllen Mockups, Platzhalter und Avatare, geben jeder Datenreihe in einem Diagramm eine eigene Farbe, solange das eigentliche Thema noch unentschieden ist, und testen, wie eine Oberfläche mit Hintergründen zurechtkommt, für die sie nicht entworfen wurde — eine Serie von 50 mit dem Farbtyp Alle Farben enthält fast immer mindestens eine sehr dunkle oder sehr helle Farbe, und Dunkel oder Pastell richtet den Test gezielt auf ein Ende aus. Generative Künstler und Prototypentwickler für Spiele speisen die Werte direkt in Code ein, wo die RGB-Form in die meisten Grafikbibliotheken passt. Lehrer stellen die drei Formate nebeneinander, um zu zeigen, dass sich eine Farbe als Code, als drei Kanäle oder als Position auf einem Farbkreis schreiben lässt, und warum die HSL-Version gerundet ist. Und jeder, der eine Liste beschriftet, taggt oder farblich codiert, erhält unterscheidbare Farben, ohne sich über die Wahl zu quälen.
Ein paar ehrliche Grenzen sind gut zu kennen. Dies ist ein Generator, kein Palettentool: Er baut keine Farbharmonien und hält keine Farbe fest, während sich die anderen ändern, und ein engerer Bereich liefert Farben einer Art, nicht Farben, die zueinander passen sollen. Das Kontrast-Badge vergleicht nur schwarzen und weißen Text. Die Seite arbeitet mit den sRGB-Farben, die ein Bildschirm darstellt — HEX, RGB und HSL —, ohne Transparenz und ohne CMYK, Pantone, OKLCH oder benannte CSS-Farben; für den Druck gleichen Sie die Farbe in Ihrem Druck-Workflow ab, statt sich auf einen Bildschirmcode zu verlassen. Derselbe Code kann auch auf verschiedenen Displays etwas anders aussehen, weil Bildschirme nicht einheitlich kalibriert sind. HSL-Werte sind gerundet, wie oben beschrieben, und sofern Ohne Wiederholungen nicht markiert ist, wird eine Serie nicht auf Wiederholungen geprüft. Was die Seite tatsächlich garantiert, ist enger gefasst und exakt: Jede ihrer 16.777.216 Farben, oder jede Farbe innerhalb des von Ihnen festgelegten Bereichs, hat bei jedem Klick dieselbe Chance, gezogen aus der kryptografischen Quelle Ihres Browsers und nie an unseren Server gesendet.