Wie wandle ich eine HEX-Farbe in RGB und HSL um?

Tippen oder fügen Sie die Farbe in Farbeingabe ein, zum Beispiel #14b8a6, oder nutzen Sie die Farbauswahl. Das Tool zeigt HEX-, rgb()-, hsl()-, hsv()- und cmyk()-Werte sowie oklch(), lab() und lch(), jeweils mit einer Schaltfläche Kopieren.

Welche Farbformate kann ich eingeben?

HEX mit 3, 4, 6 oder 8 Stellen, rgb() oder rgba(), hsl() oder hsla() in Komma- oder Leerzeichen-Syntax sowie reine Zahlentripel. Wird die Eingabe nicht erkannt, zeigt das Tool einen Parse-Fehler.

Kann ich Farben mit Transparenz umwandeln?

Ja. Nutzen Sie den Regler Deckkraft oder geben Sie einen Alpha-Wert in der Eingabe an. Die Ausgaben enthalten dann den Alphakanal, etwa als 8-stelliges HEX, rgba() oder als Alpha mit Schrägstrich in der modernen Syntax.

Sind die CMYK-Werte für den Druck genau?

Nein, es ist eine übliche Näherung von sRGB zu CMYK, die unter Für den Druck angezeigt wird. Für exakte Druckfarben nutzen Sie das Farbprofil Ihres Druckers oder fordern Sie einen Proof an, da leuchtende Bildschirmfarben oft matter gedruckt werden.

Wie prüfe ich, ob meine Farbe genug Kontrast für Text hat?

Sehen Sie sich den Bereich WCAG-Kontrast an. Er zeigt das Kontrastverhältnis Ihrer Farbe auf Weiß und auf Schwarz mit der Bewertung AAA, AA, AA Large oder Fail. Die Helligkeitsskala bietet hellere oder dunklere Töne zum Ausprobieren.

Ist es wirklich kostenlos?

Ja. Jedes Tool ist kostenlos nutzbar, ohne Konto und ohne Kreditkarte. Die Verarbeitung läuft auf Ihrem Gerät statt auf unseren Servern – genau deshalb können wir den Dienst kostenlos betreiben.

Funktioniert es auf Mobilgeräten?

Ja. Es läuft in aktuellen mobilen Browsern unter iOS und Android, ohne dass etwas installiert werden muss.

🎨

Farb-Konverter – kostenlos

Konvertieren Sie Farben sofort zwischen HEX-, RGB-, HSL-, HSV- und CMYK-Formaten. Enthält eine Helligkeitsskala und vordefinierte Farbfelder.

Läuft in Ihrem BrowserKein Konto, keine Pop-upsKeine Anmeldung erforderlichFür immer kostenlos

Funktioniert nach dem Laden offline

Konvertieren Sie eine Farbe zwischen HEX, RGB, HSL, HSV und CMYK — mit Live-Vorschau und Kopieren per Fingertipp. Alles läuft in Ihrem Browser.

Farbeingabe

Unterstützte Formate: HEX (#fff oder #ffffff), RGB (255, 255, 255) oder HSL (360, 100 %, 50 %)

Deckkraft100%

Voreinstellungen:

HEX#14B8A6

rgb() · Veraltetrgb(20, 184, 166)

rgb() · Modernrgb(20 184 166)

hsl() · Veraltethsl(173, 80%, 40%)

hsl() · Modernhsl(173 80% 40%)

oklch()oklch(70.4% 0.123 182.5)

lab()lab(67.1% -42.9 -2.3)

lch()lch(67.1% 43.0 183.1)

hsv()hsv(173, 89%, 72%)

cmyk()cmyk(89%, 0%, 10%, 28%)

RGB-Werte20, 184, 166

WCAG-Kontrast

Auf weißem Hintergrund

2,49:1

Nicht bestanden

Auf schwarzem Hintergrund

8,44:1

AAA

🖨️ Für den Druck: Diese CMYK-Werte (89%, 0%, 10%, 28%) sind eine Standard-sRGB-zu-CMYK-Näherung als Referenz. Verwenden Sie für genaue Druckfarben das ICC-Profil Ihres Druckers oder einen Druckproof — Bildschirm-CMYK kann nicht jede Tinte und jedes Papier abbilden.

Helligkeitsskala

Farbfeld anklicken, um zu diesem Farbton zu wechseln

Häufige Anwendungen

Konvertieren Sie Farben für WebdesignErhalten Sie HEX-, RGB- und HSL-Werte für jede Farbe — bereit zum Einfügen in CSS oder Tailwind.
Konvertieren Sie Farben für den Druck (CMYK)Konvertieren Sie Bildschirmfarben (HEX/RGB) in CMYK-Werte zur Verwendung in Druckdesign und professionellem Druck.
Erstellen Sie Farbpaletten für DesignsystemeKonvertieren Sie Markenfarben in allen Formaten und generieren Sie konsistente Helligkeitsskalen für ein vollständiges Designsystem.
Farbkontrast für Barrierefreiheit überprüfenKonvertieren Sie Farben, um RGB-Werte zur Verwendung in Kontrastkontrolltools zu erhalten — WCAG-Konformität für barrierefreies Design.
Farben für Figma konvertierenErhalten Sie genaue HEX- und RGB-Werte zum Einfügen in Figma-Farbwähler und Design-Token-Systeme.

So funktioniert es

Die gesamte Umrechnungslogik ist selbst geschriebenes JavaScript, das vollständig in Ihrem Browser läuft – keine Bibliothek, kein Serveraufruf. Das Tool parst Ihre Eingabe, leitet sie durch eine Kette reiner Mathematikfunktionen und erzeugt gleichzeitig elf Ausgabeformate, darunter die modernen CSS-Color-4-Farbräume oklch() und lab().

1
Flexibles Eingabe-Parsing
Ein eigener Parser akzeptiert Hex (3, 4, 6 oder 8 Stellen), rgb()/rgba(), hsl()/hsla() in der alten Komma- wie der modernen Leerzeichensyntax sowie reine Zahlentripel. Alphawerte als Dezimalzahlen oder Prozent werden vor jeder Umrechnung auf den Bereich 0–1 normalisiert.
2
RGB als Umrechnungszentrale
Jedes akzeptierte Format wird zunächst in ein kanonisches RGB-Tripel aufgelöst. Von dieser einen Darstellung aus verzweigt das Tool: HSL und HSV nutzen die Standardformeln mit Min/Max/Chroma; CMYK wird über den Schwarzkanal abgeleitet; und vor den Berechnungen in wahrnehmungsbasierten Farbräumen wird die sRGB-Linearisierung (die stückweise Gammakurve nach IEC 61966-2-1) angewendet.
3
Wahrnehmungsbasierte Farbräume von Grund auf berechnet
oklch() wird mit den 3×3-Referenzmatrizen von Björn Ottosson (LMS-Kubikwurzelraum) berechnet. lab() und lch() nutzen die chromatische Bradford-Adaption, um vom Weißpunkt D65 nach D50 umzurechnen, so wie CSS Color 4 lab() definiert. Das sind dieselben Formeln wie in Browser-Rendering-Engines – hier ohne jede externe Abhängigkeit umgesetzt.
4
WCAG-Kontrast und Helligkeitsskala
Die relative Leuchtdichte wird nach der WCAG-2.1-Formel berechnet (linearisierte R, G, B gewichtet mit 0,2126/0,7152/0,0722), und das Kontrastverhältnis gegen Weiß und Schwarz wird als AA-groß, AA, AAA oder Nicht bestanden eingestuft. Ein neunstufiger Helligkeitsstreifen entsteht durch Schritte im HSL-Helligkeitskanal von 10 % bis 90 %; per Klick auf ein Farbfeld wird dieser Farbton umgerechnet.

Farb-Konverter – kostenlos

Häufige Anwendungen

So funktioniert es

Ähnliche Tools

Farbwähler & Palettenersteller

Zufällige Farben generieren

Farbpaletten-Generator

Häufige Fragen