Zufallsgenerator für Farben

Offenlegung: Ich erhalte Provisionen für Einkäufe, die über Links auf dieser Seite getätigt werden. Dies hilft, diese Seite am Laufen zu halten.

Hier ist ein hilfreicher Zufallsfarbgenerator. Er erzeugt und zeigt Farben zusammen mit Hex-Codes zur Verwendung in jeder Grafiksoftware an. Der CSS-Code wird ebenfalls angezeigt, damit Sie diese Farben in einer Website verwenden können.

Von jeder Farbe gibt es zwei Versionen, eine mit weißem Text und eine mit schwarzem Text.

vengefully #EC9C6D


.color-vengefully, .color-hover-vengefully:hover {color:#FFF!important; background-color:#EC9C6D!important}

vengefully #EC9C6D


.color-vengefully, .color-hover-vengefully:hover {color:#000!important; background-color:#EC9C6D!important}

dreamily #31D793


.color-dreamily, .color-hover-dreamily:hover {color:#FFF!important; background-color:#31D793!important}

dreamily #31D793


.color-dreamily, .color-hover-dreamily:hover {color:#000!important; background-color:#31D793!important}

exactly #A7DA72


.color-exactly, .color-hover-exactly:hover {color:#FFF!important; background-color:#A7DA72!important}

exactly #A7DA72


.color-exactly, .color-hover-exactly:hover {color:#000!important; background-color:#A7DA72!important}

mostly #15B63F


.color-mostly, .color-hover-mostly:hover {color:#FFF!important; background-color:#15B63F!important}

mostly #15B63F


.color-mostly, .color-hover-mostly:hover {color:#000!important; background-color:#15B63F!important}


 

Denken Sie an eine Reise? Entscheiden Sie sich für eine weltweite Hotelmarke, die ausgezeichnete Standards zu einem niedrigen Preis bietet. Wir empfehlen Holiday Inn Express. Werfen Sie hier einen Blick auf die Zimmerpreise!


 

Zufällige Farben für jeden Zweck

Egal, ob Sie nach Inspiration für eine Grafik suchen, die Sie entwerfen, oder ob Sie eine Website erstellen, unser Zufallsfarbgenerator ist eine gute Wahl. Für jede generierte Farbe werden Hexadezimalcodes angegeben.

Wir zeigen auch, wie diese Farben mit weißem und mit schwarzem Text aussehen würden, damit Sie eine Vorstellung davon bekommen, wie Sie sie verwenden möchten.

Wenn Ihnen eine der generierten Farben nicht gefällt, klicken Sie einfach auf "Neu generieren". Seien Sie jedoch gewarnt - Sie können die alten Farben nicht wiederherstellen. Wenn Ihnen also etwas gefällt, kopieren und speichern Sie die Hex-Codes, bevor Sie die Schaltfläche drücken.

Hier ist für jeden etwas dabei. Mit einer fast unendlichen Anzahl von Farben, die generiert werden können, haben Sie viele Optionen zur Auswahl.

Wie wir die Farben generieren

Diese Farben sind so zufällig wie möglich. Sie werden generiert, indem wir eine zufällige Farbe aus allen möglichen Hex-Buchstaben an jeder der 6 verschiedenen Positionen des Hex-Codes auswählen.

Namen der Farben

Die hier gezeigten Farbnamen sind nur vorläufige Namen, die wir als Platzhalter verwenden. Wenn Sie diese Farben verwenden müssen, sollten Sie sie der Einfachheit halber in die von Ihnen gewünschten Namen umbenennen. Wir wollten sichergehen, dass die von uns vergebenen Namen nicht mit anderen bestehenden Farbnamen kollidieren, die Sie möglicherweise in Ihrem Projekt verwenden (z. B. hellgrün).

Die von uns vergebenen Farbnamen können für andere Farben, die mit "Neu generieren" erzeugt werden, wiederverwendet werden, gehen Sie also nicht davon aus, dass unsere Namen nur für eine bestimmte Farbe gelten. Es ist sogar theoretisch möglich, aber unwahrscheinlich, dass zwei verschiedene Farben auf ein und derselben Seite denselben Namen haben.

Für Web-Designer

CSS

Wenn Sie diese Farben für das Web verwenden möchten, müssen Sie den CSS-Code für diese Farbe (in den Farbkästchen angezeigt) kopieren und in Ihr bestehendes Stylesheet einfügen. Vergessen Sie nicht, sich zu entscheiden, ob Sie die Version mit schwarzem oder mit weißem Text verwenden möchten, da der CSS-Code unterschiedlich ist. Wie bereits erwähnt, müssen Sie den Farbnamen in Ihrer CSS-Datei in einen Namen ändern, der für Sie farblich sinnvoll ist und nicht bereits unter demselben Namen in Ihrem Stylesheet verwendet wird.

Alle unsere Platzhalternamen enden auf die Buchstaben "ly", um es Ihnen etwas leichter zu machen, wenn Sie Ihr Stylesheet nach solchen Namen durchsuchen müssen, die Sie vielleicht vergessen haben zu ändern.

HTML

Nachdem Sie den CSS-Code in Ihr Stylesheet kopiert haben, können Sie jede dieser Farben wie folgt in Ihrem HTML-Code verwenden:

<div class="angrily">
<h3>Heading</h3>
<p>Paragraph content</p>
</div>

Im obigen Beispiel können Sie sehen, dass es besser wäre, den Namen in eine aussagekräftige Farbe zu ändern.

Dunkle Hintergründe werden automatisch mit weißem Text versehen, so dass Sie Hintergrundfarbe und Textfarbe nicht separat angeben müssen.

Diese Seite wurde zuletzt am aktualisiert 19. Oktober 2022