Farbkonverter: HEX, RGB, HSL und HSV einfach umrechnen (2026)

Ich kann nicht mehr zählen, wie oft ich mitten im CSS-Schreiben eine Hexadezimalfarbe in RGB umrechnen musste. Der Designer schickt #4A90E2, der Code braucht rgb(74, 144, 226), und mein Gehirn kann diese Berechnung einfach nicht im Kopf machen. Vielleicht können Sie das — ich definitiv nicht.

In echten Projekten passiert das ständig. Designdateien sind voll mit HEX-Codes, CSS-Variablen könnten HSL für Theme-Varianten benötigen, und Canvas-APIs oder SVG-Attribute wollen manchmal RGB. Diese Formate arbeiten nicht gut miteinander, und manuelles Wechseln zwischen ihnen ist mühsam und fehleranfällig.

Das ist das Problem, das ein Farbkonverter löst. Fügen Sie eine Farbe in einem beliebigen Format ein, und erhalten Sie sie sofort in allen vier Hauptformaten zurück.

Warum es mehrere Farbformate gibt

Das Vorhandensein mehrerer Farbformate ist kein Zufall — jedes wurde für einen anderen Anwendungsfall entwickelt, und jedes hat echte Stärken.

HEX (#RRGGBB) ist das älteste und universell unterstützte Format in Web-Kontexten. Es ist kompakt, leicht aus Browser-DevTools zu kopieren, und fast jedes Designtool gibt es standardmäßig aus. Der Nachteil ist, dass es vollständig unintuitiv zu lesen ist.

RGB (Rot, Grün, Blau) entspricht der tatsächlichen Funktionsweise von Computermonitoren. Die Werte reichen von 0 bis 255. Es ist unerlässlich, wenn Sie Transparenz benötigen (rgba(74, 144, 226, 0.5)).

HSL (Farbton, Sättigung, Helligkeit) ist das Format, das Designer lieben, sobald sie es entdecken. Der praktische Wert: Sie können eine Schaltflächenfarbe beim Hover etwas heller machen, indem Sie nur den L-Wert anpassen. Das ist mit HEX nicht intuitiv möglich.

HSV (Farbton, Sättigung, Hellwert) ist ähnlich wie HSL, funktioniert aber an den Extremwerten anders. Die meisten Farbauswahl-UIs in Designtools funktionieren intern mit HSV.

Verwendung des Farbkonverters

Gehen Sie zu /tools/color-converter.

Schritt 1: Startfarbe eingeben. Sie können einen Wert in einem der vier Formate eingeben oder einfügen. HEX-Eingabe akzeptiert sowohl die sechsstellige Form (#4A90E2) als auch die dreistellige Kurzform (#48F).

Schritt 2: Live-Vorschau ansehen. Während Sie tippen, aktualisiert sich ein Farbmuster in Echtzeit, sodass Sie sofort sehen, wie die Farbe aussieht.

Schritt 3: Benötigtes Format kopieren. Jedes Ausgabefeld hat eine Kopierschaltfläche. Klicken Sie darauf, und der Wert ist in Ihrer Zwischenablage, bereit zum Einfügen in Ihr CSS oder woanders.

Praktische Anwendungsfälle

CSS-Variablen und Design-Tokens. Beim Aufbau eines Designsystems könnten Sie Ihre Primärfarbe als --color-primary: hsl(210, 72%, 59%) definieren, weil HSL das Erstellen von Tönungsvarianten erleichtert. Aber der Designer gab Ihnen #4A90E2. Der Konverter überbrückt diese Lücke.

Canvas-API und SVG-Arbeit. Die HTML-Canvas-Eigenschaft fillStyle akzeptiert beliebige CSS-Farbstrings. Aber einige Drittanbieter-Bibliotheken erwarten möglicherweise RGB-Arrays wie [74, 144, 226].

Barrierefreiheit für Farbkontrast prüfen. Bei der Verwendung eines Farbkontrast-Prüfers müssen Sie Farben oft in bestimmten Formaten angeben.

Designtool-Exporte. Figma exportiert Farben standardmäßig in HEX. Sketch gibt oft RGB-Werte. Wenn Sie in das Format konvertieren können, das Ihr Projekt verwendet, vermeiden Sie ständiges Kontextwechseln.

Einschränkungen: Ein ehrlicher Überblick

Druckfarbräume werden nicht unterstützt. CMYK für den Druckbereich hat keine direkte Entsprechung im RGB-basierten Bildschirmfarbraum. Für die Konvertierung zwischen Bildschirm- und Druckfarben brauchen Sie spezielle Farbverwaltungssoftware.

Wahrnehmungsgleichmäßige Farbräume fehlen. Moderne Browser unterstützen OKLCH und OKLAB, die wahrnehmungsgleichmäßiger als HSL sind. Dieser Konverter konzentriert sich auf die vier Formate, die den größten Teil des praktischen Bedarfs abdecken.

Farbgenauigkeit hängt von der Displaykalibrierung ab. Ein #4A90E2 auf einem unkalibierten Monitor sieht anders aus als auf einem kalibrierten Profimonitor.

Fazit

Farbformatkonvertierung ist eine dieser kleinen, wiederkehrenden Aufgaben, die ohne schnelle Methode immer lästig bleiben. Die HEX-zu-RGB-Berechnung erfordert immer mehrere Versuche im Kopf.

Ein Konverter beseitigt diese Reibung vollständig. Farbe eingeben, alle vier Formate erhalten, das Benötigte kopieren. Probieren Sie den Farbkonverter aus, wenn Sie regelmäßig mit UI-Design oder CSS arbeiten. Und wenn Sie ein Farbsystem aufbauen, lohnt sich auch ein Blick auf den Farbpaletten-Generator.