Farbcode-Konverter
Wählen Sie eine beliebige Farbe oder geben Sie einen Wert in HEX, RGB, HSL oder HSB ein — alle Formate aktualisieren sich sofort. Erhalten Sie die Komplementärfarbe und einen einfügefertigen CSS-Snippet. Läuft vollständig in Ihrem Browser, nichts wird an einen Server gesendet.
widget.pickAColor
widget.orEditAnyField
widget.complementaryColor
#F6AF3C
widget.complementaryDesc
widget.cssSnippet
color: #3B82F6;
background-color: #3B82F6;So verwenden Sie den Farbcode-Konverter
Es gibt drei Möglichkeiten, die aktive Farbe festzulegen. Verwenden Sie, was am besten zu Ihrem Arbeitsablauf passt — der Rest des Tools aktualisiert sich automatisch.
Drei Möglichkeiten zur Farb-Eingabe
Klicken Sie auf das farbige Quadrat, um den nativen Farbwähler Ihres Browsers zu öffnen, tippen Sie direkt in eines der vier Formatfelder (HEX, RGB, HSL oder HSB), oder fügen Sie eine aus Figma, Photoshop oder Ihren Browser-DevTools kopierte Farbe ein. Alle Formate werden sofort synchronisiert, sobald sich ein Feld ändert.
Die Komplementärfarbe verwenden
Die Komplementärfarbe wird berechnet, indem der Farbton auf dem HSL-Farbrad um 180° gedreht wird, während Sättigung und Helligkeit beibehalten werden. Verwenden Sie sie, um kontrastreiche Button- und Link-Farben zu erstellen, die vor Ihrer Markenfarbe hervorstechen, geteilte Komplementär- oder triadische Paletten aufzubauen oder die Akzentfarbe zu identifizieren, die den stärksten visuellen Kontrast für CTAs erzeugt.
Barrierefreiheits-Tipp: Farbkontrast
WCAG 2.1 AA erfordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text gegenüber seinem Hintergrund. Wenn Sie den Helligkeitswert aus HSL verwenden, wählen Sie Text mit L ≤ 40% auf hellen Hintergründen und L ≥ 60% auf dunklen Hintergründen. Verifizieren Sie immer mit einem dedizierten Kontrast-Checker für präzise WCAG-Konformität.
Häufig gestellte Fragen
Was ist der Unterschied zwischen HEX-, RGB-, HSL- und HSB-Farbformaten?
HEX (#RRGGBB) ist eine sechsstellige hexadezimale Darstellung der Rot-, Grün- und Blaukanäle einer Farbe, die im Web-CSS weit verbreitet ist. RGB (Rot, Grün, Blau) drückt dieselben drei Kanäle als ganze Zahlen von 0–255 aus. HSL (Farbton, Sättigung, Helligkeit) beschreibt eine Farbe durch ihre Position auf dem Farbkreis (Farbton, 0–360°), Intensität (Sättigung, 0–100%) und Helligkeit von Schwarz bis Weiß (Helligkeit, 0–100%). HSB/HSV (Farbton, Sättigung, Helligkeit/Wert) ist ähnlich, verwendet aber Helligkeit statt Helligkeit — eine vollständig gesättigte HSB-Farbe bei B=100% ist lebhaft, während das Äquivalent in HSL L=50% ist.
Welches Farbformat sollte ich in CSS verwenden?
Alle vier Formate sind in modernem CSS gültig. HEX ist am häufigsten für statische Werte, weil es kompakt ist. RGB und HSL werden bevorzugt, wenn Sie Werte programmatisch manipulieren müssen — z.B. mit CSS-Variablen, um hellere oder dunklere Farbtöne abzuleiten. HSL ist besonders designerfreundlich, weil die Anpassung des L-Werts (Helligkeit) intuitive Ergebnisse liefert. HSB wird in CSS nicht nativ unterstützt, wird aber in Design-Tools wie Figma und Adobe Photoshop verwendet.
Was ist eine Komplementärfarbe?
Eine Komplementärfarbe ist die Farbe, die auf dem 12-stufigen oder 360°-Farbkreis direkt gegenüberliegt, d.h. 180° Farbtonabstand. Komplementärpaare erzeugen maximalen Kontrast und visuelle Lebhaftigkeit, wenn sie nebeneinander platziert werden — zum Beispiel Blau und Orange oder Rot und Grün. Designer verwenden Komplementärfarben für Call-to-Action-Buttons, Hervorhebungen oder überall dort, wo Kontrast benötigt wird.
Sendet dieses Tool meine Farbdaten an einen Server?
Nein. Alle Farbkonvertierungsberechnungen finden vollständig in Ihrem Browser in JavaScript statt. Keine Farbwerte, Picker-Auswahlen oder andere Daten werden an einen Server übertragen. Das Tool funktioniert offline, sobald die Seite geladen ist.
Wie konvertiere ich eine Farbe, die ich auf einer Website sehe, in HEX oder RGB?
Öffnen Sie die Browser-DevTools (F12 oder Rechtsklick → Untersuchen), wählen Sie das Element mit der gewünschten Farbe und schauen Sie sich dessen CSS im Styles-Panel an. Klicken Sie auf das farbige Muster neben einem Farbwert, um den integrierten Picker zu öffnen, der HEX- und RGB-Werte anzeigt. Alternativ können Sie eine Browser-Erweiterung wie ColorZilla verwenden, um jeden Pixel auf dem Bildschirm einzuschließen und sofort seinen HEX/RGB-Code zu erhalten.
Ähnliche Tools
Vollständiges technisches SEO-Audit benötigt?
Unsere SEO-Experten können die technische Gesundheit Ihrer Website prüfen — Crawlbarkeit, Core Web Vitals, strukturierte Daten und mehr — und einen maßgeschneiderten Aktionsplan für nachhaltiges organisches Wachstum liefern.
Get a Free SEO Audit