Farbe & Design

HEX / RGB / HSL Farbkonverter

Übersetzen Sie jede Farbe zwischen HEX, RGB und HSL mit Live-Schiebereglern, einem interaktiven Farbwähler und kopierbereiten CSS-Strings — alles in Ihrem Browser berechnet.

Current color

#1A73E8

rgb(26, 115, 232)

HEX or color picker

RGB channels

HSL channels

Copy as

HEX

#1A73E8

RGB

rgb(26, 115, 232)

HSL

hsl(214, 82%, 51%)

Contrast snapshot

WCAG ratio of this color against pure white and pure black backgrounds.

On white (#FFFFFF)4.51:1

On black (#000000)4.66:1

Was ist ein Farbkonverter?

Ein Farbkonverter übersetzt zwischen den drei Formaten, die Designer und Entwickler täglich verwenden: HEX (#RRGGBB) für Stylesheets, RGB (rot, grün, blau 0–255) für Leinwände und Bildbearbeitung, und HSL (Farbton, Sättigung, Helligkeit) für intuitives Bearbeiten. Sie beschreiben alle denselben Punkt im sRGB-Farbraum — sie tauschen nur Lesbarkeit gegen Mathematik ein. Dieses Tool hält die drei synchron, während Sie eines von ihnen bearbeiten, zeigt eine Live-Farbe und berichtet einen schnellen WCAG-Kontrast-Snapshot, damit Sie wissen, ob die Farbe für Fließtext auf Weiß oder Schwarz sicher ist. Alles läuft lokal in Ihrem Browser; keine Farbe wird jemals hochgeladen oder protokolliert.

Wie man eine Farbe konvertiert

1
Wählen Sie ein Ausgangsformat
Fügen Sie einen HEX-Wert ein (mit oder ohne das führende #), ziehen Sie den nativen Farbwähler oder stellen Sie RGB / HSL-Kanäle mit den Schiebereglern oder numerischen Eingaben ein.
2
Beobachten Sie die Farbprobe-Updates
Die große Farbprobe und das HEX-Label werden bei jedem Tastendruck oder Schieberegler-Ziehen aktualisiert, sodass Sie die Farbe sehen können, bevor Sie sich dafür entscheiden.
3
Lesen Sie die anderen beiden Formate
Welches Format Sie auch bearbeitet haben, die anderen beiden werden sofort im Abschnitt 'Kopieren als' neu berechnet — HEX, rgb(...) und hsl(...) bereit zum Einfügen in CSS, Design-Tools oder Code.
4
Kopieren Sie den Wert, den Sie benötigen
Klicken Sie auf Kopieren in einer beliebigen Zeile, um diesen String in Ihre Zwischenablage zu kopieren. Der Button bestätigt mit einem Häkchen für 1,5 Sekunden.
5
Überprüfen Sie den Kontrast
Die Kontrastaufnahme zeigt das WCAG-Verhältnis Ihrer Farbe gegen reines Weiß und reines Schwarz. Wenn Sie vollständige WCAG AA / AAA-Urteile gegen einen benutzerdefinierten Hintergrund benötigen, springen Sie zum Kontrastprüfer-Tool, das unten verlinkt ist.

Mathematik der Farbkonvertierung

HEX → RGB:
  R = parseInt(hex[0..1], 16)
  G = parseInt(hex[2..3], 16)
  B = parseInt(hex[4..5], 16)
 
RGB → HSL (jeder Kanal skaliert auf 0–1):
  max = max(R, G, B); min = min(R, G, B)
  L   = (max + min) / 2
  S   = L > 0.5 ? (max − min) / (2 − max − min) : (max − min) / (max + min)
  H hängt davon ab, welcher Kanal max ist:
    R: H = 60 · ((G − B) / (max − min) mod 6)
    G: H = 60 · ((B − R) / (max − min) + 2)
    B: H = 60 · ((R − G) / (max − min) + 4)

HEX ist einfach RGB, das in Basis 16 geschrieben ist — drei Paare von Hex-Ziffern, eines pro Kanal, in einen einzigen String gepackt. HSL ist eine wahrnehmungsbasierte Umformung des gleichen RGB-Würfels: Farbton (0–360°) wählt eine Scheibe des Farbkreises, Sättigung (0–100%) ist, wie lebhaft im Vergleich zu grau es ist, und Helligkeit (0–100%) ist, wie nah es an Weiß oder Schwarz ist. Die oben genannten Konversionen sind verlustfrei modulo Runden, sodass HEX ↔ RGB ↔ HSL ↔ HEX den gleichen Wert zurückgeben sollte.

Referenz: CSS-Farbmodul Level 4 — sRGB

Beispiele

Eingabe	Entsprechende Formate
#1A73E8	rgb(26, 115, 232) · hsl(214, 82%, 51%) Google Blau — ein beliebter Link- / Primärfarben-Ton.
rgb(255, 105, 180)	#FF69B4 · hsl(330, 100%, 71%) CSS benannte Farbe heißes Pink, auf drei Arten ausgedrückt.
hsl(120, 73%, 75%)	#9EE89E · rgb(158, 232, 158) Ein Pastellgrün — leicht einzustellen, indem der L-Schieberegler angehoben wird.
#03A	#0033AA · rgb(0, 51, 170) · hsl(222, 100%, 33%) Drei Ziffern Kurzform erweitern sich auf ihr sechsstellige Äquivalent.

Häufige Anwendungsfälle

Übersetzen Sie eine HEX-Farbprobe aus einer Figma-Datei in rgb() oder hsl() für eine CSS-Variable
Wählen Sie einen Farbton mit dem H-Schieberegler, und justieren Sie dann S und L, um einen Markenfarbton einzustellen
Konvertieren Sie RGB-Werte aus einem Grafik-Tool oder Screenshot-Wähler in das HEX, das Ihr Stylesheet erwartet
Überprüfen Sie schnell, ob eine potenzielle Markenfarbe genügend Kontrast zu Weiß oder Schwarz hat
Erstellen Sie eine tonale Skala, indem Sie den Farbton konstant halten und den Helligkeitskanal schrittweise erhöhen
Überprüfen Sie einen Farbnamen, den Ihr Designer erwähnt hat, gegen das tatsächliche HEX im Code
Konvertieren Sie eine 3-stellige Kurzform (#03A) in die kanonische 6-stellige Form (#0033AA)

Häufig gestellte Fragen

Wird meine Farbdaten an einen Server gesendet?

Nein. Alle Umrechnungen laufen in Ihrem Browser. Nichts, was Sie eingeben, ziehen oder einfügen, wird hochgeladen oder protokolliert.

Was ist der Unterschied zwischen RGB und HSL?

RGB beschreibt eine Farbe als die Menge an rotem, grünem und blauem Licht, das gemischt wird (0–255 pro Kanal) — so geben Monitore tatsächlich Farbe aus. HSL beschreibt dieselbe Farbe in Begriffen, über die Menschen nachdenken: Farbton (0–360°), Sättigung (0–100%) und Helligkeit (0–100%). Sie konvertieren verlustfrei, also verwenden Sie, was für die Aufgabe einfacher ist: RGB für Bilddaten, HSL für die Bearbeitung von Paletten.

Warum zeigt HSL einen Farbton von 0 für Grautöne?

Reine Grautöne haben null Sättigung, daher ist der Farbton undefiniert — nach Konvention fällt er auf 0°. Das Verschieben des Farbtons, während die Sättigung 0 ist, ändert die Farbe nicht, bis Sie die Sättigung über null erhöhen.

Unterstützt dieses Tool Alpha (Transparenz)?

Noch nicht. Die aktuelle Version verarbeitet nur vollständig opake Farben — die abgedeckten Formate sind #RRGGBB, rgb(r, g, b) und hsl(h, s%, l%). Alpha (#RRGGBBAA, rgba(), hsla()) steht auf der Roadmap, wenn es Nachfrage gibt.

Was ist der Unterschied zwischen HSL und HSV?

HSL und HSV teilen sich die Farbton- und Sättigungsachsen, behandeln jedoch das dritte unterschiedlich: HSLs Helligkeit ist zentriert (50% ist vollständig gesättigt, 100% ist weiß, 0% ist schwarz), während HSVs Wert von 0 (schwarz) bis 100% (der reine Farbton, kein Weiß hinzugefügt) reicht. HSL fühlt sich oft natürlicher an, um Tönungen und Schattierungen auszuwählen — weshalb CSS es verwendet.

Warum könnte mein eingefügtes HEX abgelehnt werden?

Der Parser akzeptiert 3-stellige Kurzformen (#03A), 6-stellige kanonische Formen (#0033AA) und beide Formen ohne das führende #. Alles andere — 4-stellige Alpha, 8-stellige Alpha, benannte Farben oder rgb()/hsl() Strings — wird als ungültig markiert. Lassen Sie das Alpha weg oder verwenden Sie ein HEX mit 3 oder 6 Hex-Ziffern.

Ist HEX genauer als RGB?

Nein — HEX ist nur RGB, das in Basis 16 geschrieben ist, daher haben sie genau die gleiche Präzision (8 Bit pro Kanal, ~16,7 Millionen Farben). Browser und Designwerkzeuge konvertieren intern von einem zum anderen; wählen Sie, was in Ihrem Kontext einfacher zu lesen ist.

Wie mache ich eine Farbe heller oder dunkler?

Wechseln Sie zur HSL-Ansicht und verschieben Sie den L (Helligkeit) Kanal — das ist sein ganzes Ziel. Das Senken von L macht dunkler, das Erhöhen von L macht heller. Die Sättigung kann konstant bleiben, was die Identität der Farbe bewahrt, während sich ihr Ton verschiebt.

Zuletzt aktualisiert 2026-04-25

Was ist ein Farbkonverter?

Wie man eine Farbe konvertiert

Wählen Sie ein Ausgangsformat

Fügen Sie einen HEX-Wert ein (mit oder ohne das führende #), ziehen Sie den nativen Farbwähler oder stellen Sie RGB / HSL-Kanäle mit den Schiebereglern oder numerischen Eingaben ein.

Beobachten Sie die Farbprobe-Updates

Die große Farbprobe und das HEX-Label werden bei jedem Tastendruck oder Schieberegler-Ziehen aktualisiert, sodass Sie die Farbe sehen können, bevor Sie sich dafür entscheiden.

Lesen Sie die anderen beiden Formate

Welches Format Sie auch bearbeitet haben, die anderen beiden werden sofort im Abschnitt 'Kopieren als' neu berechnet — HEX, rgb(...) und hsl(...) bereit zum Einfügen in CSS, Design-Tools oder Code.

Kopieren Sie den Wert, den Sie benötigen

Klicken Sie auf Kopieren in einer beliebigen Zeile, um diesen String in Ihre Zwischenablage zu kopieren. Der Button bestätigt mit einem Häkchen für 1,5 Sekunden.

Überprüfen Sie den Kontrast

Die Kontrastaufnahme zeigt das WCAG-Verhältnis Ihrer Farbe gegen reines Weiß und reines Schwarz. Wenn Sie vollständige WCAG AA / AAA-Urteile gegen einen benutzerdefinierten Hintergrund benötigen, springen Sie zum Kontrastprüfer-Tool, das unten verlinkt ist.

Mathematik der Farbkonvertierung

HEX → RGB:
  R = parseInt(hex[0..1], 16)
  G = parseInt(hex[2..3], 16)
  B = parseInt(hex[4..5], 16)
 
RGB → HSL (jeder Kanal skaliert auf 0–1):
  max = max(R, G, B); min = min(R, G, B)
  L   = (max + min) / 2
  S   = L > 0.5 ? (max − min) / (2 − max − min) : (max − min) / (max + min)
  H hängt davon ab, welcher Kanal max ist:
    R: H = 60 · ((G − B) / (max − min) mod 6)
    G: H = 60 · ((B − R) / (max − min) + 2)
    B: H = 60 · ((R − G) / (max − min) + 4)

Beispiele

Eingabe	Entsprechende Formate
#1A73E8	rgb(26, 115, 232) · hsl(214, 82%, 51%) Google Blau — ein beliebter Link- / Primärfarben-Ton.
rgb(255, 105, 180)	#FF69B4 · hsl(330, 100%, 71%) CSS benannte Farbe heißes Pink, auf drei Arten ausgedrückt.
hsl(120, 73%, 75%)	#9EE89E · rgb(158, 232, 158) Ein Pastellgrün — leicht einzustellen, indem der L-Schieberegler angehoben wird.
#03A	#0033AA · rgb(0, 51, 170) · hsl(222, 100%, 33%) Drei Ziffern Kurzform erweitern sich auf ihr sechsstellige Äquivalent.

Häufige Anwendungsfälle

Übersetzen Sie eine HEX-Farbprobe aus einer Figma-Datei in rgb() oder hsl() für eine CSS-Variable

Wählen Sie einen Farbton mit dem H-Schieberegler, und justieren Sie dann S und L, um einen Markenfarbton einzustellen

Konvertieren Sie RGB-Werte aus einem Grafik-Tool oder Screenshot-Wähler in das HEX, das Ihr Stylesheet erwartet

Überprüfen Sie schnell, ob eine potenzielle Markenfarbe genügend Kontrast zu Weiß oder Schwarz hat

Erstellen Sie eine tonale Skala, indem Sie den Farbton konstant halten und den Helligkeitskanal schrittweise erhöhen

Überprüfen Sie einen Farbnamen, den Ihr Designer erwähnt hat, gegen das tatsächliche HEX im Code

Konvertieren Sie eine 3-stellige Kurzform (#03A) in die kanonische 6-stellige Form (#0033AA)

Häufig gestellte Fragen

Wird meine Farbdaten an einen Server gesendet?

Nein. Alle Umrechnungen laufen in Ihrem Browser. Nichts, was Sie eingeben, ziehen oder einfügen, wird hochgeladen oder protokolliert.

Was ist der Unterschied zwischen RGB und HSL?

Warum zeigt HSL einen Farbton von 0 für Grautöne?

Unterstützt dieses Tool Alpha (Transparenz)?

Was ist der Unterschied zwischen HSL und HSV?

Warum könnte mein eingefügtes HEX abgelehnt werden?

Ist HEX genauer als RGB?

Wie mache ich eine Farbe heller oder dunkler?

HEX / RGB / HSL Farbkonverter

RGB channels

HSL channels

Copy as

Contrast snapshot

Was ist ein Farbkonverter?

Wie man eine Farbe konvertiert

Mathematik der Farbkonvertierung

Beispiele

Häufige Anwendungsfälle

Verwandte Werkzeuge

Häufig gestellte Fragen

HEX / RGB / HSL Farbkonverter

RGB channels

HSL channels

Copy as

Contrast snapshot

Was ist ein Farbkonverter?

Wie man eine Farbe konvertiert

Mathematik der Farbkonvertierung

Beispiele

Häufige Anwendungsfälle

Verwandte Werkzeuge

Häufig gestellte Fragen