Welche Farbformate werden angezeigt?

Jede Farbe wird als HEX-Code (z. B. #4F46E5) sowie als RGB- und HSL-Wert angezeigt. Mit einem Klick auf „Kopieren“ kannst du den HEX-Code kopieren und direkt in CSS, Figma oder einem anderen Design-Tool verwenden.

Was ist der Unterschied zwischen „Harmonisch“ und „Beliebige Farbe“?

„Beliebige Farbe“ wählt zufällig aus den 16,7 Millionen möglichen RGB-Farben aus, wobei jede die gleiche Wahrscheinlichkeit hat. Dabei können auch viele gedeckte oder wenig harmonisch wirkende Töne entstehen. „Harmonisch“ begrenzt Sättigung und Helligkeit auf Bereiche, die in der Regel für ansprechendere Farben sorgen.

Kann ich eine Farbe behalten, die mir gefällt?

Ja. Klicke unter der Farbe auf „Kopieren“, um ihren HEX-Code zu speichern. Da eine neue Palette alle bisherigen Farben ersetzt, solltest du deine Favoriten vorher kopieren.

Kann ich die Palette im Vollbild anzeigen?

Ja. Klicke oben im Tool auf „Vollbild“, damit die Farbfelder groß auf dem Bildschirm angezeigt werden. Das ist besonders praktisch, wenn du deine Farbideen präsentierst. Mit Esc oder „Vollbild beenden“ kehrst du zur normalen Ansicht zurück.

Farbgenerator – zufällige Farben mit HEX-, RGB- & HSL-Codes

Generiere eine zufällige Farbe oder eine ganze Farbpalette mit Farbcodes zum Kopieren.

Was ist ein Farbgenerator?

Ein Zufallsfarbgenerator erstellt zufällige Farben und zeigt ihre Farbcodes an, damit du sie direkt verwenden kannst. Er ist eine schnelle Inspirationsquelle, wenn du eine Website, ein Logo, eine Präsentation, einen Raum oder ein Kunstwerk gestaltest und noch nicht weißt, wo du anfangen sollst. Generiere eine einzelne Farbe oder eine ganze Palette, behalte deine Favoriten und probiere neue Kombinationen aus.

So benutzt du ihn

Anzahl der Farben: Wähle eine einzelne Farbe, eine Palette aus 5 Farben oder 10 Farben.
Stil: Wähle aus, welche Art von Farben du möchtest (siehe unten).
Klicke auf Farben erzeugen. Jedes Farbfeld zeigt den zugehörigen HEX-, RGB- und HSL-Code.
Klicke unter einem Farbfeld auf Kopieren, um den HEX-Code zu kopieren. Anschließend kannst du ihn direkt in CSS, Figma, Canva, PowerPoint oder einer anderen Designanwendung verwenden.

Vollbild: Klicke oben im Tool auf Vollbild, um die Palette groß auf dem Bildschirm anzuzeigen. Das ist hilfreich, wenn du Farbideen einem Kunden oder einer Klasse präsentierst. Mit Esc oder Vollbild beenden kehrst du zur normalen Ansicht zurück. Unter 🎨 Farben & Effekte kannst du die Farben von Hintergrund und Schaltflächen anpassen.

Die vier Farbstile

Harmonisch: Zufällige Farbtöne mit mittlerer bis hoher Sättigung und mittlerer Helligkeit. Diese Farben wirken meist lebendig und eignen sich gut als Ausgangspunkt für eine ansprechende Palette.
Pastell: Sanfte, helle Farben, die sich gut für Hintergründe, Baby- und Hochzeitsdesigns sowie ruhige Benutzeroberflächen eignen.
Dunkel: Tiefe, gedeckte Farbtöne, die sich besonders für Hintergründe im Dark Mode, Kopfbereiche und stimmungsvolle Designs eignen.
Beliebige Farbe: Wählt zufällig eine der 16.777.216 möglichen RGB-Farben aus, wobei jede die gleiche Wahrscheinlichkeit hat. Deshalb können auch viele Braun-, Grau- und andere gedeckte Töne dabei sein – gelegentlich ist aber auch ein echter Volltreffer dabei.

HEX, RGB und HSL erklärt

HEX (zum Beispiel #4F46E5) ist eine verbreitete Schreibweise für Farben im Web. Die drei Zeichenpaare stehen für die Anteile von Rot, Grün und Blau. Jeder Anteil kann Werte von 00 bis FF annehmen.
RGB (zum Beispiel rgb(79, 70, 229)) beschreibt dieselben Farbanteile als Zahlen von 0 bis 255.
HSL (zum Beispiel hsl(243, 75%, 59%)) beschreibt eine Farbe anhand von drei Eigenschaften: Farbton (Hue – die Position auf dem Farbkreis zwischen 0 und 360°), Sättigung (Saturation – wie kräftig oder blass die Farbe wirkt) und Helligkeit (Lightness – wie hell oder dunkel sie ist). Dieses Format eignet sich besonders gut, um Farben gezielt anzupassen, etwa um für einen Hover-Effekt eine hellere Variante zu erstellen.

Wann sind Zufallsfarben hilfreich?

Web- und App-Design: Finde eine passende Akzentfarbe oder eine erste Farbpalette, die du anschließend weiter verfeinern kannst.
Kunst und Illustration: Fordere dich selbst heraus, ein Bild ausschließlich mit den Farben der generierten Palette zu gestalten.
Markenauftritt und Präsentationen: Probiere verschiedene Farbrichtungen aus, bevor du dich auf die endgültigen Markenfarben festlegst.
Spiele und Unterricht: Weise Teams zufällige Farben zu oder spiele „Wie heißt diese Farbe?“.
Zuhause und Basteln: Finde Inspiration für Strick- und Nähprojekte oder neue Farbkombinationen für deine Räume.

Tipps für die Arbeit mit Farbpaletten

Nutze die 60-30-10-Regel. Viele Designer verwenden eine Hauptfarbe für etwa 60 % des Designs, eine zweite Farbe für 30 % und eine Akzentfarbe für die restlichen 10 %.
Achte auf ausreichenden Textkontrast. Dunkler Text auf hellem Hintergrund und weißer Text auf dunklem Hintergrund sind oft gut lesbar. Prüfe den Kontrast trotzdem, bevor du dein Design veröffentlichst.
Kopiere deine Lieblingsfarben, bevor du eine neue Palette erzeugst. Eine neue Palette ersetzt die bisherigen Farben. Sichere deshalb die Farbcodes, die du behalten möchtest.

Brauchst du stattdessen einen zufälligen Buchstaben oder eine Zufallszahl? Probiere den Buchstaben-Generator oder den Zufallszahlen-Generator.

Farbgenerator