Farbcode-Konverter

Fügen Sie eine Farbe als Hex (#ff6600 oder #f60), rgb(255, 102, 0), durch Kommas getrennt 255, 102, 0 oder hsl(24, 100%, 50%) ein, und der Konverter gibt sie sofort in den beiden anderen Formaten zurück, mit Live-Farbmuster-Vorschau und Ein-Klick-Kopie pro Format.

Wie die Farbcode-Konvertierung funktioniert

  1. 1

    Geben Sie eine Farbe in einem unterstützten Format ein

    Hex (#abc, #abcdef), rgb(r, g, b), durch Kommas getrennt r, g, b oder hsl(h, s%, l%).

  2. 2

    In eine interne Darstellung geparst

    Das Tool konvertiert den Wert intern in RGB und leitet daraus die Hex- und HSL-Entsprechungen ab.

  3. 3

    Alle Formate angezeigt

    Die passenden Hex-, RGB- und HSL-Zeichenfolgen werden nebeneinander angezeigt.

  4. 4

    Live-Vorschau-Muster

    Zeigt die resultierende Farbe auf einen Blick, damit Sie die Konvertierung vor dem Kopieren bestätigen können.

Unterstützte Formate

Format Beispiel Verwendung
Hex 3 #F66 Abkürzung; nur für Farben mit wiederholten Ziffern
Hex 6 #FF6B6B Standard für CSS und Grafikdesign
RGB rgb(255, 107, 107) CSS, JS, Designsoftware
Durch Kommas getrennt 255, 107, 107 Wie RGB ohne Funktionssyntax
HSL hsl(0, 100%, 71%) Einfacher zu verstehen in Bezug auf Farbton/Sättigung/Helligkeit

Wann welches verwenden

  • Hex für statisches CSS und Designübergabe.
  • RGB, wenn Sie die Kanäle an JavaScript oder Designsoftware übergeben.
  • HSL beim Anpassen von Helligkeit oder Sättigung, das mentale Modell ist klarer als bei RGB.

Andere Formate wie HSV, CMYK, LAB, LCH und OKLCH existieren in Designwerkzeugen. Sie beschreiben dieselbe Farbe auf unterschiedliche Weise, aber dieser Konverter konzentriert sich auf die drei grundlegenden Web-Formate oben.

Genauigkeit

  • Die Konvertierungen zwischen Hex, RGB und HSL sind exakt: Hex und RGB sind dasselbe Farbmodell, und HSL wird mit einer Standardformel aus RGB abgeleitet.
  • HSL-Werte werden auf ganze Zahlen gerundet, daher kann eine Hin- und Rückkonvertierung die letzte Ziffer verschieben. Die sichtbare Farbe ist identisch; verwenden Sie Hex für bitgenaue Rundreisen.

Häufig gestellte Fragen

Hex oder rgb() für breite Kompatibilität. hsl(), wenn Sie Lesbarkeit möchten. Moderne Browser unterstützen auch oklch() und andere Formate, aber Hex bleibt der sicherste Standard.

Nein, der Konverter akzeptiert nur deckende Farben: Hex mit 3 oder 6 Ziffern, rgb() und hsl() ohne Alpha-Kanal. Verwenden Sie rgba() oder 8-stelliges Hex direkt in Ihrem CSS.

Nein, der Konverter akzeptiert nur die drei numerischen Formate. Nutzen Sie einen Farbwähler oder eine Online-Suche, um die benannte Farbe zuerst in Hex umzuwandeln.

HSL wird mit ganzzahligen Farbton-, Sättigungs- und Helligkeitswerten angezeigt, daher kann eine Rundreise den Wert um eine Stelle verschieben. Die sichtbare Farbe ist identisch; verwenden Sie Hex, wenn Sie eine exakte Kopie benötigen.

Verwandte Tools