Entwickler-Tools · 16 Tools

Farbcode-Konverter

Geben Sie eine Farbe in HEX, RGB, HSL, HWB oder OKLCH ein oder wählen Sie eine aus, um sie in allen anderen Formaten zu erhalten. Die Kontrastprüfung zeigt, ob Text darauf die WCAG-Stufen erfüllt.

EINGABE

HEX, rgb(), hsl(), hwb() oder oklch(), mit oder ohne Transparenz

Gelesen als HEX

ERGEBNIS

  • HEX#2445D6
  • RGBrgb(36, 69, 214)
  • HSLhsl(229, 71%, 49%)
  • HWBhwb(229 14% 16%)
  • OKLCHoklch(47.27% 0.2232 266.62)

KONTRAST (WCAG 2)

  • Mit Weiß

    7,24:1

    • AA: bestanden
    • AA großer Text: bestanden
    • AAA: bestanden
    • AAA großer Text: bestanden

  • Mit Schwarz

    2,89:1

    • AA: nicht bestanden
    • AA großer Text: nicht bestanden
    • AAA: nicht bestanden
    • AAA großer Text: nicht bestanden

  • Mit #F5F6F8

    6,70:1

    • AA: bestanden
    • AA großer Text: bestanden
    • AAA: nicht bestanden
    • AAA großer Text: bestanden

Läuft vollständig in Ihrem Browser. Ihre Eingaben werden an keinen Server gesendet.

So rechnen Sie einen Farbcode um

  1. Farbe eingeben

    Geben Sie einen Wert wie #2445D6, rgb(36, 69, 214) oder oklch(47% 0.22 267) ein oder fügen Sie ihn ein. Sie können auch die Farbauswahl verwenden.

  2. Gewünschtes Format kopieren

    HEX, RGB, HSL, HWB und OKLCH werden zusammen angezeigt, jeweils mit eigener Schaltfläche zum Kopieren.

  3. Kontrast prüfen

    Sehen Sie das Kontrastverhältnis zu Weiß, Schwarz und einer Farbe Ihrer Wahl, mit den Ergebnissen für WCAG AA und AAA.

Eine Farbe, fünf Schreibweisen

HEX und RGB beschreiben den Rot-, Grün- und Blauanteil einer Farbe. HSL und HWB beschreiben sie über den Farbton, was sich von Hand leichter anpassen lässt. OKLCH ist ein neueres CSS-Format, dessen Helligkeit der wahrgenommenen Helligkeit entspricht, daher bleiben damit erstellte Paletten gleichmäßig. Transparenz bleibt in jedem Format erhalten.

Kontrast und WCAG

WCAG verlangt ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text (AA) und 7:1 für AAA. Großer Text ab etwa 24 px oder 19 px fett braucht 3:1 für AA und 4,5:1 für AAA. Die Verhältnisse werden abgerundet: Eine Farbe, die als bestanden angezeigt wird, besteht also wirklich.

Häufige Fragen

Warum sieht meine OKLCH-Farbe anders aus?

OKLCH kann Farben beschreiben, die Bildschirme im sRGB-Bereich nicht darstellen können. Solche Farben werden in den Bereich geholt, indem ihre Buntheit (Chroma) verringert wird, während Helligkeit und Farbton erhalten bleiben. Ein Hinweis zeigt an, wenn das passiert ist.

Wie wird der Kontrast transparenter Farben geprüft?

Eine transparente Farbe wird zuerst über Weiß gelegt, so wie sie auf einer weißen Seite aussähe, und dieses Ergebnis wird verglichen.

Wird etwas an einen Server gesendet?

Nein. Alle Umrechnungen und Kontrastprüfungen erfolgen in Ihrem Browser.