MyDevTools
DE

Farbkonverter

Farben zwischen HEX, RGB, HSL und CMYK umrechnen, eine Palette mit 9 Abstufungen erzeugen und den WCAG-Kontrast zweier Farben im Browser prüfen.

Eingaben und Dateien bleiben im Browser

Farbe

Beispiele: #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%), cmyk(76%, 47%, 0%, 4%)

Konvertierte Formate

Kontrastprüfer

Beispieltext16 px

Beispieltext24 px

Großer Text bedeutet mindestens 24 px in normaler Stärke oder etwa 18,67 px fett.

Kontrastverhältnis—

    Aufhellungen und Abdunklungen

    Mit Schwarz (Abdunklung) und Weiß (Aufhellung) in linearem sRGB gemischt. Klicken Sie auf ein Farbfeld, um seinen HEX-Wert zu kopieren.

    Auf dieser Seite

    Fügen Sie eine CSS-Farbe in einer gängigen Schreibweise ein und erhalten Sie dieselbe Farbe als HEX, RGB, HSL und CMYK zum Kopieren. Zusätzlich entsteht eine Palette hellerer und dunklerer Abstufungen, und der WCAG-Kontrast zwischen Text- und Hintergrundfarbe wird geprüft.

    Detaillierte Funktionalität

    Das Format wird automatisch erkannt: #3b82f6, die Kurzform #38f (Raute optional), rgb(59, 130, 246) bzw. rgba(…) mit Kanälen von 0–255 oder in Prozent, hsl(217, 91%, 60%) mit optionalem deg sowie cmyk(76%, 47%, 0%, 4%). Auch die leerzeichengetrennte CSS-Syntax wie rgb(59 130 246 / 50%) funktioniert; der Alphawert wird akzeptiert, aber ignoriert, weil die Ausgaben keine Transparenz haben. Ungültige Werte oder Werte außerhalb des Bereichs werden als Fehler gemeldet statt geraten. Alternativ wählen Sie die Farbe mit der nativen Farbauswahl.

    Die Palette mischt die aktuelle Farbe zu 20, 40, 60 und 80 % mit Schwarz (Abdunklungen) und Weiß (Aufhellungen) in linearem sRGB – neun Farbfelder mit dem Original in der Mitte; ein Klick auf ein Farbfeld kopiert seinen HEX-Code. Der Kontrastprüfer nimmt eine Vorder- und eine Hintergrundfarbe und zeigt das Verhältnis mit den vier WCAG-2.x-Schwellen: AA 4.5:1 und AAA 7:1 für normalen Text, AA 3:1 und AAA 4.5:1 für großen Text.

    Alle Umrechnungen sind einfache JavaScript-Formeln direkt auf der Seite — es wird nichts hochgeladen. CMYK nutzt die einfache Formel ohne ICC-Profil und taugt als Orientierung, nicht für die Druckvorstufe. HSL- und CMYK-Werte werden auf ganze Zahlen gerundet; eine Rückumrechnung kann daher um eine Einheit abweichen.

    Praktische Beispiele

    HEX in alle Formate: #3b82f6 ergibt rgb(59, 130, 246), hsl(217, 91%, 60%) und cmyk(76%, 47%, 0%, 4%).

    HSL nach HEX: hsl(0, 100%, 50%) wird zu #FF0000, ebenso cmyk(0%, 100%, 100%, 0%).

    Kontrastprüfung: grauer Text #777777 auf weißem Hintergrund #ffffff hat ein Verhältnis von 4.48:1 — AA für großen Text (3:1) bestanden, AA für normalen Text (4.5:1) nicht.

    Standardpaar: das voreingestellte #1e3a8a auf #ffffff erreicht 10.36:1 und besteht alle vier WCAG-Stufen.

    So verwenden Sie dieses Tool

    1. Farbe eingeben

      Tippen oder fügen Sie einen Wert in Manuelle Eingabe ein (HEX, rgb(), hsl() oder cmyk()) und klicken Sie auf Konvertieren oder drücken Sie Enter — oder wählen Sie eine Farbe über die Farbauswahl.

    2. Gewünschtes Format kopieren

      Klicken Sie unter Konvertierte Formate auf die Kopier-Schaltfläche neben HEX, RGB, HSL oder CMYK.

    3. Aufhellung oder Abdunklung kopieren

      Klicken Sie unter Aufhellungen und Abdunklungen auf ein Farbfeld, um seinen HEX-Code zu kopieren.

    4. Kontrast prüfen

      Stellen Sie im Kontrastprüfer die Vordergrundfarbe und die Hintergrundfarbe ein und lesen Sie Verhältnis und AA/AAA-Ergebnisse ab.

    Tipps und Best Practices

    • Die # ist optional, die dreistellige Kurzform funktioniert: 38f wird als #3388FF gelesen.
    • Der Farbton darf mit oder ohne deg stehen; Sättigung und Helligkeit liegen zwischen 0 und 100.
    • Werte außerhalb des Bereichs (z. B. rgb(300, 0, 0)) werden abgelehnt, nicht stillschweigend beschnitten.
    • Für Fließtext mindestens 4.5:1 anstreben; 3:1 reicht nur für großen Text (24 px bzw. 18,66 px fett).
    • Verwenden Sie das CMYK-Ergebnis nicht für die Druckproduktion — fragen Sie die Druckerei nach Werten für ihr ICC-Profil.