Über Farbkonverter

Farbkonverter wandelt Farben zwischen HEX, RGB, HSL und HSV für Frontend-CSS, Designübergabe und Pflege von Theme-Tokens um.

Geben Sie #4f46e5, rgb(...) oder hsl(...) ein, um kopierbare Formate zu erhalten.

So nutzen Sie Farbkonverter

Fügen Sie einen HEX-, RGB-, RGBA-, HSL- oder HSLA-Wert ein.
Konvertieren und prüfen Sie HEX-, RGB-, HSL- und HSV-Ausgaben.
Nutzen Sie die Farbvorschau und kopieren Sie ein Format oder alle Formate.

Typische Einsatzfälle

Einen Design-HEX-Wert in CSS rgb() oder hsl() umwandeln.
Lightness und Saturation in HSL für Hover-Zustände anpassen.
Farb-Tokens beim Bereinigung des Themes normalisieren.

Farbformate und Hinweise

HEX, RGB, HSL und HSV beschreiben dieselbe Farbe über verschiedene Koordinaten. Der Converter erhält die RGB-Farbe; Alpha aus RGBA oder HSLA wird akzeptiert, aber nicht in der Ausgabe bewahrt.

3-stelliges HEX wird zu 6-stelligem HEX erweitert.
RGB-Kanäle müssen zwischen 0 und 255 liegen.
HSL nutzt Prozentwerte für S/L; Hue läuft über 0 bis 360 Grad.
HSV ist üblich in Pickern, HSL oft besser für CSS-Theme-Tuning.

Häufige Fragen zu Farbkonverter

Kann er HEX to RGB und RGB to HEX?: Ja. HEX-Eingabe erzeugt RGB/HSL/HSV, RGB-Eingabe erzeugt HEX/HSL/HSV.
Warum fehlt Alpha im Ergebnis?: Das Werkzeug fokussiert deckende Farben, daher wird RGBA/HSLA-Alpha ignoriert.
Werden meine Farben hochgeladen?: Nein. Parsing, Konvertierung, Preview und Kopieren laufen lokal im Browser.

Farbkonvertierung und Lesbarkeit

Ein anderes Format garantiert keinen Kontrast. Prüfen Sie Text, Buttons oder Links auf echtem Hintergrund auf WCAG-Kontrast, Markenwirkung und UI-Zustände.

CSS-Farbformat richtig wählen

Dieselbe Farbe kann als HEX, RGB, HSL oder HSV geschrieben werden, aber jedes Format passt zu anderen Wartungsaufgaben.

HEX eignet sich für kompakte Werte für die Designübergabe und stabile Theme-Tokens.
CSS rgb() oder hsl() ist besser für Alpha, Variablen oder dynamische Zusammensetzung.
HSL hilft bei hover, active, helleren oder dunkleren Varianten, weil hue, saturation und lightness leichter verständlich sind als roh RGB.

Accessibility-Checks vor dem Einsatz

Farbkonvertierung hält Werte äquivalent, beweist aber keine Lesbarkeit, klare Zustände oder Kontrastkonformität.

Text und Button-Text auf echtem Hintergrund mit WCAG-Kontrastregeln prüfen.
Fehler, Erfolg oder disabled state nicht nur über Farbe kommunizieren; Text, Icons oder Formänderungen ergänzen.
Brand colors für Links oder focus rings auch in hover, active, disabled und selected states prüfen.