Hex-Farbe in RGB und HSL umrechnen

Geben Sie eine optionale Hex-Farbe ein, um RGB- und HSL-Darstellungen zu erhalten. Ohne Eingabe verwendet das Tool #ff5733; das führende # können Sie weglassen.

Wofür Sie den Hex-Farbwähler verwenden

Der Hex-Farbwähler hilft Ihnen dabei, einen hexadezimalen Farbwert in RGB- und HSL-Darstellungen zu übertragen. Das ist praktisch, wenn eine Farbe aus einer Designvorgabe, einem Stylesheet oder einer bestehenden Farbauswahl in einer anderen Schreibweise benötigt wird. Als Eingabe verarbeitet das Tool einen Hexadezimalwert, nicht einen RGB- oder HSL-Wert.

Die Eingabe ist optional. Wenn das Feld leer bleibt, wird der dokumentierte Standardwert #ff5733 verwendet. Sie können also zunächst ohne eigenen Farbwert prüfen, welche Angaben das Ergebnis bereitstellt, oder direkt einen Wert aus Ihrem Projekt einsetzen. Die Ausgabe stellt mehrere Schreibweisen und Zahlenwerte bereit, sodass Sie die passende Darstellung für Ihren weiteren Arbeitsschritt auswählen können.

Hex-Farbe umrechnen: Vorgehen

1. Öffnen Sie den Hex-Farbwähler und suchen Sie das Eingabefeld für den hexadezimalen Farbwert. Achten Sie darauf, dort einen Hexadezimalwert einzutragen. RGB- oder HSL-Angaben gehören nicht in dieses Feld.

2. Geben Sie beispielsweise #3366cc ein. Das führende # ist optional. Wenn Sie den Wert ohne dieses Zeichen eintragen, wird es vor der Verarbeitung ergänzt. Auch ein dreistelliger Wert wie #3c6 wird unterstützt: Jedes der drei Zeichen wird wiederholt, bevor die Farbe umgerechnet wird.

3. Lassen Sie das Feld leer, wenn Sie den dokumentierten Standardwert verwenden möchten. In diesem Fall müssen Sie keinen Ersatzwert eintragen. Wenn Sie eine bestimmte Projektfarbe prüfen, tragen Sie stattdessen den gewünschten Hexadezimalwert ein.

4. Starten Sie die Umrechnung über die dafür vorgesehene Aktion. Warten Sie anschließend auf die Ergebnisangaben. Bei einer erfolgreich verarbeiteten Farbe werden eine sechsstellige Hex-Schreibweise in Großbuchstaben, eine entsprechende Kleinschreibung, RGB- und HSL-Text sowie numerische RGB- und HSL-Bestandteile ausgegeben.

5. Lesen Sie bei Bedarf die numerischen Werte getrennt von den Textdarstellungen ab. Die Angaben zu Farbton, Sättigung und Helligkeit im HSL-Ergebnis werden auf ganze Zahlen gerundet. Zusätzlich kann eine Helligkeitsklassifizierung angezeigt werden. Eine optionale Verlaufsoption ist standardmäßig deaktiviert; sie fügt dem Ergebnis keinen Verlauf hinzu und verändert die Farbumrechnung nicht.

Ergebnis richtig lesen

Vergleichen Sie nach der Umrechnung zunächst die verschiedenen Darstellungen. Die Groß- und Kleinschreibung der sechsstelligen Hex-Ausgabe betrifft die Schreibweise, nicht die dargestellte Farbe. RGB und HSL beschreiben denselben eingegebenen Farbwert in unterschiedlichen Farbsystemen. Für die Weiterverwendung in einer Oberfläche können Sie die Textdarstellung übernehmen; für Berechnungen oder Vergleiche sind die numerischen Komponenten zweckmäßiger.

Berücksichtigen Sie bei HSL, dass Farbton, Sättigung und Helligkeit als ganze Zahlen ausgegeben werden. Diese Rundung erleichtert das Ablesen, liefert aber eine weniger fein aufgelöste Darstellung als Zwischenwerte mit Nachkommastellen. Verwenden Sie die HSL-Angaben daher als die vom Tool ausgegebene, gerundete Form und nicht als ungerundete Messwerte.

Die Helligkeitsklassifizierung ist eine zusätzliche Einordnung und keine weitere Farbdarstellung. Sie ist nur dann wahr, wenn die gewichtete Helligkeitsberechnung aus den RGB-Werten größer als 128 ist. Ein Wert von 128 erfüllt diese Bedingung nicht. Die Klassifizierung ersetzt daher weder die RGB- oder HSL-Werte noch eine eigene gestalterische Beurteilung.

Achten Sie außerdem auf die Form des Ergebnisses. Bei einer ungültigen Hex-Eingabe kann eine Fehlerangabe enthalten sein, obwohl das Ergebnis als erfolgreich markiert zurückgegeben wird. Eine solche Antwort sollten Sie nicht als gültige Farbumrechnung verwenden. Korrigieren Sie den eingegebenen Hexadezimalwert und führen Sie die Umrechnung erneut aus. Die optionale Verlaufsoption liefert keine zusätzlichen Verlaufsdaten und ist für die Interpretation der Farbe ohne Bedeutung.

Praktisches Beispiel

Sie möchten die blaue Designfarbe #3366cc für eine Anwendung sowohl als RGB- als auch als HSL-Angabe weiterverwenden.

Geben Sie #3366cc ein und starten Sie die Umrechnung. Prüfen Sie anschließend die verschiedenen Farbdarstellungen und die auf ganze Zahlen gerundeten HSL-Werte.

Das Ergebnis enthält sechsstellige Hex-Schreibweisen in Groß- und Kleinbuchstaben, RGB- und HSL-Text, numerische RGB- und HSL-Bestandteile sowie eine Helligkeitsklassifizierung.

Einschränkungen

• Eine ungültige Hex-Eingabe kann als erfolgreich markiertes Ergebnis mit Fehlerangabe zurückkommen. Die optionale Verlaufsoption fügt keinen Verlauf hinzu und verändert die Farbumrechnung nicht.

Häufige Fehler

• Eine ungültige oder falsch formatierte Hex-Eingabe kann eine Fehlerangabe im Ergebnis auslösen. Prüfen Sie die Zeichen des Farbwerts, lassen Sie das # bei Bedarf weg oder verwenden Sie einen unterstützten dreistelligen Wert, bei dem jedes Zeichen ein gültiges Hexadezimalzeichen ist.

Häufige Fragen

Kann ich die Hex-Farbe ohne Eingabe testen?

Ja. Lassen Sie das Eingabefeld leer. Dann verwendet das Tool den dokumentierten Standardwert #ff5733 für die Umrechnung.

Muss ein Hex-Farbwert mit einem # beginnen?

Nein, das Zeichen ist nicht erforderlich. Fehlt das führende #, wird es vor der Verarbeitung ergänzt. Ein dreistelliger Hex-Wert wird außerdem durch Wiederholung jedes Zeichens erweitert.

Welche Angaben enthält das Ergebnis?

Das Ergebnis enthält sechsstellige Hex-Schreibweisen in Groß- und Kleinschreibung, RGB- und HSL-Text, numerische RGB- und HSL-Bestandteile sowie eine Helligkeitsklassifizierung. Farbton, Sättigung und Helligkeit werden dabei auf ganze Zahlen gerundet.