Farbkonverter

Ein Farbkonverter nimmt einen Farbwert entgegen und zeigt ihn gleichzeitig in allen anderen gängigen Formaten an. Gib einen HEX-Code, einen rgb()/rgba()-Wert oder einen hsl()/hsla()-Wert ein oder füge ihn ein: Das Tool erkennt das Format automatisch und listet die passenden HEX-, RGB-, HSL-, HSV- und CMYK-Werte auf. Ein großes Farbmuster zeigt die Farbe, mit einem Schachbrettmuster im Hintergrund, wenn sie transparent ist. Eine native Farbauswahl des Browsers bleibt dabei jederzeit mit dem Textfeld synchron.

Welche Formate erkennt das Tool?

Das Eingabefeld akzeptiert HEX in 3-, 4-, 6- oder 8-stelliger Form, also funktionieren sowohl #f0f als auch #ff00ff, wobei die 4- und 8-stelligen Varianten einen Alphakanal mitbringen. Dazu kommen rgb()/rgba() und hsl()/hsla(), sowohl in der klassischen Schreibweise mit Kommas als auch in der modernen, mit Leerzeichen getrennten Syntax wie rgb(255 0 0 / 0.5). Was auch immer du einfügst, das Tool rechnet es in die vier anderen Formate um: HEX, RGB, HSL, HSV und CMYK. HSV und CMYK werden dabei immer als deckende Werte angezeigt, weil keines der beiden Formate eine standardisierte Art hat, Transparenz auszudrücken. HEX, RGB und HSL behalten den Alphakanal dagegen bei und wechseln automatisch zu ihren a-Varianten (rgba(), hsla()), sobald die Farbe nicht vollständig deckend ist.

Zusätzlich zur Umrechnung erzeugt das Tool eine zehnstufige Farbrampe von sehr hell bis sehr dunkel. Dafür bleiben Farbton und Sättigung der Ausgangsfarbe erhalten, nur die Helligkeit wandert in gleichmäßigen Schritten nach unten. Das eignet sich, um aus einer einzigen Markenfarbe schnell eine Palette aus Aufhellungen und Abdunkelungen zu bauen, ohne dafür ein Design-Tool zu öffnen.

Werden meine Daten irgendwohin hochgeladen?

Nein. Das Erkennen und Umrechnen läuft komplett in deinem Browser, mit einfacher JavaScript-Mathematik und ohne Umweg über einen Server. Die eingegebene oder gewählte Farbe verlässt nie dein Gerät, daher kannst du auch Markenfarben aus einem internen Designsystem oder dem Styleguide eines Kunden umwandeln, ohne sie auf einer fremden Website einzufügen.

Nützlich, um den HEX-Code eines Designers in die RGB- oder HSL-Werte umzuwandeln, die eine CSS-Datei braucht, um zu prüfen, wie eine Farbe mit teilweiser Deckkraft aussieht, oder um CMYK-Prozentwerte für den Druck aus einer am Bildschirm gewählten Farbe zu erhalten. Die vollständige Liste der CSS-Farbnotationen findest du in der <color>-Referenz von MDN, die Definition der Leerzeichen-Syntax in der CSS Color Module Level 4-Spezifikation.