Farbkonverter & Generator
Farben zwischen HEX, RGB, HSL und CMYK sofort konvertieren. Kostenloser Online-Farbwähler mit WCAG-Kontrastprüfer und Palettengenerator.
Aktualisiert April 2026
Geprüft von Rafael Duarte
Active Preview
#197FE6
Complementary Colors
Format Conversions
Tip: Click a complementary color swatch to use it. Press Shift+Enter to copy the HEX value.
Farben online umrechnen
Ein Wert, vier Formate gleichzeitig — plus Kontrastprüfung nach WCAG
1. Farbe wählen oder eingeben
Nutze den nativen Farbwähler oder tippe einen sechsstelligen Hex-Code wie `#3A86FF` direkt in das Feld ein.
2. Gewünschtes Format kopieren
HEX, RGB, HSL und CMYK werden sofort aktualisiert — ein Klick auf das Kopier-Symbol neben dem jeweiligen Wert genügt.
3. Palette speichern und exportieren
"Save to Palette" sammelt jede hinzugefügte Farbe; "Export Palette" lädt eine fertige CSS-Datei mit allen Custom Properties herunter.
Was dieser Farbkonverter kann
Exakte Umrechnung zwischen HEX, RGB, HSL und CMYK
Integrierte WCAG-Kontrastprüfung
Vergleicht die gewählte Farbe automatisch mit Weiß und zeigt, ob sie die Stufe AA (4,5:1) oder AAA (7:1) erreicht — relevant für BITV- und BFSG-konforme Webseiten.
Komplementärfarben per Klick
Vier Farbmuster werden automatisch bei +90°, +150°, +180° und +270° zum Ausgangs-Farbton berechnet, um passende Harmonien zu entdecken.
Export als CSS-Variablen
Mehrere Farben lassen sich in einer Palette sammeln und als fertige CSS-Datei mit Custom Properties herunterladen.
Mathematisch präzise, ohne manuelles Runden
Die Umrechnung verwendet dieselben Formeln wie moderne Browser intern — typische Rundungsfehler von Hand entfallen komplett.
Tastenkürzel zum Kopieren
Shift+Enter kopiert den aktuellen Hex-Wert von jeder Stelle der Seite aus, ganz ohne Klick auf eine Schaltfläche.
Farbformate im Überblick
Was jede Notation bedeutet und wo sie zum Einsatz kommt
Wann sich das Tool lohnt
Die häufigsten Anwendungsfälle in der Praxis
Übergabe von Design an Entwicklung
Designer:innen legen Farben meist als HEX fest; Entwickler:innen brauchen oft RGB für color()-Funktionen oder HSL für dynamische Themes und Hover-Zustände.
Prüfung auf Barrierefreiheit
Seit dem Barrierefreiheitsstärkungsgesetz (BFSG) müssen viele digitale Angebote in Deutschland WCAG-Kontrastwerte einhalten — hier lässt sich das in Sekunden vor dem Go-live prüfen.
Vorbereitung für den Druck
Bildschirmfarben vor dem Versand an eine Druckerei in CMYK umrechnen, um böse Überraschungen bei Logos oder Flyern zu vermeiden.
Aufbau eines Design-Systems
Jede Markenfarbe in einer Palette sammeln und in einem einzigen Export als CSS-Variablen bereitstellen.
Häufige Fehler
Annehmen, Bildschirm-RGB entspreche exakt dem gedruckten CMYK
Manche sehr kräftigen Blau- und Grüntöne am Monitor liegen außerhalb des druckbaren Farbraums — vor der finalen Freigabe unbedingt einen Andruck oder ein Farbmuster prüfen.
50% Helligkeit in HSL falsch interpretieren
50% Lightness ist die reine, gesättigte Farbe; darüber wird sie heller Richtung Weiß, darunter dunkler Richtung Schwarz — das ist eine andere Achse als die Helligkeit (Value) in HSV.
Die Raute `#` beim Einfügen vergessen
Das Eingabefeld akzeptiert Werte mit und ohne Präfix, aber der Griff zum # sollte trotzdem zur Gewohnheit werden — viele andere Tools und CSS selbst verlangen es zwingend.
Dreistelligen Kurz-Hex-Code einfügen
Codes wie #FFF werden vom Feld nicht erkannt, da die vollen 6 Stellen erwartet werden. Jedes Zeichenpaar vor dem Einfügen verdoppeln: aus #FFF wird #FFFFFF.
Eine Farbe nur nach Augenschein freigeben
Eine Farbe kann optisch dunkel genug wirken und trotzdem die Mindest-Kontrastanforderung AA nicht bestehen. Vor der Freigabe für Produktion auf die berechneten WCAG-Werte verlassen, nicht auf den subjektiven Eindruck.
Warum dieser Farbkonverter
HEX, RGB, HSL und CMYK werden gleichzeitig angezeigt — ein Wechsel zwischen vier verschiedenen Einzeltools für jedes Format entfällt komplett.
Die eingebaute WCAG-Kontrastprüfung spart einen zusätzlichen Schritt: Noch auf der Umrechnungsseite ist klar, ob eine Farbe für Text geeignet ist — gerade mit Blick auf BFSG und BITV 2.0 ein echter Zeitgewinn.
Alles läuft direkt im Browser — ohne Registrierung, ohne Installation und ohne dass die Farbe an einen externen Server gesendet wird. Der schnellste Weg, eine Markenfarbe zu prüfen, ohne einen schwergewichtigen Bildeditor zu öffnen. Andere deutschsprachige Farbkonverter bieten meist nur die reine Formatumrechnung an — Kontrastprüfung, Komplementärfarben und CSS-Export in einem einzigen Durchlauf sind dort selten kombiniert.
Häufig gestellte Fragen
Einen sechsstelligen Hex-Code eingeben oder einfügen — das Tool zeigt sofort den passenden RGB-Wert, ganz ohne manuelle Berechnung. #FF8000 wird zum Beispiel zu rgb(255, 128, 0) — jedes Ziffernpaar entspricht dem Rot-, Grün- und Blau-Kanal.
Weiterführende Links
Vollständige Referenz aller in CSS verfügbaren Farbformate.
Offizielle W3C-Erläuterung zu den geforderten Mindest-Kontrastverhältnissen.
Verordnung zur barrierefreien Informationstechnik, die WCAG-Anforderungen für deutsche Behörden und viele digitale Angebote verbindlich macht.
Verwandte Tools
- Farbkontrast-Prüfer Design Kostenloser Farbkontrast-Prüfer — WCAG 2.2 AA- und AAA-Konformität sofort prüfen. Live-Textvorschau, Farbenblindheit-Simulation und barrierefreie...
- Farbpaletten-Generator Design Harmonische Farbpaletten aus jeder Basisfarbe generieren. Analogie, Komplementär, Triadisch oder Tetriadisch — als CSS-Variablen oder JSON exportieren.
- Farbpalette aus Bild Design Extrahiere Farbpaletten aus jedem Bild — erhalte HEX-, RGB-, HSL-Codes und exportiere als CSS-Variablen, Tailwind, JSON oder PNG. 100% clientseitig, kein...
- CSS Box Shadow Generator — Neumorphismus, Glasmorphismus & Tailwind Design Kostenloser CSS Box Shadow Generator mit Live-Vorschau. Erstelle Schatten, Neumorphismus- und Glasmorphismus-Effekte. Exportiere zu CSS, Tailwind oder CSS-Variablen.
- CSS Flexbox Generator Design Kostenloser CSS Flexbox Generator: Live-Vorschau, Tailwind & CSS gleichzeitig, 10 Layout-Vorlagen, kontextuelle Warnungen und React/JSX-Export. Keine Anmeldung.
