Farben umrechnen — HEX in RGB, HSL und OKLCH
Umrechnung zwischen HEX, RGB, HSL und OKLCH mit Vorschau und WCAG-Kontrastprüfung
Verarbeitung im Browser · kein Hochladen
Farbe erkannt: #1e90ff
#1e90ffrgb(30, 144, 255)hsl(209.6, 100%, 55.9%)oklch(0.652 0.1901 253.21)WCAG-Kontrast
3.24:1
- AA normaler Text (4,5)Nicht bestanden
- AA großer Text (3)Bestanden
- AAA normaler Text (7)Nicht bestanden
- AAA großer Text (4,5)Nicht bestanden
6.49:1
- AA normaler Text (4,5)Bestanden
- AA großer Text (3)Bestanden
- AAA normaler Text (7)Nicht bestanden
- AAA großer Text (4,5)Bestanden
Was das Tool ist
HEX im Stylesheet, RGB im Designtool, HSL oder OKLCH in der Palette: Farbwerte wechseln ständig ihre Form. Geben Sie eine Farbe in einem dieser Formate ein, und das Tool zeigt HEX, RGB, HSL und OKLCH nebeneinander, blendet eine Vorschau ein und prüft den Kontrast gegen weißen und schwarzen Hintergrund.
Anleitung
- Geben Sie eine Farbe ein oder nutzen Sie die Farbauswahl neben dem Eingabefeld. Beispiele:
#1e90ff,rgb(30 144 255),hsl(210 100% 56%),oklch(0.65 0.19 250). - Lesen Sie darunter die Werte für HEX, RGB, HSL und OKLCH ab und kopieren Sie den benötigten.
- Im Kontrastbereich sehen Sie das Verhältnis auf Weiß und auf Schwarz sowie, ob AA und AAA erfüllt sind. Verwendet Ihr Design einen anderen Hintergrund, geben Sie ihn unter Hintergrundfarbe ein, um genau dieses Paar zu prüfen.
- Eine Farbe mit Transparenz wird als 8-stelliges HEX,
rgba(),hsla()und in der Form mit/ alphaausgegeben.
So funktioniert es
- Als Eingabe werden HEX (3, 4, 6 oder 8 Stellen,
#optional), die 148 Farbnamen aus CSS Color 4 (tomato,rebeccapurple, Groß-/Kleinschreibung egal) undtransparent,rgb()/rgba()(mit Komma oder Leerzeichen, Prozentangaben erlaubt),hsl()/hsla()undoklch()akzeptiert. - OKLCH verwendet die Standardmatrizen aus Björn Ottossons Definition von OKLab (2020). sRGB wird linearisiert und über die Kubikwurzeln der LMS-Werte in L, a und b umgerechnet; C ist die Länge von (a, b) und H ihr Winkel.
- Die Ausgabe hat bei HSL eine Nachkommastelle, bei L und C von OKLCH vier und bei H zwei. Das reicht, damit eine Rückumwandlung in HEX exakt den Ausgangswert ergibt.
- Eine OKLCH-Eingabe außerhalb des sRGB-Farbraums wird kanalweise auf 0–255 begrenzt, und es erscheint ein Hinweis.
- Der Kontrast folgt der relativen Leuchtdichte nach WCAG 2.x. Das angezeigte Verhältnis ist auf zwei Nachkommastellen gerundet, über Bestehen oder Nichtbestehen entscheidet aber der ungerundete Wert. 4,499 wird also nie als bestandenes 4,5 angezeigt.
Beispiele
| Eingabe | Ergebnis |
|---|---|
#ffffff gegen Schwarz |
21:1, alle Stufen bestanden |
#777777 auf Weiß |
etwa 4,48:1, AA für normalen Text nicht bestanden, für großen Text bestanden |
#ff0000 |
oklch(0.628 0.2577 29.23) |
#ffffff |
oklch(1 0 0) |
Hinweise
- Betrachten Sie für Fließtext AA für normalen Text (4,5:1) als Untergrenze. Großer Text, also ab 18 pt oder ab 14 pt fett, braucht für AA nur 3:1.
- Vermitteln Sie Bedeutung nicht allein über Farbe, sondern ergänzen Sie ein Symbol oder eine Beschriftung. Eine Kontrastprüfung misst nur den Helligkeitsunterschied zwischen Text und Hintergrund.
Häufige Fragen
Wozu OKLCH?
In HSL können zwei Farben mit gleichem Helligkeitswert sehr unterschiedlich hell wirken, was das Erstellen von Paletten mühsam macht. OKLCH baut auf dem Farbraum OKLab auf, der an der menschlichen Wahrnehmung ausgerichtet ist. Änderungen an L (Helligkeit), C (Chroma) oder H (Farbton) ergeben daher recht gleichmäßige sichtbare Abstufungen. CSS versteht den Wert direkt über oklch().
Was passiert, wenn ein OKLCH-Wert außerhalb des sRGB-Farbraums liegt?
Kann das sRGB des Bildschirms ihn nicht darstellen, wird jeder RGB-Kanal auf 0–255 begrenzt und die nächstgelegene Farbe verwendet, begleitet von einem Hinweis. Das ist einfaches Abschneiden (Clamping) und kein Gamut-Mapping, das das Chroma schrittweise verringert. Das Ergebnis kann daher leicht von der beabsichtigten Farbe abweichen.
Wie wird das Kontrastverhältnis berechnet?
Mit der Formel für relative Leuchtdichte aus WCAG 2.x, also (Leuchtdichte der helleren Farbe + 0,05) geteilt durch (Leuchtdichte der dunkleren Farbe + 0,05). Das Ergebnis liegt zwischen 1:1 und 21:1. Normaler Text braucht 4,5:1 für AA und 7:1 für AAA, großer Text 3:1 und 4,5:1.
Wie werden halbtransparente Farben beim Kontrast behandelt?
Sie werden zuerst über den gewählten Hintergrund (Weiß oder Schwarz) gelegt. Ein zu 50 % deckendes Schwarz auf Weiß wirkt grau, also wird das Verhältnis für dieses Grau berechnet.
