Zufallsfarben-Generator
Zufallsfarben und Codes für Design und Code.
Klick auf einen Code, um ihn zu kopieren. Klick auf das Schloss, um eine Farbe beim nächsten Erzeugen zu behalten.
- HEX-, RGB- oder HSL-Codes
- Pastell- und dunkle Paletten
- Farben sperren, Rest neu würfeln
So erzeugst du Zufallsfarben
- Stell ein, wie viele Farben, und wähl ein Codeformat.
- Wähl eine zufällige, pastellfarbene oder dunkle Palette.
- Klick auf eine Kachel, um ihren Code zu kopieren, oder sperr sie vor dem nächsten Erzeugen.
HEX, RGB und HSL im Vergleich
Alle drei Formate beschreiben genau dieselbe Farbe. Welches du brauchst, hängt davon ab, wo du es einfügst.
| Format | Sieht aus wie | Am besten für |
|---|---|---|
| HEX | #3B82F6 | CSS, Design-Tools, schnelles Teilen |
| RGB | rgb(59, 130, 246) | CSS, Code, der Farben mischt oder überblendet |
| HSL | hsl(217, 91%, 60%) | Eine Farbe von Hand anpassen: Farbton, dann Kräftigkeit, dann Helligkeit |
HSL lässt sich meist am leichtesten selbst anpassen, da das Verschieben der Helligkeitszahl den gleichen Farbton behält, was bei HEX und RGB nach Augenmaß schwerer fällt.
Zufällig, Pastell und Dunkel, in Zahlen
Jeder Modus wählt aus einem anderen Ausschnitt des Farbrads, statt nur den Farbton zu ändern.
| Modus | Sättigungsbereich | Helligkeitsbereich |
|---|---|---|
| Zufällig | 40 bis 100 % | 25 bis 75 % |
| Pastell | 35 bis 60 % | 75 bis 88 % |
| Dunkel | 35 bis 70 % | 12 bis 28 % |
Der Farbton wird in jedem Modus immer aus dem vollen Bereich 0 bis 359 gewählt, Pastell und Dunkel decken also weiter jede Farbfamilie ab, nur heller oder dunkler.
Wofür Leute Zufallsfarben nutzen
- Schnelle Design-Inspiration, wenn du bei der Marken- oder Themenfarbe nicht weiterkommst.
- Platzhalterfarben für Wireframes, Diagramme und UI-Mockups, bevor eine echte Palette feststeht.
- Avatar-Hintergründe, Tags oder Kategoriefarben in einer App erzeugen.
- Kunst- und Bastelprojekte, wie eine zufällige Farbvorgabe für eine tägliche Skizze.
Häufige Fragen zu Zufallsfarben-Generator
Was ist der Unterschied zwischen den Paletten?
Zufällig deckt das ganze Farbrad ab. Pastell hält Helligkeit und Sättigung sanft für zarte Hintergründe. Dunkel hält Farben bei niedriger Helligkeit für dunkle Themes und Kontrasttext.
Wie behalte ich eine Farbe, die mir gefällt?
Klick auf das Schloss-Symbol einer Kachel. Gesperrte Kacheln behalten ihre Farbe beim nächsten Erzeugen, du kannst also nur den Rest neu würfeln.
Was ist der Unterschied zwischen HEX, RGB und HSL?
HEX und RGB beschreiben eine Farbe über ihre Rot-, Grün- und Blauanteile. HSL beschreibt sie über Farbton, Sättigung und Helligkeit, was sich oft leichter von Hand anpassen lässt.
Wie kopiere ich einen Farbcode?
Klick auf den Codetext unter einer Kachel, und er wird sofort in deine Zwischenablage kopiert.
Welche Bereiche nutzen die Paletten tatsächlich?
Zufällig wählt jeden Farbton mit Sättigung 40 bis 100 Prozent und Helligkeit 25 bis 75 Prozent. Pastell schränkt die Helligkeit auf 75 bis 88 Prozent ein. Dunkel schränkt die Helligkeit auf 12 bis 28 Prozent ein, mit Sättigung 35 bis 70 Prozent, damit Farben satt statt trüb bleiben.
Passen zwei Zufallsfarben gut zusammen?
Manchmal. Dieses Tool wählt Farben unabhängig voneinander für Abwechslung und Inspiration, es baut keine abgestimmte Palette. Für garantiert zusammenpassende Farben erzeug mehrere, sperr die, die dir gefallen, und würfle den Rest neu, bis das Set stimmt.
Kann ich nur eine Farbe statt eines Sets erzeugen?
Ja, setz die Anzahl auf 1 und klick auf Erzeugen für eine einzelne Zufallsfarbe in deinem gewählten Format.
Wo kann ich einen HEX- oder RGB-Code nutzen, sobald ich ihn habe?
Füg einen HEX-Code direkt in CSS, Figma, Photoshop oder fast jedes Design-Tool ein. RGB- und HSL-Werte funktionieren genauso in CSS-Funktionen wie rgb() und hsl().