Farbkonverter und Kontrastprüfer
Konvertieren Sie zwischen HEX, RGB, HSL, HWB und OKLCH und prüfen Sie den Kontrast.
Notationen
- hex
#3b82f6- rgb
rgb(59 130 246)- hsl
hsl(217.2 91.2% 59.8%)- hwb
hwb(217.2 23.1% 3.5%)- oklch
oklch(62.3% 0.188 259.8)
Kontrast
- WCAG-Stufe
- AA
- Lesbare Textfarbe
- Schwarz
- Relative Leuchtdichte
- 0.2355
Liest eine Farbe in jeder Notation, die ein Stylesheet enthalten könnte, und gibt Ihnen jede andere sowie das Kontrastverhältnis zu Schwarz und Weiß aus. OKLCH ist enthalten, weil es die Notation ist, die eine hellere oder dunklere Variante tatsächlich wie dieselbe Farbe aussehen lässt – das, worin HSL berüchtigt schlecht ist, da zwei HSL-Farben mit derselben Helligkeit enorm unterschiedlich hell wirken können.
So arbeitet es
- Die Eingabe akzeptiert Hex, rgb(), hsl(), hwb() und CSS-Farbnamen, sowohl in der Komma- als auch in der modernen, mit Leerzeichen getrennten Syntax.
- Der Kontrast ist das WCAG-2.1-Verhältnis, und die Stufe ist die, die ein Element in Textgröße erhalten würde.
- Alles wird beim Tippen auf der Seite neu berechnet; keine Farbe wird jemals irgendwohin gesendet.
Wohin Ihre Daten gehen
Nirgendwohin. Dieses Werkzeug läuft vollständig in Ihrem Browser: Der eingefügte Text wird von der Seite verarbeitet und weder an einen Server übertragen noch protokolliert.
Kostet ein Lauf Punkte, wird eine einzeilige Zusammenfassung in Ihrem eigenen Verlauf gespeichert, damit Sie ihn wiederfinden. Festgehalten wird die Form des Laufs — Größen, Anzahlen, die abgefragten Werte — nie der eingefügte Inhalt.
Was es kostet
Dieses Werkzeug ist kostenlos, ohne Anmeldung und ohne Punkte.
Häufige Fragen
- Warum entspricht die HSL-Helligkeit nicht der wahrgenommenen Helligkeit einer Farbe?
- Weil die HSL-Helligkeit ein einfacher Durchschnitt des größten und kleinsten Kanals ist, kein Modell des menschlichen Sehens. hsl(60 100% 50%) ist Gelb und hsl(240 100% 50%) ist Blau; beide behaupten 50% Helligkeit, und das Gelb ist beim Betrachten etwa sechsmal heller. Die Helligkeit von OKLCH ist wahrnehmungsbezogen, weshalb derselbe L-Wert über verschiedene Farbtöne hinweg gleich hell wirkt.
- Welches Kontrastverhältnis brauche ich tatsächlich?
- 4,5:1 für Fließtext und 3:1 für Text ab 18pt oder 14pt fett, um WCAG AA zu erfüllen; 7:1 erfüllt AAA. Benutzeroberflächenkomponenten und Grafiken, die Bedeutung tragen, benötigen 3:1. Unter 3:1 besteht nichts.
- Kann ich OKLCH in der Produktion verwenden?
- Ja. Jeder aktuelle Browser unterstützt es, und es degradiert sauber hinter einer @supports-Regel oder einer vorangestellten Hex-Deklaration für ältere Browser. Der Umstieg lohnt sich insbesondere für die Erzeugung von Farbskalen, bei denen HSL Schritte erzeugt, die ungleichmäßig wirken.
Das Open Source dahinter
Dieses Werkzeug ist eine eigenständige Implementierung ohne fremde Bibliothek. Qix-/color-convert (MIT) erledigt dieselbe Aufgabe als Bibliothek — wer sie im eigenen Programm braucht, fängt dort an, statt eine Webseite aufzurufen.
Qix-/color-convertAuch bekannt als
- Farbkonverter
- HEX in RGB
- RGB in HEX
- HSL Konverter
- OKLCH Konverter
- Kontrastprüfer
- WCAG Kontrast