Farb-Umrechner
Eine Farbe zwischen HEX, RGB, HSL und HSV umrechnen, mit ihrem Kontrast gegen Schwarz und Weiß.
Läuft vollständig in Ihrem Browser. Nichts wird hochgeladen, protokolliert oder gespeichert.
Hexadezimal
#3498DB
- RGB
- rgb(52 152 219)
- HSL
- hsl(204.1 69.9% 53.1%)
- HSV
- hsv(204.1 76.3% 85.9%)
- Relative Leuchtdichte
- 0,2830
- Kontrast auf Weiß
- 3,15:1
- Kontrast auf Schwarz
- 6,66:1
HEX, RGB, HSL und HSV sind vier Arten, dieselbe sRGB-Farbe zu schreiben. Welche bequem ist, hängt davon ab, was Sie tun: hexadezimal, um einen Wert aus einem Entwurf zu kopieren, HSL, um etwas ein wenig heller zu machen, ohne den Farbton zu ändern.
Wie es funktioniert
Die Eingabe wird in Rot-, Grün- und Blaukanäle zu acht Bit plus ein Alpha eingelesen, und jede Ausgabe wird aus diesen Kanälen berechnet. Nichts wird aus einer anderen Ausgabe umgerechnet, ein Wert kann also nicht durch eine Kette von Rundungen abdriften.
Die Kontrastzahlen folgen WCAG 2.1: Jeder Kanal wird linearisiert, danach gewichtet, wie viel das Auge daraus nimmt, und das Verhältnis ist (heller + 0,05) geteilt durch (dunkler + 0,05). Die Skala läuft von 1 für zwei gleiche Farben bis 21 für Schwarz gegen Weiß.
Beispiele
| Fall | Eingabe | Ergebnis |
|---|---|---|
| Ein Hexadezimalwert aus einer Entwurfsdatei | #3498db | rgb(52 152 219), hsl(204 70% 53%) |
| Die Kurzform, die jede Stelle verdoppelt | #39d | #3399DD, not #039D |
| Mit Transparenz | rgb(52 152 219 / 0.5) | #3498DB80 |
Häufige Fragen
Heißt ein Kontrast von 4,5, dass mein Text besteht?
Das hängt vom Text ab, und deshalb wird die Zahl gegeben und kein Urteil. WCAG verlangt 4,5 für normalen Text und 3 für großen, wobei groß mindestens 18 Punkt oder 14 Punkt fett heißt. Ein Tool, das nur zwei Farben sieht, kann nicht wissen, welche Regel greift.
Warum verschiebt sich beim Umrechnen nach HSL und zurück manchmal eine Stelle?
Weil Hexadezimal 256 Stufen je Kanal hat und HSL nicht gleichmäßig hineinteilt. Der Rundweg kann eine Stufe daneben landen. Hier wird jede Schreibweise aus den ursprünglichen Kanälen berechnet, die gezeigten Werte liegen also immer am nächsten an dem, was Sie eingegeben haben.
Was ist der Unterschied zwischen HSL und HSV?
Sie teilen den Farbton und sind sich über den Rest uneins. In HSL ist Helligkeit 100 % Weiß und 50 % die reine Farbe. In HSV ist Wert 100 % die reine Farbe, und Weiß erscheint erst, wenn die Sättigung auf null fällt. Entwurfswerkzeuge zeigen meist HSV; CSS spricht HSL.
Werden benannte Farben wie „rebeccapurple“ unterstützt?
Nein. Die CSS-Schlüsselwortliste ist eine Tabelle von etwa 150 Namen, die zur Spezifikation gehört und nicht zur Arithmetik, und dieses Tool rechnet zwischen Schreibweisen um, statt Namen nachzuschlagen.
Gut zu wissen
- Alles hier ist sRGB, der Raum, den das Web immer vorausgesetzt hat. Die weiteren Räume, die CSS Color 4 hinzufügt — lab, oklch, display-p3 —, beschreiben Farben, die sRGB nicht erreicht, und dorthin umzurechnen braucht eine Entscheidung darüber, was mit denen zu tun ist, die herausfallen. Diese Entscheidung wird hier nicht getroffen.
- Die Kontrastzahlen sind Zahlen und keine Urteile. Ob ein Paar besteht, hängt von Größe und Strichstärke des Textes ab, und das weiß eine Farbe für sich genommen nicht.