Zufallsfarben-Generator

So funktioniert es

Geben Sie links ein, wie viele Farben Sie brauchen. Bei 6 erscheinen rechts sechs Zeilen, jede mit derselben Farbe in drei Schreibweisen, etwa #D4F4BE · rgb(212, 244, 190) · hsl(95, 70%, 85%). Unter der Ausgabe bekommt jede Farbe ein Farbfeld, beschriftet mit genau dem HEX-Code aus ihrer Zeile – so finden Sie den Code des Feldes, das Ihnen gefällt, sofort. Die Einstellung Farbton bestimmt, wo die Farben liegen: Pastell liefert helle, weiche Töne, Kräftig leuchtende, gesättigte und Dunkel tiefe Töne; „Alle“ gibt jeder der 16,7 Millionen Bildschirmfarben die gleiche Chance. Bei einem gewählten Farbton rücken aufeinanderfolgende Farben um den goldenen Winkel (137,5 Grad) auf dem Farbkreis weiter, deshalb ähneln sich die Farben einer Palette nicht. Jede Änderung einer Einstellung zieht neue Farben; die Zahl löschen und neu eingeben ergibt ebenfalls eine neue Palette. Ob Text auf einer Farbe lesbar bleibt, prüfen Sie, indem Sie ihren HEX-Wert in das Werkzeug Farbkontrast prüfen einfügen.

Dieses Werkzeug ist auch als zufallsfarbe generator, zufaellige farbe erzeugen, zufaellige hex farbe, pastellfarben generator, random color generator bekannt.

Was ist HSL?

HSL beschreibt eine Farbe mit drei Zahlen. H (Hue, Farbton) ist der Winkel auf dem Farbkreis: 0 ist Rot, 120 Grün, 240 Blau. S (Saturation, Sättigung) gibt in Prozent an, wie kräftig oder grau die Farbe ist. L (Lightness, Helligkeit) reicht von 0 %, Schwarz, bis 100 %, Weiß. Das Modell liegt näher am menschlichen Farbempfinden als RGB, deshalb genügt für „heller“ oder „gedämpfter“ eine einzige Zahl.

Was ist HEX-Farbcode?

Ein HEX-Farbcode schreibt den Rot-, Grün- und Blaukanal einer Bildschirmfarbe als zweistellige Hexadezimalzahlen nebeneinander: In #D4F4BE steht D4 für Rot (212), F4 für Grün (244) und BE für Blau (190). Jeder Kanal reicht von 0 bis 255, also lassen sich 256 × 256 × 256 = 16.777.216 Farben schreiben. In CSS, Grafikprogrammen und Markenrichtlinien ist es die verbreitetste Farbangabe.

Was ist der Unterschied zwischen RGB und HSL?

Beide beschreiben dieselben Bildschirmfarben, nur auf anderen Achsen. RGB gibt an, wie stark die drei Lichtkanäle des Bildschirms – Rot, Grün, Blau – leuchten; so arbeitet das Display tatsächlich, aber „etwas heller“ heißt, alle drei Zahlen zu ändern. HSL schreibt dieselbe Farbe als Farbton, Sättigung und Helligkeit; für eine hellere Variante erhöhen Sie nur L. Dieses Werkzeug setzt die Farbtongrenzen in HSL und rechnet RGB und HEX für den Bildschirm aus.

Warum wirken Zufallsfarben oft schmutzig?

Rot, Grün und Blau unabhängig voneinander zufällig zu wählen, ist das gerechteste Verfahren, liefert aber keine Farben, die Menschen als schön empfinden: Die meisten Ergebnisse liegen bei mittlerer Sättigung, in gräulichen und bräunlichen Tönen. Die Option „Alle“ arbeitet bewusst so – für Testdaten, Platzhalter oder wenn wirklich jede Farbe dieselbe Chance haben muss.

Für Farben, mit denen Sie gestalten, funktionieren Grenzen im HSL-Raum besser. HSL zerlegt eine Farbe in Farbton (H, 0-360 Grad), Sättigung (S) und Helligkeit (L). Halten Sie die Helligkeit zwischen 75 und 90 % und die Sättigung zwischen 40 und 70 %, wird jede Farbe pastellig. Die drei Farbton-Optionen wenden genau solche Grenzen an, und die Ergebniszeile nennt sie.

Welche Schreibweise wofür?

HEX (#D4F4BE) ist die kürzeste Schreibweise; CSS, Grafikprogramme und die meisten Farbwähler nehmen sie direkt an. rgb() nennt jeden Kanal als Dezimalzahl und wird zu rgba(), wenn Sie Transparenz brauchen. hsl() lässt sich am leichtesten von Hand anpassen: Für eine hellere Variante desselben Farbtons erhöhen Sie nur die letzte Zahl.

Kommt die Palette in eine Benutzeroberfläche, denken Sie an die Schriftfarbe: Weiße Schrift ist auf Pastell- und hellen Farben kaum lesbar, schwarze auf dunklen. Fügen Sie einen HEX-Wert aus diesem Werkzeug in „Farbkontrast prüfen“ ein, um das WCAG-Kontrastverhältnis zu messen.

Häufige Fragen

Wie erzeuge ich einen zufälligen Farbcode?

Geben Sie links die gewünschte Anzahl ein und wählen Sie den Farbton; die Farben erscheinen rechts mit HEX-, RGB- und HSL-Code, darunter die Farbfelder. Für neue Farben ändern Sie die Einstellung oder geben die Zahl neu ein.

Wie bekomme ich zufällige Pastellfarben?

Stellen Sie den Farbton auf Pastell. Das Werkzeug erzeugt dann nur Farben mit einer Helligkeit von 75 bis 90 % und einer Sättigung von 40 bis 70 % – der helle, weiche Bereich, der als Pastell wirkt. Jede Zeile nennt den HSL-Wert, die Grenzen sind also überprüfbar.

Kann dieselbe Farbe zweimal vorkommen?

Bei „Alle“ gibt es 16.777.216 Farben mit gleicher Wahrscheinlichkeit, eine Wiederholung ist sehr unwahrscheinlich. Bei den Farbton-Optionen sind es weniger Farben, aber aufeinanderfolgende Farben werden auf dem Farbkreis verteilt, sodass ähnliche Farben in einer Palette selten vorkommen. Mit „Herunterladen“ sichern Sie eine gelungene Palette als .txt-Datei.

Wie werden die Farben ausgewählt?

Das Werkzeug nutzt die kryptografisch sichere Zufallsquelle des Browsers (crypto.getRandomValues) und bildet die Zahlen ohne Modulo-Verzerrung auf den Bereich ab. Keine Farbe und kein Farbton kommt häufiger vor als die anderen.