Farb-Konverter

Zwischen HEX, RGB, HSL, HSV und CMYK konvertieren. Live-Vorschau. WCAG-Kontrastprüfer für Barrierefreiheit. Nichts verlässt Ihren Browser.

So funktioniert Farb-Konverter

Color Converter übersetzt beliebige Farben zwischen HEX, RGB, HSL, HSV und CMYK sofort beim Tippen. Er führt auch eine WCAG-Kontrastprüfung zwischen zwei beliebigen Farben durch, die Sie auswählen, und zeigt das Kontrastverhältnis sowie das AA/AAA-Bestehen/Nicht-Bestehen-Ergebnis für normalen Text, großen Text und UI-Komponenten an. Alle Berechnungen finden im Browser statt, ohne dass Daten gesendet werden; nichts, was Sie eingeben, verlässt Ihr Gerät.

Zu verstehen, wie dieselbe Farbe in verschiedenen Farbmodellen aussieht, ist bei Design-Übergaben nützlich. Eine Designerin könnte eine Markenfarbe als HEX #1A4F8C angeben; eine CSS-Entwicklerin benötigt das HSL-Äquivalent für das Theming; ein Druckteam braucht die CMYK-Aufschlüsselung. Dieses Tool führt die Konvertierung in alle Richtungen gleichzeitig durch, sodass Sie nie mehrere separate Konverter ausführen müssen.

Verfasst von Bastien Sulyan

So wird Farb-Konverter verwendet, Schritt für Schritt

Tippen Sie einen HEX-Wert ein, klicken Sie auf ein Farbfeld oder geben Sie RGB-, HSL-, HSV- oder CMYK-Werte in die jeweiligen Felder ein.
Alle anderen Formatdarstellungen aktualisieren sich sofort und zeigen die entsprechende Farbe.
Für eine Kontrastprüfung wähle eine Vordergrundfarbe und eine Hintergrundfarbe mit den beiden Farbwählern aus.
Lesen Sie das WCAG-Kontrastverhältnis und die Bestehen/Nicht-Bestehen-Badges für AA- und AAA-Konformitätsstufen.
Kopieren Sie jeden Farbwert mit dem Kopiersymbol neben jedem Feld.

Häufige Anwendungsfälle

Eine UI-Designerin konvertiert einen Marken-HEX-Code in HSL, um eine CSS-Custom-Property für ein Theming-System zu schreiben.
Ein Webentwickler überprüft das Kontrastverhältnis zwischen Textfarbe und Hintergrund, bevor er eine Komponente ausliefert, um WCAG-AA-Konformität zu bestätigen.
Eine Print-Designerin erhält eine Web-HEX-Farbe und benötigt das CMYK-Äquivalent, um sie in einer gedruckten Broschüre anzupassen.
Ein Entwickler benötigt die RGB-Aufschlüsselung eines Design-Tokens, um einzelne Kanalwerte an eine Canvas-Zeichenfunktion zu übergeben.

Häufig gestellte Fragen

Unterstützt das Tool Alpha-Werte (Transparenz)?

Der aktuelle Konverter arbeitet mit vollständig opaken Farben (Alpha = 1). HEXA (8-stelliges Hex) und RGBA sind noch nicht im Umfang enthalten. Für Deckkraft setzen Sie den Alpha-Kanal in Ihrem CSS separat mit der rgba()- oder oklch()-Notation.

Werden die eingegebenen Farben gespeichert oder gesendet?

Nein. Farbkonvertierung ist reine Arithmetik (Kanal-Remapping und Bereichsskalierung), die vollständig in der JavaScript-Engine des Browsers läuft. Nichts, was Sie hier tippen, erreicht einen Server oder externen Dienst.

Welche WCAG-Kontraststufen unterstützt der Prüfer?

Das Tool berichtet gegen WCAG-2.1-Erfolgskriterien: AA erfordert ein Mindestkontrastverhältnis von 4,5:1 für normalen Text (unter 18pt oder 14pt Fett) und 3:1 für großen Text und UI-Komponenten. AAA erfordert 7:1 für normalen Text und 4,5:1 für großen Text.

Warum unterscheiden sich CMYK-Werte zwischen diesem Tool und professioneller Design-Software?

Die RGB-zu-CMYK-Konvertierung, die dieses Tool durchführt, ist eine mathematische Formel ohne Farbprofil. Professionelle Design-Anwendungen wenden ICC-Farbprofile an, die Druckpunktgewinn und Substrateigenschaften berücksichtigen. Die CMYK-Werte hier sind für Näherungen nützlich; für den Produktionsdruck wenden Sie immer Ihr Druckprofil in dedizierter Software an.

Kann ich hier einen CSS-Farbnamen wie 'cornflowerblue' konvertieren?

CSS-Farbnamen können nicht direkt in die Konverterfelder eingegeben werden. Um eine benannte Farbe zu konvertieren, suche zuerst ihren HEX-Wert in einer CSS-Referenz (cornflowerblue ist #6495ED) und füge dann diesen HEX in das HEX-Feld ein, um alle anderen Formate zu sehen.

Funktioniert das Tool nach dem Laden der Seite offline?

Ja. Farbkonvertierung ist Arithmetik ohne externe Abhängigkeit. Sobald die Seite in Ihrem Browser-Cache ist, können Sie sie ohne Netzwerkverbindung öffnen, und alle Konvertierungen funktionieren normal.