Farbkonverter — HEX, RGB, HSL
Eine Farbe in einer der drei Notationen einfügen und die anderen zurückbekommen, Alpha eingeschlossen, mit einer Farbfläche zum Nachsehen, was da eigentlich konvertiert wird.
Farbe
Notationen
Über dieses Tool
Hex ist das, was ein Designwerkzeug herausgibt, rgb() will eine Canvas oder eine Bildbibliothek, und hsl() greift man, wenn eine Farbe etwas heller werden oder ein Farbton rotieren soll. Von Hand zwischen ihnen umzurechnen ist Rechnerei, die niemandem Freude macht. Eine der drei einfügen — mit oder ohne Alpha — und die anderen erscheinen, samt Farbfläche, denn ein Wert allein ist schnell vertippt und schwer auf Plausibilität zu prüfen.
So wird es benutzt
- 1Eine Farbe einfügen: #3fb984, rgb(63 185 132) oder hsl(157, 49%, 49%).
- 2Rechts die anderen Notationen lesen und die Farbfläche darüber prüfen.
- 3Die gewünschte Zeile kopieren, oder gleich die fertige CSS-Custom-Property.
Häufige Fragen
›Welche Notationen kann ich einfügen?
Hex mit 3, 4, 6 oder 8 Stellen (#3fb, #3fb9, #3fb984, #3fb984cc), rgb() und rgba() sowie hsl() und hsla(). Sowohl die Komma-Syntax als auch die moderne Leerzeichen-Syntax mit Schrägstrich vor dem Alpha werden akzeptiert.
›Warum kommt das HSL mit Nachkommastellen zurück?
Weil Farbton, Sättigung und Helligkeit kontinuierlich sind, Hex dagegen 8 Bit pro Kanal hat. Hex nach HSL zu konvertieren landet selten auf ganzen Zahlen, und sie zu runden würde die Farbe auf dem Rückweg leicht verschieben.
›Wofür ist das vierte Hex-Paar?
Alpha. #3fb984cc ist dieselbe Farbe bei 80 % Deckkraft. Es wird inzwischen überall unterstützt, wo es zählt, und ist kürzer, als auf rgba() zu wechseln.
›Werden benannte Farben wie „tomato" unterstützt?
Nein. Die 148 CSS-Schlüsselwörter aufzulösen braucht die vollständige Tabelle für sehr wenig Nutzen — stattdessen den Hex-Wert einfügen. Jedes Browser-Devtools-Panel gibt ihn dir.
›Warum reden Designer ständig von OKLCH?
Weil die HSL-Helligkeit nicht der wahrgenommenen Helligkeit entspricht: Zwei Farben mit demselben L können sehr unterschiedlich aussehen. OKLCH behebt das und eignet sich damit weit besser zum Bauen von Paletten. Diese Seite bleibt bei den drei Notationen, die man täglich einfügt.