So konvertieren Sie Farben zwischen HEX, RGB und HSL
Schnelle Antwort
So konvertieren Sie eine Farbe: Öffnen Sie den Farbkonverter, geben Sie eine Farbe in einem beliebigen Format ein (HEX, RGB, HSL), und das Tool zeigt sofort das Äquivalent in allen anderen Formaten an. Die gesamte Konvertierung erfolgt lokal in Ihrem Browser – es werden keine Daten hochgeladen.
Einführung
Farben können in mehreren Formaten dargestellt werden: HEX (#ff6600), RGB (rgb(255, 102, 0)), HSL (hsl(24, 100 %, 50 %)) und andere. Unterschiedliche Tools und Kontexte verwenden unterschiedliche Formate – CSS verwendet häufig HEX oder RGB, Design-Tools verwenden möglicherweise HSL und APIs verwendet möglicherweise jedes andere. Durch die Konvertierung zwischen Formaten können Sie eine in einem System definierte Farbe in einem Kontext verwenden, der ein anderes erfordert. Diese Anleitung zeigt Ihnen, wie Sie Farben in Ihrem Browser konvertieren.
Schritt für Schritt
-
Öffnen Sie das Farbkonverter-Tool
Gehen Sie zur Tool-Seite „Farbkonverter“. Das Tool unterstützt die Formate HEX, RGB, HSL, HSV und CMYK.
-
Geben Sie Ihre Farbe ein
Geben oder fügen Sie einen Farbwert in einem beliebigen unterstützten Format ein. Beispiele: „#ff6600“, „rgb(255, 102, 0)“, „hsl(24, 100 %, 50 %)“. Das Tool erkennt das Eingabeformat automatisch.
-
Überprüfen Sie alle Formatäquivalente
Das Tool zeigt die Farbe in allen Formaten gleichzeitig an: HEX, RGB, HSL, HSV und CMYK. Außerdem wird ein Farbvorschaumuster angezeigt, damit Sie überprüfen können, ob die Konvertierung korrekt ist.
-
Kopieren Sie das benötigte Format
Klicken Sie neben einem beliebigen Format auf die Schaltfläche „Kopieren“, um diesen Wert in Ihre Zwischenablage zu kopieren. Verwenden Sie es in Ihrem CSS, Design-Tool oder Ihrer Anwendung.
-
Passen Sie die Farbe an (optional)
Mit einigen Tools können Sie die Farbe mit Schiebereglern anpassen (für HSL: Farbton, Sättigung, Helligkeit) und alle Formate in Echtzeit aktualisieren. Dies ist nützlich, um verwandte Farben oder Schattierungen zu finden.
Beispiele
HEX bis RGB und HSL
Eingang: #ff6600
Ausgabe: RGB: rgb(255, 102, 0)
HSL: hsl(24, 100 %, 50 %)
RGB bis HEX
Eingang: RGB(0, 128, 255)
Ausgabe: HEX: #0080ff
HSL: hsl(210, 100 %, 50 %)
HSL bis HEX
Eingang: hsl(120, 100 %, 50 %)
Ausgabe: HEX: #00ff00
RGB: rgb(0, 255, 0)
Häufige Probleme
- HEX mit vs ohne # – einige Tools erfordern das #-Präfix, andere nicht. Unser Konverter akzeptiert beides.
- 3-stellig vs. 6-stellig HEX – #f60 ist die Abkürzung für #ff6600. Beides ist gültig; Der Konverter normalisiert auf 6 Ziffern.
- HSL Farbtonbereich – der Farbton beträgt 0–360 Grad (ein Kreis). 0 und 360 sind beide rot. Werte über 360 werden umgebrochen.
- Farbraumunterschiede – HEX, RGB und HSL sind alle sRGB. CMYK ist ein anderer Farbraum (Druck) und die Konvertierung ist ungefähr.
Tipps
- Verwenden Sie HSL zum Erstellen von Farbvariationen – das Anpassen von Farbton, Sättigung oder Helligkeit ist intuitiver als RGB.
- Verwenden Sie HEX für CSS – es ist das kompakteste und am weitesten unterstützte Format in Stylesheets.
- Verwenden Sie RGB, wenn Sie Alpha-Transparenz festlegen müssen – rgb(255, 102, 0, 0,5) für 50 % Deckkraft (oder verwenden Sie 8-stelliges HEX: #ff660080).
- Nutzen Sie unseren Farbkonverter für die sofortige, private Konvertierung zwischen allen Farbformaten.