HEX-Farbe in RGB und HSL umrechnen

Um einen Farbwert präzise zu übertragen oder zu analysieren, geben Sie einen drei- oder sechsstelligen Hexadezimalcode in das Feld ein und wählen das gewünschte Format wie all, hex, rgb oder hsl. Das Werkzeug berechnet sofort die entsprechenden Farbmodelle sowie einen gewichteten Helligkeitswert.

Hexadezimale Farbcodes flexibel konvertieren

Im Webdesign und in der Softwareentwicklung begegnen Ihnen unterschiedliche Farbdefinitionen. Während HTML und CSS oft mit kompakten HEX-Codes arbeiten, verlangen Bildbearbeitungsprogramme oder dynamische Skripte häufig RGB- oder HSL-Werte. Der Farbwähler und Farbkonverter wandelt Hexadezimalwerte direkt im Browser in die passenden Zielformate um.

Das Werkzeug verarbeitet sowohl Standardwerte mit sechs Stellen als auch dreistellige Kurzschreibweisen. Eine dreistellige Angabe wie #f80 wird automatisch zu #ff8800 vervollständigt. Neben den Farbformaten liefert die Berechnung einen Helligkeitsschätzwert auf einer Skala von 0 bis 255. Dieser basiert auf den gewichteten RGB-Kanälen und erleichtert die erste Einschätzung der Farbintensität.

Schritt für Schritt: So wandeln Sie Farbwerte um

1. Tragen Sie Ihren HEX-Code in das vorgesehene Eingabefeld ein. Sie können den Wert mit oder ohne vorangestelltes Doppelkreuz eingeben, zum Beispiel #3498db oder 3498db.
2. Wählen Sie im Menü das gewünschte Ausgabeformat. Die Standardeinstellung all zeigt alle Darstellungen parallel an. Alternativ grenzen Sie das Resultat gezielt auf hex, rgb oder hsl ein.
3. Starten Sie die Umwandlung. Das System prüft die Zeichenfolge auf Gültigkeit und berechnet die Farbkanäle.
4. Kopieren Sie den generierten Farbcode in die Zwischenablage und fügen Sie ihn direkt in Ihr Stylesheet oder Grafikprogramm ein.

Wenn Sie stattdessen Farbwerte direkt aus einer bestehenden Grafikdatei ermitteln möchten, hilft Ihnen die Funktion Farbpalette aus Bild erstellen.

Ergebnis und Helligkeitswert richtig interpretieren

Das Ergebnis liefert Ihnen exakte Werte für die gewählte Darstellung:

• HEX: Gibt den Code in standardisierter Kleinbuchstabenschreibweise mit vorangestelltem Doppelkreuz aus.
• RGB: Stellt die ganzzahligen Werte für Rot, Grün und Blau auf einer Skala von 0 bis 255 dar.
• HSL: Liefert den Farbton als Gradzahl (0 bis 360) sowie Sättigung und Helligkeit als Prozentwerte.
• Helligkeit: Zeigt eine Schätzung von 0 bis 255, basierend auf der Formel 0,299 mal Rot plus 0,587 mal Grün plus 0,114 mal Blau.

Bitte beachten Sie, dass dieser mathematische Helligkeitswert keine offizielle Konformitätsprüfung für Barrierefreiheit nach WCAG darstellt, sondern als rechnerischer Richtwert dient.

Praktisches Beispiel: Standardfarbe umwandeln

Angenommen, Sie möchten den Farbton des Standardwerts #3498db in allen Formaten ermitteln. Sie tragen #3498db in das Eingabefeld ein und belassen die Formatauswahl auf all.

Nach der Berechnung erhalten Sie: - HEX: #3498db - RGB: rgb(52, 152, 219) - HSL: hsl(204, 70%, 53%) - Berechneter Helligkeitswert: 129.749

Mit diesen Werten können Sie die Farbe unmittelbar in CSS-Regeln oder Konfigurationsdateien einbinden.

Einschränkungen des Werkzeugs

• Das Werkzeug verarbeitet ausschließlich Hexadezimalcodes mit 3 oder 6 Stellen. Farbwerte mit Alphakanal (4 oder 8 Stellen wie #3498db80) werden nicht unterstützt.
• Funktionale Eingaben wie rgb(52, 152, 219) oder Farbnamen wie blue können nicht als Eingabe verarbeitet werden.
• Der ausgegebene Helligkeitswert ist eine rein mathematische Kanalgewichtung und ersetzt keine normierte Kontrastmessung für barrierefreie Benutzeroberflächen.

Häufige Fehler bei der Eingabe

• Alphakanal eingegeben: Die Angabe von Transparenzwerten führt zu einer Fehlermeldung. Entfernen Sie die letzten beiden Stellen, um den Basisfarbton zu konvertieren.
• Ungültige Zeichen: Buchstaben außerhalb des hexadezimalen Bereichs von A bis F (oder a bis f) machen die Eingabe ungültig.
• Leerzeichen: Das Tool schneidet Leerzeichen an den Rändern automatisch ab, Leerzeichen innerhalb des Farbcodes führen jedoch zu einem Fehler.

Häufig gestellte Fragen (FAQ)

Kann ich Farbcodes ohne das Doppelkreuz # eingeben?

Ja, Eingaben wie 3498db oder fff werden automatisch erkannt und verarbeitet. Das führende Doppelkreuz ist optional.

Was bedeutet die Formatauswahl all?

Die Option all erzeugt gleichzeitig die HEX-, RGB- und HSL-Darstellungen zusammen mit den Kanalwerten und dem Helligkeitswert in einer gemeinsamen Übersicht.

Welche Eingaben sind als Standard voreingestellt?

Das Werkzeug startet standardmäßig mit dem Hex-Farbcode #3498db und dem Ausgabeformat all.