Farbkonverter

Farbkonverter - HEX in RGB, RGB in HEX und HSL online umrechnen

Aktualisiert am 30. September 2026 · Von Saman

Das Designwerkzeug liefert ein Farbformat, CSS möchte ein anderes, und die Canvas-API ein drittes. Dieser kostenlose Farbkonverter nimmt jede der drei gängigen Schreibweisen entgegen - #0A84FF, rgb(10,132,255) oder hsl(210,100%,52%) - und liefert das exakte Gegenstück im gewünschten Format.

Wert einfügen, Ausgabeformat wählen, auf Umrechnen klicken. Nichts zu installieren, nichts anzumelden, und weil alles im Browser läuft, funktioniert es auch offline.

Die drei Formate und ihre Stärken

Alle Formate, die der Konverter ausgibt

Sie müssen nicht angeben, was Sie einfügen: Automatisch erkennen erkennt HEX mit und ohne #, die Komma- wie die Leerzeichen-Schreibweise von rgb() und hsl(), moderne Werte wie oklch(), hwb() und lab() sowie alle 148 CSS-Farbnamen. Neben HEX, RGB und HSL erhalten Sie HSV für Farbwähler, CMYK für alles, was in den Druck geht, oklch() für wahrnehmungsgleiche Design-Tokens und den nächstgelegenen CSS-Farbnamen. Ein Alphakanal - rgba(), hsla() oder achtstelliges HEX - bleibt erhalten statt verworfen zu werden.

So rechnen Sie eine Farbe um

1. Farbe in beliebiger Schreibweise einfügen oder mit dem Farbwähler auswählen - Automatisch erkennen erkennt das Format. In Browsern, die es unterstützen, etwa Chrome und Edge auf dem Desktop, holt Vom Bildschirm wählen die Farbe eines beliebigen Pixels auf dem Bildschirm; anderswo erscheint die Schaltfläche nicht.
2. Der Reiter Formate listet HEX, RGB, HSL, HSV, CMYK und OKLCH; jede Zeile lässt sich mit der Schaltfläche daneben kopieren. Er benennt die Farbe auch: CSS-Name, wenn sie genau einer benannten CSS-Farbe entspricht, sonst Nächstgelegen mit der ähnlichsten.
3. Der Reiter Palette liefert eine fertige Abstufung aus Tints und Shades sowie Komplementär-, Analog-, Triaden- und Tetraden-Harmonien.
4. Im Reiter Kontrast die Hintergrundfarbe setzen und das WCAG-Verhältnis mit AA- und AAA-Bewertung ablesen.
5. Zufällig zum Ausprobieren, Leeren zum Zurücksetzen vor dem nächsten Wert.

Wie ein HEX-Farbcode funktioniert

Eine HEX-Farbe besteht aus drei Paaren hexadezimaler Ziffern, je ein Paar für Rot, Grün und Blau, jedes im Bereich 00 bis FF - also 0 bis 255 dezimal. #FF0000 ist volles Rot, #000000 Schwarz und #FFFFFF Weiß. Wiederholt sich in allen drei Paaren die Ziffer, funktioniert die Kurzform: #FFF steht für #FFFFFF. Vier- und achtstellige Codes ergänzen einen Alphakanal, #0A84FF80 ist also dasselbe Blau bei rund 50% Deckkraft.

Warum sich mit HSL leichter denken lässt

HSL beschreibt eine Farbe so, wie Menschen es tun: Farbton als Winkel auf dem Farbkreis, Sättigung als Lebendigkeit, Helligkeit als Nähe zu Weiß oder Schwarz. Das macht HSL zur praktischen Wahl beim Aufbau einer Palette. Nehmen Sie Ihren Markenfarbton, behalten Sie die Sättigung und verändern Sie nur die Helligkeit - so entstehen Hover-Zustand, deaktivierter Zustand, Rahmenton und Dark-Mode-Variante, die erkennbar zur selben Familie gehören. In HEX hieße dasselbe: sechs Ziffern raten.

Aus einer Farbe eine ganze Palette bauen

Der Reiter Palette macht aus einer Markenfarbe den Satz, den Sie tatsächlich brauchen. Die Skala Helle und dunkle Abstufungen behält Farbton und Sättigung bei und verändert nur die Helligkeit über elf Stufen, nummeriert von 50 bis 950 wie in den meisten Design-Systemen - Hover, Rahmen, Deaktiviert und Dark Mode gehören damit sichtbar zusammen. Als CSS kopieren legt die komplette Skala als Custom Properties in die Zwischenablage, fertig für :root.

Darunter stehen die Harmonien des Farbkreises: Komplementär (gegenüberliegender Farbton), Analog (Nachbarn im Abstand von 30 Grad), Triade und Split-Komplementär für ausgewogene Akzente sowie Tetrade für ein Vierfarbschema. Ein Klick auf ein Feld kopiert den HEX-Wert, ein Doppelklick macht ihn zur aktuellen Farbe.

Kontrast prüfen, bevor es live geht

Der Reiter Kontrast misst das WCAG-Kontrastverhältnis zwischen Ihrer Farbe und einem beliebigen Hintergrund. Das Verhältnis erscheint auf zwei Nachkommastellen, und jede Schwelle wird als bestanden oder nicht bestanden markiert: AA normaler Text bei 4,5:1, AA großer Text bei 3:1, AAA normaler Text bei 7:1, AAA großer Text bei 4,5:1 und UI-Komponenten wie Icons und Feldrahmen bei 3:1. Tauschen vertauscht Text- und Hintergrundfarbe mit einem Klick. Eine Live-Probe zeigt die Kombination in 16px und in 24px fett, denn ein Verhältnis, das für Fließtext zu niedrig ist, kann für eine Überschrift reichen.

Reicht die Kombination nicht, schlägt das Werkzeug den nächstgelegenen Ton desselben Farbtons vor, der 4,5:1 erreicht - so lässt sich der Kontrast korrigieren, ohne die Markenfarbe aufzugeben. Eine transparente Farbe wird zuvor auf den Hintergrund gerechnet, denn genau das sieht die lesende Person; der rohe rgba()-Wert wäre zu optimistisch.

Wo Farbumrechnung gebraucht wird

• Markenfarben aus einer Designdatei in CSS Custom Properties überführen.
• fillStyle auf einem Canvas oder ein Farbattribut in SVG setzen, die RGB bevorzugen.
• HTML-E-Mail-Vorlagen bauen, wo HEX die verlässlichste Schreibweise über alle Clients ist.
• Einen konsistenten Satz heller und dunkler Abstufungen für ein Designsystem erzeugen.
• Diagramm- und Dashboard-Paletten wählen, in denen Farbtöne gleichmäßig verteilt sein müssen.
• Eine Farbe aus einem Screenshot oder einem Marken-PDF in etwas übersetzen, das im Code nutzbar ist.

Farbe und Lesbarkeit

Eine Umrechnung sagt nichts darüber, ob Text auf der Farbe lesbar ist. Kontrast hängt von der relativen Leuchtdichte ab, und die WCAG verlangen mindestens 4,5 zu 1 für normalen Fließtext und 3 zu 1 für großen Text. Die HSL-Helligkeit ist eine brauchbare erste Näherung - liegen zwei Helligkeitswerte nah beieinander, reicht der Kontrast fast sicher nicht - und der Reiter Kontrast klärt es exakt, für jedes Farbpaar, vor dem Deployment.

Details, die man kennen sollte

• Rundung. HSL rechnet in ganzen Grad und Prozent, deshalb kann HEX nach HSL und zurück einen Kanal um eins verschieben. Legen Sie ein Format als Quelle der Wahrheit fest.
• Alpha. rgba() und achtstelliges HEX tragen Transparenz; ein sechsstelliges HEX kann sie nicht darstellen.
• Prozent in RGB. rgb(100%, 0%, 0%) ist gültiges CSS und bedeutet dasselbe wie rgb(255,0,0).
• Erweiterter Farbraum. Neuere CSS-Funktionen wie oklch() und color(display-p3 ...) beschreiben Farben außerhalb von sRGB, die HEX nicht abbilden kann.
• Farbnamen. CSS-Schlüsselwörter wie tomato stehen für feste HEX-Werte, sind aber begrenzt und passen schlecht in ein System.

Läuft lokal

Die Umrechnung ist reine Arithmetik im Browser. Keine eingefügte Farbe wird hochgeladen - relevant, wenn Sie an einer noch unveröffentlichten Markenpalette arbeiten.

Die Formel von HEX zu RGB - und die Umrechnung im Code

Ein HEX-Code ist nichts als drei Bytes in Basis 16. Zerlegen Sie #0A84FF in 0A, 84 und FF, wandeln Sie jedes Paar in Dezimal um (0A = 10, 84 = 132, FF = 255), und Sie haben rgb(10, 132, 255). Rückwärts schreiben Sie jeden Kanal als zwei Hex-Ziffern und füllen mit einer Null auf, wenn er unter 16 liegt.

Passende Werkzeuge

Frontend-Arbeit endet selten bei der Farbe. Design-Tokens formatiert der JSON Formatter, ein kleines Icon als Data-URI liefert der Base64 Encoder, alle Farbcodes in einem Stylesheet findet der Regex-Tester, und Bilddateien wandelt der Bildkonverter. Um aus den Farben Verläufe und Schatten zu machen, nutzen Sie den CSS-Generator.