Farb-Konverter — HEX, RGB, HSL, HSV

Geben Sie eine Farbe ein oder wählen Sie sie aus, um sofort ihre HEX-, RGB-, HSL- und HSV-Darstellungen zu sehen. Die Konvertierung erfolgt lokal in Ihrem Browser — nichts wird hochgeladen.

Warum zwischen Farbräumen konvertieren?

Jeder Farbraum hat seinen Zweck. HEX ist kompakt und in CSS und Designtools universell unterstützt. RGB ist der native Raum jedes Bildschirms und das von vielen APIs erwartete Format. HSL (Farbton, Sättigung, Helligkeit) und HSV (Farbton, Sättigung, Wert) sind für Menschen konzipiert — sie machen es leicht zu beurteilen, wie hell oder gesättigt eine Farbe ist, was in HEX oder RGB viel weniger intuitiv ist.

Beim Entwurf einer Oberfläche beginnt man oft in HSL, um eine konsistente Palette abzuleiten (gleicher Farbton, variable Helligkeit für Schattierungen), und exportiert dann die Endwerte in HEX für den Code. Mit diesem Konverter können Sie ohne Präzisionsverlust frei zwischen den vier Darstellungen wechseln.

So verwenden Sie dieses Tool

Geben Sie eine beliebige Farbe in das Eingabefeld ein — HEX (#3b82f6 oder #38f), rgb(), rgba(), hsl(), hsla() oder hsv() werden alle akzeptiert.
Oder verwenden Sie den nativen Farbwähler links für eine visuelle Auswahl.
Klicken Sie auf „Zufällig“, um eine zufällige Farbe zu erzeugen und alle ihre Darstellungen auf einmal zu sehen.
Kopieren Sie eines der vier Ausgabeformate mit der Schaltfläche Kopieren daneben.

Häufig gestellte Fragen

Welche Eingabeformate werden erkannt?

Hexadezimal (3, 6 oder 8 Ziffern, optionales #), rgb()/rgba(), hsl()/hsla() mit oder ohne Prozentzeichen sowie hsv(). Der Alphakanal wird geparst, aber derzeit nicht in den konvertierten Ausgaben angezeigt.

Was ist der Unterschied zwischen HSL und HSV?

Beide drücken Farbe als Farbton / Sättigung / etwas aus. Die dritte Komponente unterscheidet sich: in HSL ist es die Helligkeit (0 % schwarz, 50 % reine Farbe, 100 % weiß), in HSV ist es der Wert (0 % schwarz, 100 % reine Farbe). HSL ist symmetrisch um 50 %, HSV ist näher am Verhalten einer Farbmischung.

Warum sieht meine konvertierte Farbe leicht anders aus?

Konvertierungen zwischen ganzzahlig gerundetem RGB und prozentgerundetem HSL/HSV sind nicht perfekt verlustfrei. Für die meisten UI-Arbeiten ist der Unterschied unsichtbar, aber wenn Sie exaktes Hin- und Hergehen benötigen, behandeln Sie HEX/RGB als Quelle der Wahrheit und berechnen HSL/HSV daraus neu.

Werden Farbnamen wie ‚red‘ oder ‚tomato‘ unterstützt?

Noch nicht. CSS-Farbnamen fügen ~150 Zuordnungen hinzu, die leicht zu unterstützen sind — wir werden sie in einer zukünftigen Aktualisierung hinzufügen. In der Zwischenzeit können Sie das HEX-Äquivalent einfügen.

Wird der Alphakanal unterstützt?

Er wird geparst (rgba/hsla-Eingabe wird akzeptiert), aber nur der RGB-Teil wird konvertiert. Eine vollständig alpha-bewusste Konvertierung über alle vier Räume ist auf der Roadmap.