Zum Inhalt springen
Calcuplay
Sprache: Deutsch de
Technik

Farbumrechner HEX, RGB, HSL und Kontrastprüfung

Wählen Sie eine Farbe für ihre HEX-, RGB- und HSL-Werte und testen Sie ihre Lesbarkeit auf einem Hintergrund. #0F766E ist rgb(15, 118, 110) und hsl(175, 77 %, 26 %).

HEX-Code

HEX-Code

#0F766E

rgb(15, 118, 110) · hsl(175, 77%, 26%)

Farbton
175°
Sättigung
77 %
Helligkeit
26 %

Kontrastprüfung

Textfarbe
Hintergrundfarbe

Beispieltext

Beispieltext

Kontrastverhältnis5,47:1

  • AA · Fließtext ≥ 4,5:1Bestanden
  • AA · großer Text ≥ 3:1Bestanden
  • AAA · Fließtext ≥ 7:1Nicht bestanden
  • AAA · großer Text ≥ 4,5:1Bestanden
  • Bedienelemente (AA) ≥ 3:1Bestanden

Kleine Challenge

Serie 0Rekord 0

Testen Sie sich: Jede Antwort berechnet das Werkzeug, und die falschen Optionen sind die häufigsten Fallen.

So funktioniert es

Formel: Kontrast = (L1 + 0,05) ÷ (L2 + 0,05)

Ein HEX-Code schreibt die drei Anteile Rot, Grün und Blau hexadezimal, jeweils von 0 bis 255: #FF8000 = Rot 255, Grün 128, Blau 0. HSL beschreibt dieselbe Farbe über Farbton (einen Winkel auf dem Farbkreis), Sättigung und Helligkeit. Für den Kontrast wird die relative Leuchtdichte jeder Farbe nach der Definition der WCAG 2.2 berechnet, dann das Verhältnis (L1 + 0,05) ÷ (L2 + 0,05) von 1:1 bis 21:1. Fließtext braucht 4,5:1 für Stufe AA (7:1 für AAA), großer Text (18 pt oder 14 pt fett) 3:1 (4,5:1 für AAA) und Bedienelemente 3:1. Das Verhältnis wird nie aufgerundet: 4,49:1 reicht nicht.

Rechenbeispiele

  • Reines Rot #FF0000

    rgb(255, 0, 0) = hsl(0, 100 %, 50 %).

  • Schwarz auf Weiß

    Der höchste Kontrast: 21:1.

  • Grau #777777 auf Weiß

    Kontrast 4,47:1, knapp unter dem Minimum von 4,5:1 der Stufe AA für Fließtext.

Häufige Fehler

  • Ein Grau nach Augenmaß für „dunkel genug“ halten.

    #777777 auf Weiß ergibt 4,47:1: Fließtext braucht mindestens 4,5:1.

  • #F0C für eine unvollständige Farbe halten.

    Es ist die Kurzform von #FF00CC: Jede Ziffer wird verdoppelt.

  • Glauben, die Reihenfolge Text/Hintergrund ändere den Kontrast.

    Weiß auf #777777 ergibt ebenfalls 4,47:1: Das Verhältnis ist in beide Richtungen gleich.

Gängige Farben und ihr Kontrast

Gängige Farben und ihr Kontrast
HEX-CodeRGBHSLAuf WeißAuf Schwarz
#0000000, 0, 00°, 0%, 0%21:11:1
#FFFFFF255, 255, 2550°, 0%, 100%1:121:1
#FF0000255, 0, 00°, 100%, 50%3,99:15,25:1
#00FF000, 255, 0120°, 100%, 50%1,37:115,3:1
#0000FF0, 0, 255240°, 100%, 50%8,59:12,44:1
#FFFF00255, 255, 060°, 100%, 50%1,07:119,55:1
#00FFFF0, 255, 255180°, 100%, 50%1,25:116,74:1
#FF00FF255, 0, 255300°, 100%, 50%3,13:16,69:1
#808080128, 128, 1280°, 0%, 50%3,94:15,31:1
#767676118, 118, 1180°, 0%, 46%4,54:14,62:1
#0F766E15, 118, 110175°, 77%, 26%5,47:13,83:1

Häufige Fragen

Wie rechnet man HEX in RGB um?

Teilen Sie den Code in drei Paare und rechnen Sie jedes von hexadezimal in dezimal um: #1E90FF ergibt 1E = 30, 90 = 144 und FF = 255, also rgb(30, 144, 255).

Welchen Kontrast braucht gut lesbarer Text?

Die WCAG 2.2 verlangen mindestens 4,5:1 für Fließtext auf Stufe AA und 7:1 auf Stufe AAA. Großer Text darf auf AA bis 3:1 gehen. Auf Weiß besteht das Grau #767676 knapp (4,54:1), #777777 dagegen nicht (4,47:1).

Was ist der Unterschied zwischen RGB und HSL?

Es sind zwei Schreibweisen derselben Farbe. RGB mischt Rot, Grün und Blau; HSL geht von einem Farbton aus und regelt Sättigung und Helligkeit, damit lassen sich hellere oder dunklere Varianten leicht bilden.

Technik-Rechner

Technik-Rechner

Ähnliche Rechner

Passende Ratgeber

Weitere Rechner