Farb-Konverter

Im Trend 🔥

Farben zwischen HEX, RGB, HSL umrechnen

Entwickler-Tools

Verwendung von Farb-Konverter

  1. 1Farbe mit dem Farbwähler auswählen oder einen Wert in einem beliebigen Format eingeben
  2. 2Alle anderen Formate aktualisieren sich sofort
  3. 3Neben einem beliebigen Format auf Kopieren klicken

Über Farb-Konverter

Farbkonverter konvertiert Farben sofort zwischen allen gängigen CSS-Formaten — HEX, RGB, RGBA, HSL und HSLA. Geben Sie einen Wert in einem beliebigen unterstützten Format ein und alle anderen Darstellungen aktualisieren sich sofort, zusammen mit einer visuellen Farbvorschau.

Designer und Front-End-Entwickler müssen regelmäßig zwischen Farbformaten übersetzen: Design-Tools exportieren HEX, CSS-Properties bevorzugen RGBA für Transparenz, und HSL ist ideal für programmatische Farbmanipulation. Dieses Tool eliminiert die manuelle Berechnung und beseitigt eine häufige Fehlerquelle bei Konvertierungen.

Alle Konvertierungen laufen vollständig in Ihrem Browser ohne Server.

Hauptfunktionen von Farb-Konverter

  • Sofortige Konvertierung zwischen HEX, RGB, RGBA, HSL und HSLA
  • Beliebiges Format eingeben und alle anderen aktualisieren sich gleichzeitig
  • Visuelle Farbvorschau-Palette aktualisiert sich in Echtzeit
  • Browser-Farbwähler für interaktive Farbauswahl
  • Unterstützt 3-stellige (#RGB) und 6-stellige (#RRGGBB) HEX-Formate
  • Verarbeitet Alpha/Transparenz-Kanal in RGBA und HSLA
  • Ein-Klick-Kopie für jedes Farbformat
  • Läuft vollständig im Browser — keine Server-Anfragen

Unterstützte Formate

Eingabeformate

HEX (#RRGGBB, #RGB)RGB (rgb(r, g, b))RGBA (rgba(r, g, b, a))HSL (hsl(h, s%, l%))HSLA (hsla(h, s%, l%, a))

Ausgabeformate

HEXRGBRGBAHSLHSLA

Geben Sie einen Wert in einem beliebigen Format ein und alle anderen Formate aktualisieren sich sofort. Benannte CSS-Farben (wie "cornflowerblue") werden derzeit nicht als Eingabe unterstützt.

Beispiele

Figma-HEX-Farbe in HSL für CSS konvertieren

Design-Tool-HEX-Wert in HSL für die Verwendung in CSS-Custom-Properties übersetzen.

Eingabe

#3B82F6

Ausgabe

RGB: rgb(59, 130, 246) | HSL: hsl(217, 91%, 60%) | HSLA: hsla(217, 91%, 60%, 1)

Transparenz zu einer RGB-Farbe hinzufügen

RGBA-Äquivalent einer soliden Farbe mit 50% Opazität für eine halbtransparente Überlagerung erhalten.

Eingabe

rgb(0, 0, 0) mit Alpha 0.5

Ausgabe

RGBA: rgba(0, 0, 0, 0.5) | HEX mit Alpha: #00000080

Typische Anwendungsfälle

  • Übersetzung von HEX-Farben aus Design-Tools (Figma, Sketch) in CSS RGB oder HSL
  • Konvertierung solider Farben in RGBA für halbtransparente Überlagerungen
  • Verwendung von HSL-Werten für programmatisches Aufhellen und Abdunkeln in CSS
  • Verbindung von Farbformaten zwischen Front-End-Code und Back-End-APIs
  • Überprüfung dass verschiedene Formatdarstellungen einer Farbe äquivalent sind
  • Schnelle Überprüfung der RGB-Werte einer HEX-Farbe in einer Design-Spezifikation

Fehlerbehebung

HEX-Wert erzeugt andere Farbe als erwartet

Lösung

HEX-Werte müssen genau 3 oder 6 Hexadezimalziffern nach dem # sein. #FF0 (3-stellig) und #FF0000 (6-stellig) sind beide gültiges Rot.

HSL-Farbtonwert ist außerhalb des Bereichs

Lösung

HSL-Farbton ist ein Wert von 0 bis 360 Grad. Sättigung und Helligkeit sind Prozentsätze (0-100%).

Alpha-Wert in RGBA/HSLA funktioniert nicht

Lösung

Alpha ist ein Wert von 0 (vollständig transparent) bis 1 (vollständig opak). Verwenden Sie eine Dezimalzahl zwischen 0 und 1, keinen Prozentsatz.

Häufig gestellte Fragen

Welche Farbformate werden unterstützt?

HEX (#RRGGBB und #RGB), RGB, RGBA, HSL und HSLA. Beliebiges Format eingeben und alle anderen werden sofort berechnet.

Was ist der Unterschied zwischen RGB und HSL?

RGB definiert Farben als Intensitäten von rotem, grünem und blauem Licht. HSL definiert Farben durch Farbton (0-360°), Sättigung (0-100%) und Helligkeit (0-100%).

Wann sollte ich RGBA statt HEX verwenden?

Verwenden Sie RGBA wenn Sie Transparenz (Alpha-Kanal) benötigen. RGBA ist das universell kompatibelste Format für transparente Farben in CSS.

Was repräsentiert der Alpha-Wert in RGBA?

Alpha repräsentiert Opazität: 0 ist vollständig transparent, 1 ist vollständig opak. Werte wie 0,5 geben 50% Transparenz.

Kann ich CSS-benannte Farben wie 'cornflowerblue' konvertieren?

Benannte CSS-Farben werden derzeit nicht als Eingabe unterstützt. Finden Sie den HEX-Wert in einer CSS-Referenz und geben Sie ihn zur Konvertierung ein.

Gibt es einen Unterschied zwischen HEX-Kurzschreibweise (#RGB) und vollem HEX (#RRGGBB)?

#RGB ist Kurzschreibweise wo jede Ziffer verdoppelt wird. #F80 entspricht #FF8800. Kurzschreibweise ist nur gültig wenn beide Ziffern jedes Paares identisch sind.

Werden meine Daten an einen Server gesendet?

Nein. Alle Konvertierungen werden lokal in Ihrem Browser mit JavaScript-Mathematik durchgeführt.

Kann ich damit die HSL-Helligkeit einer Farbe finden?

Ja. Geben Sie den HEX- oder RGB-Wert ein und der HSL-Output zeigt den Helligkeitsprozentsatz.