Der Farbkonverter übersetzt eine Farbe gleichzeitig zwischen den Webformaten —HEX, RGB, HSL und den modernen OKLCH und OKLab—. Er akzeptiert die Farbe so, wie du sie kopierst: mit Kommas oder Leerzeichen, mit Transparenz, mit einem Namen (tomato) oder so, wie sie DevTools liefert. Außerdem liefert er eine Farbtonskala derselben Farbe. Alles geschieht in deinem Browser.

1. Gib eine Farbe ein oder füge sie ein: #1a2b3c, #1a2b3c80, rgb(26 43 60 / 50%), hsl(210deg 40% 17%), oklch(62.8% 0.258 29.2) oder einen CSS-Namen.
2. Oder wähle sie mit dem Farbfeld links.
3. Es erscheinen die Vorschau und die Farbe in den fünf Formaten; das Kopieren-Symbol legt jede davon in die Zwischenablage.
4. Darunter die Farbtonskala: Klicke einen Ton an, um ihn zur aktuellen Farbe zu machen.

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.

OKLCH beschreibt Farbe mit L (Helligkeit, 0–100 %), C (Chroma, wie viel Farbe) und H (Farbton, 0–360°), wie HSL, aber mit einem wichtigen Unterschied: Sein L ist die vom Auge wahrgenommene Helligkeit. In HSL haben hsl(60 100% 50%) (Gelb) und hsl(240 100% 50%) (Blau) dasselbe L, und Gelb wirkt viel heller; in OKLCH bedeutet gleiches L gleiche wahrgenommene Helligkeit. Deshalb eignet es sich für stimmige Paletten und Skalen. Fast alle Browser verstehen es bereits (oklch() in CSS). Manche OKLCH-Farben passen nicht in sRGB (den Farbraum eines normalen Bildschirms): Du wirst gewarnt, und die nächstgelegene Farbe wird angezeigt.

Elf Töne derselben Farbe, von sehr hell bis sehr dunkel, verteilt nach OKLCH-Helligkeit und mit demselben Farbton. Passt die Farbe bei einer bestimmten Helligkeit nicht in sRGB, wird die Chroma gerade so weit gesenkt, statt Kanäle zu kappen (das würde den Farbton ändern). Markiert ist der, der deiner Farbe am ähnlichsten ist. Sie eignen sich für Hintergründe, Ränder und Zustände derselben Markenfarbe.

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.

Jeder Wert —HEX, RGB und HSL— hat rechts daneben ein Kopier-Symbol. Klickst du darauf, wandert der vollständige, bereits formatierte Wert (z. B. rgb(26, 43, 60)) in die Zwischenablage und das Symbol zeigt kurz ein ✓ als Bestätigung.

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.