Farbcode-Umrechner
Rechne Farbcodes zwischen HEX, RGB, HSL, HSV, OKLCH und CMYK um und prüfe das Kontrastverhältnis (WCAG) zwischen Text und Hintergrund.
1. Farbe eingeben
Füge einen Farbcode ein oder klicke auf das Quadrat links, um eine Farbe auszuwählen.
z. B. #FF6B35, rgb(255, 107, 53), hsl(16, 100%, 60%), C0 M58 Y79 K0, tomato
2. Umrechnungsergebnis
Mit den Schaltflächen rechts kopierst du jeden Wert so, dass du ihn direkt ins CSS einfügen kannst.
- HEX
- —
- RGB
- —
- HSL
- —
- HSV (HSB)
- —
- OKLCH
- —
- CMYK (Richtwert)
- —
- CSS-Farbname
- —
3. Kontrast prüfen
Prüfe nach WCAG (den Richtlinien für barrierefreie Webinhalte), ob eine Kombination aus Text- und Hintergrundfarbe gut lesbar ist.
Eingegebene Farbe verwenden als
Gib oben eine Farbe ein, dann erscheint hier eine Vorschau.
Kontrastverhältnis
—
- Normaler Text AAmindestens 4.5 : 1—
- Normaler Text AAAmindestens 7 : 1—
- Großer Text AAmindestens 3 : 1—
- Großer Text AAAmindestens 4.5 : 1—
Großer Text ist Text ab 18 pt (24 px) oder fett ab 14 pt (etwa 18,7 px).
Die Umrechnung läuft auf deinem Gerät – die eingegebenen Farben werden nirgendwohin gesendet.
CMYK ist ein Richtwert, berechnet ohne Druckfarbprofil (ICC-Profil). Prüfe die Werte vor der Druckdatenübergabe in deinem Grafikprogramm.
Hilfreich? Wir freuen uns, wenn du es teilst
Funktioniert etwas nicht, oder hast du eine Idee zur Verbesserung?
So funktioniert’s
1. Farbcode eingeben
Gib im Feld „Farbcode“ den Code der Farbe ein, die du umrechnen willst (z. B. #FF6B35). Unten unter „Umrechnungsergebnis“ erscheinen sofort RGB, HSL, HSV, OKLCH und CMYK sowie der CSS-Farbname.
Gib links im Feld „Farbcode“ den Code der Farbe ein, die du umrechnen willst (z. B. #FF6B35). Rechts unter „Umrechnungsergebnis“ erscheinen sofort RGB, HSL, HSV, OKLCH und CMYK sowie der CSS-Farbname.
2. Farbe auswählen
Tippe auf das Farbquadrat links neben dem Feld „Farbcode“. Die Farbauswahl öffnet sich; der Code der gewählten Farbe wird ins Feld übernommen und das Ergebnis aktualisiert.
Klicke auf das Farbquadrat links neben dem Feld „Farbcode“. Die Farbauswahl öffnet sich; der Code der gewählten Farbe wird ins Feld übernommen und das Ergebnis aktualisiert.
3. Ergebnisse kopieren
Tippe unter „Umrechnungsergebnis“ auf die Schaltfläche rechts neben „RGB“, um den Wert im Format rgb(…) zu kopieren. Mit „Alle Ergebnisse kopieren“ darunter kopierst du alle Formate, eins pro Zeile.
Klicke unter „Umrechnungsergebnis“ auf die Schaltfläche rechts neben „RGB“, um den Wert im Format rgb(…) zu kopieren. Mit „Alle Ergebnisse kopieren“ darunter kopierst du alle Formate, eins pro Zeile.
4. Kontrast prüfen
Tippe weiter unten unter „Kontrast prüfen“ rechts neben „Hintergrundfarbe“ auf „Schwarz“. Du siehst eine Textvorschau auf schwarzem Hintergrund, das Kontrastverhältnis und ob normaler und großer Text die Stufen AA und AAA erreichen.
Klicke weiter unten unter „Kontrast prüfen“ rechts neben „Hintergrundfarbe“ auf „Schwarz“. Du siehst eine Textvorschau auf schwarzem Hintergrund, das Kontrastverhältnis und ob normaler und großer Text die Stufen AA und AAA erreichen.
Praktisch für
Farben aus dem Design ins CSS übernehmen
Füge einen HEX-Wert aus deinem Designprogramm ein und erhalte sofort rgb(), hsl() und das neue oklch().
Web- und App-Entwickler
Prüfen, ob Text gut lesbar ist
Gib Text- und Hintergrundfarbe ein und sieh das Kontrastverhältnis und ob die WCAG-Stufen AA und AAA erreicht werden.
Designer, die auf Barrierefreiheit achten
Bildschirmfarben grob in CMYK umrechnen
Für Flyer oder Visitenkarten bekommst du eine Vorstellung davon, wie eine Webfarbe in CMYK aussieht.
Alle, die Drucksachen erstellen
Markenfarben in allen Formaten sammeln
Mit „Alle Ergebnisse kopieren“ kopierst du alle Formate von HEX bis CMYK auf einmal – für Präsentationen oder Styleguides.
Marketing- und Markenverantwortliche
Gut zu wissen
- CMYK ist ein Richtwert. Genaue Werte für das Farbprofil der Druckerei (ICC-Profil) prüfst du am besten in deinem Grafikprogramm.
- Um Farben aus einem Bild auszulesen, nutze Farben aus einem Bild auslesen.
- Eine Umrechnung in Sonderfarben wie PANTONE oder in Munsell-Werte ist nicht möglich.
Farbcode-Formate im Vergleich
Bildschirmfarben werden über die Stärke der drei Lichtgrundfarben (Rot, Grün, Blau) beschrieben. HEX (#FF6B35) und RGB (rgb(255, 107, 53)) drücken dasselbe aus – einmal hexadezimal, einmal dezimal. HSL und HSV übersetzen das in Farbton, Sättigung und Helligkeit, damit sich Farben leichter anpassen lassen. OKLCH beschreibt die Helligkeit nah an der menschlichen Wahrnehmung. So lassen sich Farbpaletten mit gleichmäßiger Helligkeit leichter gestalten, und das Format wird zunehmend in modernem CSS eingesetzt.
CMYK steht für die Mengen der Druckfarben (Cyan, Magenta, Gelb, Schwarz). Der Bildschirm arbeitet mit Licht, der Druck mit Farbe – daher lässt sich dieselbe Farbe nie ganz exakt wiedergeben. Die CMYK-Werte dieses Tools sind Richtwerte nach einer gängigen Formel. Das Kontrastverhältnis gibt den Helligkeitsunterschied zwischen Text und Hintergrund auf einer Skala von 1 bis 21 an. Laut WCAG braucht normaler Text mindestens 4,5 (AA) bzw. 7 (AAA).
Häufige Fragen
Häufige Fragen zur Umrechnung von Farbcodes und zum Kontrastverhältnis.
Werden die eingegebenen Farben irgendwohin gesendet?
Nein. Umrechnung und Kontrastberechnung laufen ausschließlich im Browser auf deinem Gerät.
Welche Formate kann ich eingeben?
HEX wie #FF6B35 oder #F63 (auch ohne #), rgb() und rgba(), hsl() und hsla(), hsv() und hsb(), oklch(), cmyk() oder „C0 M58 Y79 K0“ sowie CSS-Farbnamen wie tomato. Reine Zahlen wie „255, 107, 53“ werden als RGB gelesen.
Lassen sich Farben mit Transparenz (Alpha) umrechnen?
Ja. Gibst du einen 8-stelligen HEX-Wert wie #FF6B3580 oder rgba(255, 107, 53, 0.5) ein, wird HEX 8-stellig ausgegeben und RGB, HSL und OKLCH mit Deckkraft. HSV und CMYK haben keine Schreibweise für Deckkraft, dort erscheint nur die Farbe.
Warum weichen die Werte nach einer Umrechnung nach HSL und zurück um 1 ab?
HSL und HSV werden – wie auf anderen Websites und in Designprogrammen – auf ganze Zahlen gerundet. Rechnet man von gerundeten Werten zurück, kann RGB um 1 bis 2 abweichen. Wenn du exakte Werte brauchst, verwende HEX oder RGB.
Kann ich die CMYK-Werte direkt für den Druck verwenden?
Nutze sie als Richtwert. Die tatsächlichen Druckfarben hängen von Papier, Farbe und dem Farbprofil der Druckerei (ICC-Profil) ab. Dieses Tool verwendet eine allgemeine Formel ohne Profil. Prüfe die Werte vor der Druckdatenübergabe in deinem Grafikprogramm oder mit der Druckerei.
Was ist OKLCH?
Ein Format, das Farben über Helligkeit (L), Buntheit (C) und Farbton (H) beschreibt – nah an der menschlichen Wahrnehmung. Bei gleichem Helligkeitswert wirken auch unterschiedliche Farbtöne etwa gleich hell. In modernen Browsern kannst du es im CSS als oklch() verwenden.
Meine OKLCH-Farbe verändert sich leicht. Warum?
Mit OKLCH lassen sich auch sehr kräftige Farben beschreiben, die ein normaler Bildschirm (sRGB) nicht darstellen kann. Solche Farben werden mit gleicher Helligkeit und gleichem Farbton so weit entsättigt, bis sie darstellbar sind. In diesem Fall erscheint ein Hinweis unter dem Eingabefeld.
Was bedeuten AA und AAA beim Kontrastverhältnis?
Das sind die Konformitätsstufen der Richtlinien für barrierefreie Webinhalte (WCAG 2). Normaler Text braucht 4,5 für AA und 7 für AAA, großer Text (ab 18 pt oder fett ab 14 pt) 3 für AA und 4,5 für AAA.
Warum wird ein Kontrastverhältnis von 4,49 nicht als 4,5 angezeigt?
Damit eine Kombination, die die Grenze knapp verfehlt, nicht als „Bestanden“ erscheint, wird nach 2 Nachkommastellen abgeschnitten und mit diesem Wert bewertet.
Ist das kostenlos?
Ja. Ohne Anmeldung und ohne Werbung.
Weitere Tools
- Steuerrechner (Netto ⇔ Brutto)
Betrag eingeben und sofort Netto, Steuer und Brutto sehen. Japans Sätze von 10 % und 8 % sind eingebaut, jeder andere Satz geht auch.
- Altersrechner
Geburtsdatum wählen und das genaue Alter, die Tage bis zum nächsten Geburtstag, die gelebten Tage und das chinesische Tierzeichen sehen – mit Alterstabelle nach Jahrgang.
- Datumsrechner (Tage addieren oder abziehen)
Sofort Datum und Wochentag sehen, X Tage oder X Arbeitstage nach oder vor einem beliebigen Datum. Wochenenden und Feiertage lassen sich auch überspringen.
- Zeitrechner (Arbeitszeit zusammenrechnen)
Berechne aus Beginn, Ende und Pause die Arbeitszeit und rechne sie zusammen. Zeiten addieren und abziehen oder in Dezimalstunden umrechnen geht auch.
- Rechnung teilen
Gesamtbetrag und Personenzahl eingeben und sofort sehen, wie viel jede Person zahlt. Mit Rundung auf bequeme Beträge, unterschiedlichen Anteilen und Ausgleich durch den Organisator.
- Unix-Zeitstempel umrechnen (Epoch ⇔ Datum)
Rechnet Unix-Zeitstempel (Epoch-Sekunden oder -Millisekunden) sofort in ein Datum in UTC oder japanischer Zeit um – und ein Datum zurück in einen Unix-Zeitstempel.