Farbcode Generator & Picker

Finde die perfekte Farbe und alle passenden Kombinationen dazu.

Farbkonvertierung

HEX

#797979

Boulder

HEX
#797979
HSL
0, 0, 47
RGB
121, 121, 121
XYZ
18, 19, 21
CMYK
0, 0, 0, 53
LUV
51,8,4,
LAB
51, 0, 0
HWB
0, 47, 53

Variationen

Hier siehst du deine Farbe in verschiedenen Helligkeitsstufen – perfekt abgestimmt in 10%-Schritten.

Profi-Tipp: Dunklere Töne eignen sich super für Hover-Effekte und Schatten, hellere für Hintergründe und Akzente.

Schattierungen

Deine Farbe wird schrittweise dunkler – ideal für Tiefe und Kontraste.

Aufhellungen

Deine Farbe wird schrittweise heller – perfekt für sanfte Übergänge.

Praktische Einsatzmöglichkeiten

  • Buttons und Links in verschiedenen Zuständen
  • Schatten und Lichter für mehr Tiefe
  • Ein durchgängiges Farbkonzept entwickeln

Design-System Tipp

Mit diesen Abstufungen baust du dir eine professionelle Farbpalette auf. Speicher sie dir für dein ganzes Projekt!

Farbkombinationen

Jede Kombination erzeugt eine andere Stimmung. Finde heraus, welche Farben perfekt zu deiner passen.

Anwendung

Einfach auf eine Farbe klicken und der Code wird kopiert. Diese Kombinationen passen garantiert zusammen.

Warum es wichtig ist

Die richtigen Farbkombinationen sorgen für Harmonie und wecken genau die Emotionen, die du brauchst.

Komplement

Gegensätzliche Farben auf dem Farbkreis – maximal kontrastreich und auffällig.

#797979
Am besten für: Wirkungsvolle Designs, CTAs, Logos

Split-komplementär

Deine Farbe plus zwei Nachbarfarben der Gegenfarbe – kräftig aber nicht so hart im Kontrast.

Am besten für: Lebendige, aber ausgewogene Layouts

Triadisch

Drei gleichmäßig verteilte Farben im Farbkreis – lass eine dominieren, die anderen als Akzente nutzen.

Am besten für: Verspielte, energetische Designs

Analog

Benachbarte Farben im Farbkreis – harmonisch und mit sanften Übergängen.

Am besten für: Naturinspirierte, beruhigende Oberflächen

Monochromatisch

Verschiedene Helligkeiten derselben Farbe – dezent und elegant.

Am besten für: Minimalistische, anspruchsvolle Designs

Tetradisch

Zwei Sätze von Komplementärfarben, getrennt durch 60 Grad Farbton.

Am besten für: Reiche, vielfältige Farbschemata

Farbtheorie-Prinzipien

Balance

Eine Hauptfarbe dominiert, eine zweite unterstützt, Akzente nur sparsam einsetzen.

Kontrast

Genug Kontrast macht Texte lesbar und dein Design barrierefrei.

Harmonie

Alle Farben sollten gut zusammenspielen und ein stimmiges Gesamtbild ergeben.

Farbkontrast-Prüfer

Stelle sicher, dass deine Texte für alle gut lesbar sind – gemäß WCAG-Standards.

Textfarbe
Hintergrundfarbe
Kontrast
Fail
Kleiner Text
✖︎
Großer Text
✖︎
WCAG-Standards
AA:Standard-Level: 4,5:1 für normalen Text, 3:1 für großen Text. Das sollte dein Minimum sein.
AAA:Gold-Standard: 7:1 für normalen Text, 4,5:1 für großen Text. Optimal für beste Lesbarkeit.

Jeder Mensch ist ein Genie. Aber wenn man einen Fisch nach seiner Fähigkeit beurteilt, auf einen Baum zu klettern, wird er sein ganzes Leben lang glauben, dass er dumm ist.

- Albert Einstein

Technische Formate

Praktische Formate

Farbanalyse

Farbsehschwäche-Simulator

Kreative Aspekte