Farbkonverter — HEX, RGB, HSL & HSV mit Ein-Klick-Kopieren

So funktioniert es

• Gib eine Farbe auf drei Arten ein: tippe einen HEX-Code oder CSS-Farbnamen, nutze den Farbwähler, oder ziehe die Regler für Farbton/Sättigung/Helligkeit/Alpha.
• Ändere einen beliebigen Wert und HEX, RGB, HSL, HSV und RGBA aktualisieren sich gleichzeitig – ohne Umrechnen-Knopf und in jede Richtung.
• Klicke auf den Kopieren-Knopf neben einem Format, um es in die Zwischenablage zu kopieren; ein „Kopiert!“ erscheint.
• Senke den Alpha-Regler, um eine transparente Farbe zu erzeugen – die Vorschau zeigt ein Schachbrettmuster für die Transparenz.
• Im Kontrast-Bereich siehst du das WCAG-Verhältnis und ob AA/AAA bestanden wird. Ohne Installation, ohne Anmeldung – Farben werden lokal berechnet und nicht hochgeladen.

Unterstützte Farbformate

HEX (hexadezimaler Farbcode)

HEX ist die häufigste Schreibweise für Farben im Web, etwa #RRGGBB (und die Kurzform #RGB). HEX in RGB oder HEX in HSL umzurechnen dauert hier nur Sekunden. Für Transparenz nutzt HEX8 #RRGGBBAA, wobei das letzte Paar der Alphakanal ist.

RGB / RGBA (Rot, Grün, Blau + Alpha)

RGB beschreibt eine Farbe mit Rot, Grün und Blau von 0 bis 255, etwa rgb(124, 58, 237). RGBA fügt einen vierten Wert hinzu, das Alpha (0–1), für Transparenz, zum Beispiel rgba(124, 58, 237, 0.5). Tippe die RGB-Werte und HEX sowie HSL aktualisieren sich sofort (RGB in HEX, RGB in HSL).

HSL / HSLA (Farbton, Sättigung, Helligkeit)

HSL nutzt Farbton (0–360°), Sättigung (0–100%) und Helligkeit (0–100%), wodurch sich intuitiv einstellen lässt, wie hell oder kräftig eine Farbe ist. Es wird in CSS häufig verwendet und HSLA fügt den Alphakanal hinzu. HEX in HSL ist praktisch, wenn du nur die Helligkeit anpassen willst.

HSV (Farbton, Sättigung, Hellwert)

HSV (auch HSB genannt) nutzt Farbton, Sättigung und Wert (Helligkeit). Es ist in Design- und Farbwähler-Tools verbreitet, aber keine offizielle CSS-Schreibweise, daher zeigen wir es als Referenzwert. Für CSS nutze HEX, RGB oder HSL.

Funktionen

Gleichzeitige Anzeige & Umrechnung in beide Richtungen

Alle Formate werden zusammen auf einem Bildschirm gezeigt, und das Ändern eines Werts aktualisiert die anderen sofort: HEX in RGB, RGB in HEX, HEX in HSL, HSL in HEX und jede weitere Richtung. Kein Umrechnen-Knopf nötig.

Kopieren mit einem Klick

Jedes Format hat einen Kopieren-Knopf. Klicke darauf, um den Wert in die Zwischenablage zu kopieren – mit einem klaren „Kopiert!“ zur Bestätigung.

Farbwähler und Schieberegler

Nutze den nativen Farbwähler sowie die Regler für Farbton, Sättigung, Helligkeit (oder Wert) und Alpha, um Farben visuell zu wählen und alle Formate mitlaufen zu sehen.

Transparenz (Alpha) unterstützt

Erstelle halbtransparente Farben und erhalte RGBA, HSLA und HEX8 (#RRGGBBAA). Der Alpha-Regler reicht von 0 bis 100% und die Vorschau nutzt ein Schachbrettmuster, um die Transparenz zu zeigen.

Kontrastverhältnis & WCAG-Prüfung

Das Tool berechnet das Kontrastverhältnis zwischen deiner Farbe und einem Hintergrund (Weiß, Schwarz oder eigene Farbe) und zeigt, ob WCAG AA/AAA erfüllt ist (4,5:1 für normalen Text, 3:1 für großen Text). Ergebnisse werden mit Farbe und Text angezeigt, nicht nur mit Farbe.

Anwendungsfälle

Ein HEX in CSS-RGB / HSL umwandeln

Ein HEX aus einem Design? Wandle es in rgb() oder hsl() um und kopiere es für dein CSS. Mit HSL kannst du nur die Helligkeit für Hover- und Aktiv-Zustände feinjustieren.

Transparente Farben erstellen (RGBA / HSLA)

Erstelle eine halbtransparente Farbe wie rgba(0, 0, 0, 0.5) mit dem Alpha-Regler und kopiere sie – ideal für Overlays, Schatten und dezente Hintergründe.

Eine barrierefreie Farbkombination prüfen

Prüfe, dass deine Text- und Hintergrundfarben den WCAG-AA-Kontrast erfüllen, damit dein Inhalt für alle lesbar bleibt.

Hinweise & Tipps

• HEX, RGB, HSL und HSV sind nur verschiedene Schreibweisen derselben Farbe, daher lassen sie sich hin und her umrechnen (kleine Rundungsabweichungen möglich).
• HSV ist keine offizielle CSS-Schreibweise – es wird zur Referenz gezeigt. Verwende in deinen Stylesheets HEX, RGB oder HSL.
• Wir geben bewusst kein CMYK aus: Eine exakte Bildschirm-zu-Druck-Umrechnung hängt von Farbprofilen, Papier und Druckmaschine ab, eine einfache Formel liefert daher irreführende Werte. Für den Druck nutze ein echtes Farbmanagement.
• Kontrast ist ein Richtwert: Die WCAG-Formel ist exakt, die tatsächliche Lesbarkeit hängt aber auch von Schrift, Größe und Umgebungsfarben ab.
• Deine Farben werden nirgendwohin gesendet – alle Umrechnungen erfolgen lokal in deinem Browser.

Häufige Fragen

Kann ich HEX in RGB umwandeln (und umgekehrt)?

Ja. Gib einen Wert ein und er wird in alle Richtungen gleichzeitig umgerechnet: HEX in RGB, RGB in HEX, HEX in HSL, HSL in HEX sowie HSV und RGBA. Kein Umrechnen-Knopf; die anderen Formate aktualisieren sich sofort.

Werden RGBA und HSLA mit Transparenz unterstützt?

Ja. Nutze den Alpha-Regler, um die Transparenz einzustellen, und erhalte RGBA, HSLA und HEX8 (#RRGGBBAA). Die Vorschau zeigt ein Schachbrettmuster, um die Transparenz sichtbar zu machen.

Wie kopiere ich einen Wert?

Klicke auf den Kopieren-Knopf neben einem beliebigen Format. Der Wert wird in die Zwischenablage kopiert und eine „Kopiert!“-Meldung bestätigt es.

Kann ich Namen wie red oder rebeccapurple verwenden?

Ja. Standard-CSS-Farbnamen werden in der Eingabe akzeptiert und in HEX, RGB, HSL und HSV umgewandelt; rebeccapurple wird zum Beispiel zu #663399.

Kann es in CMYK umwandeln?

Nein, mit Absicht. Exaktes CMYK hängt von Farbprofilen, Papier und Druckmaschine ab, eine einfache Formel würde irreführende Werte erzeugen. Für den Druck nutze dedizierte Farbmanagement-Tools.

Wie nutze ich das Kontrastverhältnis?

Es vergleicht deine Textfarbe mit einem Hintergrund und zeigt, ob WCAG AA/AAA erfüllt ist. Nutze es, um sicherzustellen, dass deine Farbkombinationen lesbar und barrierefrei sind.

Werden meine Farben an einen Server gesendet?

Nein. Alle Umrechnungen laufen lokal in deinem Browser. Deine Farben werden nie hochgeladen oder gespeichert.