Farben definieren in CSS

Tutorial: CSS RGBA-Farbnotation
Kommentare

Mit verschiedenen Farben lassen sich unterschiedliche Aspekte einer Website hervorheben und so den Fokus des Besuchers auf wichtige Elemente lenken, zum Beispiel Buttons oder Links.

Mit der CSS rgba () -Notation können verschiedene Farben bestimmt und ihre Transparenz, beziehungsweise ihre Farbdichte definiert werden. Jacob Gube erklärt, wie CSS RGBA funktioniert.

Arbeit mit CSS RGBA-Farb-Notationen

Die RGBA-Farbnotation ist eigentlich eine Erweiterung des RGB-Farbmodells, das angibt, wie viel rot, grün und blau in einer Farbe enthalten ist. Damit können den Werten rot, grün und blau jeweils ganze Zahlen zwischen null und 255 oder Prozentzahlen zwischen null und 100 Prozent zugeordnet und mit dem Alpha-Wert ihre Dichte durch einen Wert zwischen 0,0 und 1,0 definiert werden.

Bei der Spezifizierung des Werts macht es für das Farbergebnis keinen Unterschied, ob dieser als Integer oder in Prozent angegeben wird. Zudem lässt sich leicht zwischen beiden Werten konvertieren. So wird die ganze Zahl durch 255 geteilt und dann mit 100 multipliziert, um das prozentuale Äquivalent zu erhalten; um von Prozent zum Integer zu konvertieren, wird der Prozentwert mit 255 multipliziert und dann durch 100 Prozent geteilt. Einige Beispiele für eine solche Konvertierung finden sich in Jacob Gubes Tutorial.

Die RGB-Farbwerte lassen sich zum Beispiel mit dem Farbwähler in Photoshop oder verschiedenen Online-Tools wie Color Slider oder dem RGB Color Calculator ermitteln und dann in CSS übertragen. Die RGBA-Farbnotationen werden von allen gängigen Browsern unterstützt; trotzdem sollten komplett nicht-transparente Farben als Fallback-Lösung definiert werden.

Aufmacherbild: Two brushes on a color palette guide von Shutterstock / Urheberrecht: Ursa Studio

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -