Drei Schreibweisen, eine Farbe
HEX, RGB und HSL beschreiben dieselbe Farbe auf drei Arten. Auf dem Bildschirm kommt dasselbe heraus, nehmen Sie also die Form, die an dieser Stelle bequemer ist.
HEX lautet #RRGGBB und ist das, was Designwerkzeuge exportieren und Entwickler einfügen. Kurz und leicht zu kopieren.
RGB nennt Rot, Grün und Blau von 0 bis 255. Diese Form brauchen Sie, wenn Code eine Farbe berechnet oder direkt auf ein Canvas zeichnet.
HSL nennt Farbton (0 bis 360 Grad), Sättigung und Helligkeit. Sie entspricht dem, wie Menschen beim Anpassen einer Farbe tatsächlich denken.
Wo HSL sich auszahlt
Angenommen, ein Button braucht einen Hover-Zustand. In HEX gibt es keinen offensichtlichen Weg, #3E6FF4 etwas dunkler zu machen: Man schiebt Ziffern hin und her und vergleicht mit den Augen. In HSL senken Sie die Helligkeit um 10. Farbton und Sättigung bleiben stehen, die beiden Farben gehören sichtbar zusammen.
Derselbe Griff baut Paletten. Halten Sie den Farbton fest und staffeln Sie die Helligkeit für eine Abstufung; drehen Sie den Farbton um 120 Grad für ausgewogene Kontrastfarben.
Wer Farben in CSS-Variablen hält, kann die HSL-Kanäle getrennt speichern und das ganze Thema über eine einzige Farbtonzahl verschieben.
Alpha
Ein achtstelliger HEX-Wert wie #RRGGBBAA trägt die Deckkraft in den letzten beiden Stellen: 80 sind rund 50%, FF ist vollständig deckend. Alle aktuellen Browser verstehen diese Schreibweise.
Wo Transparenz nötig ist, nehmen Sie rgba() oder den achtstelligen HEX-Wert. Denken Sie daran: Eine durchscheinende Farbe zu überlagern ist nicht dasselbe, wie gleich eine hellere zu wählen. Ändert sich der Hintergrund, ändert sich die durchscheinende Farbe mit.
Was dieses Werkzeug liest
Es nimmt HEX mit drei, vier, sechs und acht Stellen, rgb() und rgba(), hsl() und hsla(), sowohl in der alten Syntax mit Kommas als auch in der modernen mit Leerzeichen.
Benannte Farben wie red oder rebeccapurple werden nicht erkannt, neuere Farbräume wie oklch() ebenfalls nicht. Bei einer benannten Farbe lesen Sie den HEX-Wert in den Entwicklerwerkzeugen des Browsers ab und fügen diesen ein.