Hex Farben mit Alphakanal

Die meisten Frontend Entwickler definieren Farben wohl in Form von Hex Codes wie #ff3300 oder auch #f30. Auf die anderen Formate wie rgb() und hsl() wird eher selten zurückgegriffen. Dies ändert sich allerdings, wenn Farben mit einem Alphakanal, also mit Transparenzen, verwendet werden sollen. In diesem Fall war bisher rgba() meistens das Format der Wahl.

Seit einiger Zeit unterstützen manche Browser auch einen Alphakanal im Hex Format (muss man noch erwähnen welche Browser hier die Nachzügler sind?). Auf den ersten Blick scheint dieses Format eine grossartige Möglichkeit zu sein, seinen Hex Farben im CSS einfach einen Prozentwert für die Transparenz anzuhängen: #ff330050. Leider basiert das Hex System aber auf einer Folge von 00 bis FF, also insgesamt 256 Werten. Die 50 im Alphakanal unseres Beispiels repräsentiert darum keine 50% Transparenz sondern eher um 30%. Die Umrechnung gestaltet sich somit etwas schwieriger. In diesem Codepen werden die Werte in Prozent umgerechnet, es kann also als Spickzettel verwendet werden.

Insgesamt ist es praktisch, auch die Möglichkeit zu haben, Hex Codes mit einem Alphakanal versehen zu können. Wer ein paar übliche Werte auswendig lernt (50% = 80, 80% = CC etc.) kann diese schnell anhängen, anstatt die Farbe in rgba() umzuschreiben. Dennoch vermute ich, dass sich diese Schreibweise nicht wirklich durchsetzen wird, solange es in rgba() so viel klarer ist, welche Transparenz man erhält.

 

Icon made by Freepik from www.flaticon.com is licensed by CC 3.0 BY

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.