HEX in RGB und HSL: Kurzschreibweise und Rundungsunterschiede

3-stelliges HEX ist eine Notation, die drei Zahlen wiederholt.

#369 und #336699 stehen für dieselbe Farbe. Jede Ziffer wird zweimal geschrieben; es werden keine Nullen angehängt, um #306090 zu erzeugen. Das Ergebnis ist rgb(51, 102, 153). Die offiziellen CSS-Regeln sind unten verlinkt.

W3C CSS Color 4: HEX-Farbnotation

Moyoutil entfernt äußere Leerzeichen und ein führendes # vor der Verarbeitung von drei- oder sechsstelligen HEX-Werten. Groß- und Kleinschreibung spielen keine Rolle; HEX wird in Großbuchstaben ausgegeben. Farbauswahl und HEX-Eingabe aktualisieren Vorschau und Ergebnis.

Vier Eingaben mit realen Werkzeugfunktionen reproduziert

Wir haben die Projektfunktion color am 5. Oktober 2026 ausgeführt. HSL zeigt die vom Werkzeug auf ganze Zahlen gerundeten Werte. RGB enthält die ganzzahligen Kanalwerte der HEX-Eingabe.

Diese Tabelle ist nicht das Ergebnis einer Farbmessung mit dem Auge auf einem Bildschirm, sondern die Ausgabe einer konvertierten Codeeingabe. Die Beibehaltung traditioneller HEX- und RGB-Werte erleichtert die Unterscheidung von der HSL-Anzeigegenauigkeit.

Ein Farbwinkel von 0 in Grau bedeutet nicht Rot

Das Tool zeigt den HSL-Farbwinkel 0 für die Graueingabe an. Wenn die Sättigung jedoch 0 % beträgt, ändert der Farbwinkel die angezeigte Farbe nicht. Daher sollten Sie nicht allein anhand der ersten Zahl von hsl (0, 0 %, 50 %) beurteilen, dass etwas rot ist. Lesen Sie Farbtonwinkel, Sättigung und Helligkeit gemeinsam ab.

W3C CSS Farbe 4: Kein Effekt, Farbwinkel bei Sättigung 0 Es wird zu

Rounded HSL stellt das ursprüngliche RGB nicht wie es ist wieder her

Tools zeigen #123456 als hsl(210, 65%, 20%) an. Das Konvertieren dieses gerundeten HSL in sRGB und das anschließende Runden jedes Kanals auf eine ganze Zahl im Bereich von 0 bis 255 führt zu rgb(18, 51, 84) oder #123354. Das ursprüngliche RGB ist rgb(18, 52, 86), daher sind die beiden Kanäle unterschiedlich. Das bedeutet nicht, dass alle Farben einen Unterschied machen.

W3C CSS Color 4: HSL-zu-sRGB-Konvertierung

Für Aufgaben, die den genauen Originalcode erfordern, verwenden Sie das resultierende HEX oder RGB und behalten Sie auch das Original. Verwenden Sie HSL als Ausgangspunkt für Anpassungen, aber behandeln Sie die Ganzzahldarstellung des Tools nicht als verlustfreie Roundtrip-Konvertierung. Das Tool ist nicht in der Lage, HSL einzugeben und in HEX umzuwandeln.

Unterscheiden Sie zwischen 4-stelligem und 8-stelligem HEX und Unterstützungsbereich

CSS verfügt außerdem über 4-stelliges und 8-stelliges HEX mit Alphakanal. Der aktuelle Moyoutil-Konverter akzeptiert dies jedoch nicht. #12345678 und #abcd sind Fehler und werden nicht als RGB-Ergebnisse verarbeitet. Wenn Sie die Alpha-Position ausschneiden, gehen die Transparenzinformationen verloren. Betrachten Sie sie also nicht als dieselben Farbinformationen.

W3C CSS Color 4: HEX mit Alphakanal

1. Archivieren Sie den ursprünglichen Farbcode und den Ort, an dem er zuerst verwendet wird.
2. Geben Sie 3 oder 6 Ziffern von HEX in das Farbkonvertierungstool ein und sehen Sie sich die resultierenden HEX- und RGB-Werte an.
3. Klicken Sie auf Ergebnisse kopieren, um drei Zeilen zu kopieren: HEX, RGB und HSL. Wählen Sie nach Bedarf eine Notationszeile aus und verwenden Sie sie.
4. Berücksichtigen Sie Rundungsunterschiede, wenn Sie Ganzzahl-HSL wiederverwenden. Die Lesbarkeit des tatsächlichen Hintergrunds und der Buchstabenkombination wird ebenfalls separat überprüft.

Dieses Tool ist ein Farbcode-Konverter und bietet keine Überprüfung der Farbkontrastkonformität, ICC-Profilkonvertierung oder CMYK-Konvertierung für den Druck.

Häufig gestellte Fragen