Frage von attributan,

Soll man für CSS eher Hex oder RGB für Farben benutzen?

Da kann man beides angeben, gibt es vielleicht eine Richtlinie, was besser ist? Ich mache im Moment RGB

Antwort von derwendtde,

Eine begründete Frage, die leider nicht pauschal beantwortet werden kann: Im "Krieg der Farbdefinitionen" gibt es keine eindeutigen Sieger, weil es auf den Verwendungszweck ankommt. Es gibt sogar Fälle, wo man beide Formen mixen muss:

  • Verwende für einfache Seiten mit wenig Besuchern ruhigen Gewissens RGB, da kann man sich etwas mehr unter der Notation vorstellen als bei HEX. Ebay zB wandelt im HTML-Editor HEX automatisch in RGB um.

  • Nutze HEX, wenn es auf jedes Bit ankommt und das CSS in minimierter, ZIP-komprimierter Form ausgegeben wird, d.h. ohne Einrückung, Zeilenschaltung etc. Dies ist besonders bei Seiten mit sehr vielen Zugriffen pro Tag sinnvoll, wenn für den Daten-Traffic bezahlt werden muss.

  • Nutze RGBA, wenn Transparenz ins Spiel kommt.

  • Nutze eine Mischform mit HEX mit 4 Farbgruppen, wenn Du Transparenz an jeden Browser übergeben willst, siehe .box_rgba Beispiel auf http://css3please.com/ . Damit kommen einzig die grässlichen IE-Filter zuverlässig zurecht – das allerdings schon lange, es ist keine CSS3-Spezifikation.

Um die Verwirrung komplett zu machen: Es gibt einen CSS3 Spezifikationsentwurf für ein weiteres Format, nämlich HSL(A).

Hue, Saturation, Lightness, (Alpha) stehen für:

  • den Winkel auf dem Farbkreis (Dezimal-Ganzzahl von 0-359)

  • Die Sättigung (Abstand vom Mittelpunkt in %)

  • Die Belichtung (Hell/Dunkel in %)

  • Alpha-Kanal Transparenz, in Dezimalzahl

Ein Beispiel sieht dann so aus:

em { color: hsla(120, 100%, 50%, .5) }

Der große Vorteil von HSL ist, dass Farbschemata mit der bloßen Veränderung des Winkels zB. in 15° Schritten sehr leicht umsetzbar ist. Unterstützt wird das Format von FF und Safari ab Version 3, von Opera evtl. seit V 9, von Camino und IE kleiner 9 allerdings gar nicht.

Zum Ausprobieren von HSL sieh Dir mal mothereffinghsl.com/ an.

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten