Farbkonverter — HEX, RGB & HSL umrechnen

Rechnen Sie Farben zwischen den drei Formaten um, denen jeder Designer und Entwickler begegnet: HEX (#3B82F6), RGB (rgb(59, 130, 246)) und HSL (hsl(217, 91%, 60%)). Geben Sie einen Hex-Code ein, um die passenden RGB- und HSL-Werte zu sehen, oder wechseln Sie den Modus, um aus RGB-Werten einen Hex-Code zu erzeugen.

RGBrgb(59, 130, 246)

HSLhsl(217, 91%, 60%)

So funktioniert diese Berechnung

Eine HEX-Farbe fasst die drei Kanäle Rot, Grün und Blau in einer 6-stelligen Hexadezimalzahl (Basis 16) zusammen, zwei Stellen pro Kanal, jeweils von 00 bis FF (0–255 im Dezimalsystem). Eine 3-stellige Kurzform wie #FFF verdoppelt jede Ziffer, sodass #FFF gleichbedeutend mit #FFFFFF ist.

RGB schreibt dieselben drei Kanäle als einfache Dezimalzahlen von 0 bis 255 — deshalb beschreiben rgb(59, 130, 246) und #3B82F6 exakt dieselbe Farbe: 59 = 0x3B, 130 = 0x82, 246 = 0xF6.

HSL beschreibt dieselbe Farbe auf andere Weise: Hue (Farbton) ist die Position auf einem Farbkreis von 0–360° (0 = Rot, 120 = Grün, 240 = Blau), Saturation (Sättigung) gibt an, wie kräftig die Farbe ist (0 % = Grau, 100 % = voll gesättigt), und Lightness (Helligkeit) zeigt, wie nah die Farbe an Schwarz oder Weiß liegt (0 % = Schwarz, 100 % = Weiß). Berechnet wird das aus den RGB-Werten anhand von Maximal- und Minimalkanal und deren Differenz.

Rechenbeispiel

Das Standard-„blue-500“ von Tailwind CSS ist #3B82F6. Umgerechnet ergibt das rgb(59, 130, 246) und hsl(217, 91%, 60%) — dasselbe Blau, nur drei verschiedene Schreibweisen in CSS.

HEX vs. RGB vs. HSL — wann welches Format?

Format	Beispiel	Am besten für
HEX	#3B82F6	Design-Tools, Markenfarb-Übersichten, schnelles Kopieren in CSS
RGB	rgb(59, 130, 246)	Wenn explizite Kanalwerte oder rgba()-Transparenz benötigt werden
HSL	hsl(217, 91%, 60%)	Beim Erstellen von Farbpaletten — Helligkeit/Sättigung anpassen und den Farbton beibehalten

Wie die Hex-Ziffern den Kanälen entsprechen

#RRGGBB — RR ist Rot (00–FF), GG ist Grün (00–FF), BB ist Blau (00–FF)
Jedes Ziffernpaar ist eine Hexadezimalzahl: FF = 15×16 + 15 = 255, 80 = 8×16 + 0 = 128, 00 = 0
#000000 ist Schwarz, #FFFFFF ist Weiß, #FF0000 ist reines Rot
Die 3-stellige Kurzform verdoppelt jede Ziffer: #ABC → #AABBCC

Einen HSL-Wert auf einen Blick lesen

hsl(217, 91%, 60%) verrät sofort drei Dinge: 217° ist ein blauer Farbton (Blautöne liegen etwa zwischen 210–250°), 91 % Sättigung bedeutet, dass die Farbe kräftig statt matt ist, und 60 % Helligkeit bedeutet, dass sie bequem zwischen Schwarz und Weiß liegt — ein helles, klares Blau.

Das macht HSL praktisch für konsistente Paletten: Farbton bei 217 festhalten und die Helligkeit von 20 % (ein fast schwarzes Marineblau) bis 90 % (ein blasses Himmelblau) variieren, um eine passende Ton-in-Ton-Reihe derselben Farbfamilie zu erzeugen.

Gängige Referenzfarben

Name	HEX	RGB
Schwarz	#000000	rgb(0, 0, 0)
Weiß	#FFFFFF	rgb(255, 255, 255)
Rot	#FF0000	rgb(255, 0, 0)
Grün	#00FF00	rgb(0, 255, 0)
Blau	#0000FF	rgb(0, 0, 255)

Häufig gestellte Fragen

Welches Farbformat sollte ich in CSS verwenden?

Alle drei werden in jedem modernen Browser identisch dargestellt, es ist also eine Frage des Workflows. HEX ist kompakt und in Design-Tools weit verbreitet, RGB macht die Kanalwerte explizit und unterstützt rgba() für Transparenz, und HSL lässt sich am leichtesten von Hand anpassen, weil man Helligkeit oder Sättigung ändern kann, ohne alle drei Kanäle neu zu berechnen.

Werden meine Farben gespeichert oder hochgeladen?

Nein. Jede Umrechnung läuft direkt in Ihrem Browser als einfache Berechnung ab — nichts wird an einen Server gesendet oder gespeichert.

Was ist der Unterschied zwischen #FFF und #FFFFFF?

Keiner — #FFF ist eine CSS-Kurzform, bei der jede Ziffer verdoppelt wird, sodass #FFF, #ffFFFF und #FFFFFF alle reines Weiß ergeben. Dieses Tool akzeptiert sowohl 3- als auch 6-stellige Hex-Codes.

Wie füge ich Transparenz (Alpha) hinzu?

Fügen Sie einen vierten Kanal hinzu: rgba(59, 130, 246, 0.5) oder hsla(217, 91%, 60%, 0.5) für 50 % Deckkraft, oder einen 8-stelligen Hex-Code wie #3B82F680 (die zusätzlichen zwei Hex-Ziffern sind der Alphakanal, 00–FF). Dieser Konverter konzentriert sich auf das undurchsichtige RGB/HEX/HSL-Trio; fügen Sie Alpha bei Bedarf manuell hinzu.

Warum ergeben RGB und HSL für dieselbe Farbe so unterschiedlich aussehende Zahlen?

Es sind zwei Koordinatensysteme für denselben Punkt im Farbraum. RGB besteht aus additiven Lichtkanälen; HSL organisiert dieselbe Information in Farbton, Sättigung und Helligkeit um, was oft intuitiver ist, um einen Farbton auszuwählen oder anzupassen — zum Beispiel Farbton und Sättigung beibehalten und nur die Helligkeit erhöhen, um einen helleren Ton zu erhalten.

Sind Groß- oder Kleinbuchstaben bei Hex-Codes korrekt?

Beides funktioniert überall — Hex-Codes unterscheiden nicht zwischen Groß- und Kleinschreibung. Dieses Tool gibt der Lesbarkeit halber Großbuchstaben aus (#3B82F6), aber #3b82f6 ist exakt dieselbe Farbe.

Was passiert, wenn ich einen ungültigen Hex-Code eingebe?

Die RGB- und HSL-Felder bleiben einfach leer, bis Sie einen gültigen 3- oder 6-stelligen Hex-Wert eingeben (nur Buchstaben A–F/a–f und Ziffern 0–9, mit oder ohne führendes #).

Dieses Tool dient nur zur allgemeinen Information. Prüfen Sie wichtige Werte eigenständig. · Zuletzt geprüft: 25. August 2026