Der Farbkonverter übersetzt ein und dieselbe Farbe gleichzeitig zwischen den drei im Web verwendeten Formaten — HEX, RGB und HSL. Du gibst die Farbe in einem beliebigen davon ein (oder wählst sie mit dem Farbwähler) und erhältst sofort ihre exakten Entsprechungen, mit einer Vorschau und einer Schaltfläche zum Kopieren jedes Werts. Alles geschieht in deinem Browser: Nichts wird an einen Server gesendet.

1. Gib eine Farbe im Feld „Farbe“ im Format #rrggbb, rgb(r,g,b) oder hsl(h,s%,l%) ein.
2. Oder klicke auf das Farbfeld links, um sie visuell mit dem Farbwähler deines Systems auszuwählen.
3. Das Ergebnis erscheint erst nach einer kurzen Pause: die Vorschau und die drei entsprechenden Werte.
4. Klicke auf das Kopieren-Symbol neben einem beliebigen Wert, um ihn in die Zwischenablage zu legen.
5. Wird das Format nicht erkannt, wird das Feld rot markiert, mit einem Hinweis auf die gültigen Formate.

HEX (hexadezimal) ist das Standardformat von CSS und Webdesign. Beginnt mit # und enthält drei Paare hexadezimaler Ziffern (0-9, a-f) für Rot, Grün und Blau, jedes Paar von 00 bis ff (0 bis 255 dezimal). Beispiel: #1a2b3c. Akzeptiert auch die kurze Form mit 3 Ziffern #abc, die durch Verdopplung jeder Ziffer erweitert wird (#abc entspricht #aabbcc). Das # ist bei der Eingabe optional.

RGB beschreibt die Farbe über ihre drei Lichtkomponenten: Rot, Grün und Blau, jede von 0 bis 255. Geschrieben als rgb(r,g,b). Beispiel: rgb(26, 43, 60). Es ist das additive Modell der Bildschirme: rgb(0,0,0) ist Schwarz und rgb(255,255,255) ist Weiß.

HSL beschreibt die Farbe intuitiver für das Auge: Farbton (Hue, 0-360° auf dem Farbkreis: 0 Rot, 120 Grün, 240 Blau), Sättigung (0-100 %, von Grau zu reiner Farbe) und Helligkeit (Lightness, 0-100 %, von Schwarz zu Weiß). Geschrieben als hsl(h,s%,l%). Beispiel: hsl(210, 40%, 17%). Ideal, um eine Farbe aufzuhellen, abzudunkeln oder zu entsättigen, ohne ihren Farbton zu ändern. Das Symbol % ist bei der Eingabe optional.

Links neben dem Feld gibt es einen nativen Farbwähler deines Systems: Klicke ihn an, um eine Farbe mit dem Farbkreis oder der Palette deines Browsers auszuwählen — das Feld füllt sich dann automatisch im HEX-Format. Das Vorschaufeld über den Ergebnissen zeigt die endgültige Farbe genau so an, damit du auf einen Blick prüfen kannst, ob es die gesuchte ist.

Klicke auf das Kopiersymbol neben jedem Wert, um ihn in die Zwischenablage zu übernehmen.

In der Werkzeugleiste findest du Zurücksetzen (leert das Feld), Exportieren (lädt eine .json-Datei mit der Farbe und ihren Entsprechungen herunter) und Importieren (stellt eine gespeicherte Farbe wieder her). Außerdem wird die zuletzt eingegebene Farbe automatisch gemerkt und erscheint beim nächsten Öffnen des Werkzeugs erneut.