8-stellige Hex-Farbcodes und Transparenz in CSS verstehen

Ein 8-stelliger Hexadezimal-Farbwert in CSS folgt dem Schema #RRGGBBAA. Die beiden letzten Zeichen definieren dabei den Alpha- beziehungsweise Transparenzkanal als hexadezimalen Wert zwischen 00 für vollständige Transparenz und FF für vollständige Deckkraft. Dadurch lässt sich die Transparenz unmittelbar innerhalb eines Hex-Farbwerts festlegen, ohne dafür auf rgba() wechseln zu müssen.

CSS stellt unterschiedliche Möglichkeiten zur Definition von Farben bereit. Dazu gehören Hexadezimalwerte, rgb(), rgba(), hsl() sowie benannte Farbwerte. Dieser Artikel beschäftigt sich mit der Hexadezimalnotation: Er erklärt die klassischen 3- und 6-stelligen Formate, zeigt, wie die 4-stellige Schreibweise #RGBA und die 8-stellige Variante #RRGGBBAA Transparenz ermöglichen, vergleicht Hex-Alpha mit rgba(), hsla() und der CSS-Eigenschaft opacity und erläutert die Browserunterstützung dieser Formate.

Die wichtigsten Punkte

• Das 8-stellige Format #RRGGBBAA ergänzt einen normalen 6-stelligen Hex-Farbwert um einen Alpha-Kanal. Der Bereich AA reicht von 00 für vollständig transparent bis FF für vollständig deckend.
• Die 4-stellige Schreibweise #RGBA ist eine Kurzform. Jedes Zeichen wird verdoppelt, sodass beispielsweise #F00A zu #FF0000AA wird.
• Um einen Prozentwert für die Deckkraft in einen hexadezimalen Alpha-Wert umzuwandeln, wird die Deckkraft als Dezimalzahl mit 255 multipliziert, anschließend gerundet und in eine Hexadezimalzahl umgerechnet. Bei 50 % ergibt sich beispielsweise round(0.5 × 255) = 128, was hexadezimal 80 entspricht.
• Hex-Alpha, rgba() und hsla() beeinflussen ausschließlich die Transparenz eines einzelnen Farbwerts. Die Eigenschaft opacity macht dagegen ein vollständiges Element einschließlich seiner untergeordneten Elemente transparent.
• #RRGGBBAA und #RGBA werden von aktuellen wichtigen Browsern unterstützt, nicht jedoch von Internet Explorer. Wenn ältere Browser-Engines berücksichtigt werden müssen, kann rgba() als Fallback verwendet werden.

Voraussetzungen

Um diesem Artikel folgen zu können, benötigst du:

• Grundlegende Kenntnisse in CSS. Falls du dein Wissen auffrischen möchtest, kann eine allgemeine Tutorial-Reihe zum Erstellen von Webseiten mit CSS hilfreich sein.
• Einen modernen Webbrowser, der die Hex-Farbnotation #rrggbbaa unterstützt.

Das CSS-Hex-Farbformat verstehen

Bevor Transparenz hinzugefügt wird, ist es hilfreich zu verstehen, wie sich ein Hex-Farbwert zusammensetzt. Hexadezimale Farbwerte sind eine kompakte Möglichkeit, Rot-, Grün- und Blauanteile mithilfe von Zahlen zur Basis 16 darzustellen. Benannte CSS-Farben wie red oder lavender decken ungefähr 140 vordefinierte Farbnamen ab. Mit Hex-Werten lassen sich dagegen rund 16,7 Millionen RGB-Farbkombinationen definieren und bei Bedarf um einen Alpha-Kanal erweitern.

3-stellige und 6-stellige Hex-Farben: #RGB und #RRGGBB

Das Zählen mit Dezimalzahlen beziehungsweise zur Basis 10 ist wahrscheinlich vertraut:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Eine einzelne Dezimalstelle besitzt somit zehn mögliche Werte von 0 bis 9. Danach wird eine zweite Stelle benötigt, beginnend mit der Zahl 10.

Hexadezimalwerte basieren dagegen auf dem Zahlensystem zur Basis 16:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Die Buchstaben A, B, C, D, E und F stehen dabei für die sechs zusätzlichen Werte des Hexadezimalsystems.

Gültige Hexadezimalwerte sind beispielsweise:

00, 01, 99, 9D, 1D, CC, E4, F5

Jedes Paar aus zwei Hexadezimalzeichen kann eine Zahl zwischen 0 und 255 darstellen. Die linke Stelle entspricht dem Vielfachen von 16, während die rechte Stelle einzelne Einheiten repräsentiert. So ergibt A0 beispielsweise (10 × 16) + 0 = 160. FF entspricht (15 × 16) + 15 = 255 und stellt damit den größtmöglichen Wert dar, den zwei Hexadezimalzeichen aufnehmen können. Dieser Bereich von 0 bis 255 sorgt dafür, dass jeder RGB-Farbkanal über 256 mögliche Intensitätsstufen verfügt.

Beim Gestalten eines Elements mit CSS werden Farbwerte häufig Eigenschaften wie color, background-color, border-color und ähnlichen CSS-Eigenschaften zugewiesen.

Individuelle Farben lassen sich erzeugen, indem unterschiedliche Hexadezimalwerte miteinander kombiniert und daraus spezifische Hex-Farbcodes gebildet werden.

Ein CSS-Hex-Farbwert beginnt immer mit einem Nummernzeichen #, das auch als Hash-Zeichen bezeichnet wird. Danach folgen sechs Hexadezimalzeichen. Jeweils zwei davon stehen für Rot, Grün und Blau. Das grundlegende Muster lautet #RRGGBB, wobei R für Rot, G für Grün und B für Blau steht.

Jedes dieser Paare legt die Intensität eines Farbkanals fest. 00 bedeutet, dass der jeweilige Kanal keinen Anteil zur Farbe beiträgt, während FF die maximale Intensität bezeichnet. Werden alle drei Kanäle auf 00 gesetzt, entsteht Schwarz. Bei dreimal FF entsteht Weiß. Wird nur ein Kanal auf FF gesetzt und die beiden anderen auf 00, erhält man die vollständig gesättigte Variante dieses Farbkanals, beispielsweise #FF0000 für reines Rot.

Werden alle Farbkanäle auf den niedrigsten Wert 00 gesetzt, entsteht vollständig schwarzer Text:

div {
  color: #000000;
}

Werden dagegen alle drei Werte auf den Höchstwert FF gesetzt, entsteht vollständig weißer Text:

div {
  color: #FFFFFF;
}

Angenommen, eine Überschrift soll in einem kräftigen Rot dargestellt werden. Dafür lässt sich der Rotkanal RR auf den maximalen Wert FF setzen. Da kein Grün und kein Blau benötigt werden, können die Werte für GG und BB jeweils auf 00 gesetzt werden.

div {
  color: #FF0000;
}

Dieser Code wird folgendermaßen dargestellt: Roter Text

Durch unterschiedliche Mengen von Rot, Grün und Blau lassen sich zahlreiche weitere Farben erzeugen. #DC143C besitzt mit DC einen hohen Rotanteil und ergibt die Farbe Crimson. #EE82EE enthält mit jeweils EE große Anteile von Rot und Blau und erzeugt Violet. #40E0D0 weist mit E0 und D0 hohe Grün- und Blauanteile auf und ergibt Turquoise.

Hinweis: CSS-Hex-Farbcodes unterscheiden nicht zwischen Groß- und Kleinschreibung. Alphabetische Zeichen können daher sowohl groß als auch klein geschrieben werden. #ff0000 ist entsprechend identisch mit #FF0000. CSS erlaubt außerdem verkürzte Hex-Werte. Deshalb entspricht #F00 demselben Farbwert wie #FF0000.

Welche Schreibweise verwendet wird, sollte sich an den Coding-Standards des jeweiligen Projekts orientieren.

Was der Alpha-Kanal steuert

Der Alpha-Kanal bestimmt, wie deckend eine Farbe dargestellt wird. Er verändert dabei nicht die eigentliche Farbe, sondern legt fest, wie stark der Hintergrund durch sie hindurchscheinen kann. Ein Alpha-Wert von FF zeigt die Farbe mit vollständiger Deckkraft. Je weiter der Wert in Richtung 00 sinkt, desto stärker wird der darunterliegende Hintergrund sichtbar. Bei 00 ist die Farbe vollständig transparent und damit unsichtbar.

Der Alpha-Wert bezieht sich ausschließlich auf den jeweiligen Farbwert. Anders als bei der CSS-Eigenschaft opacity werden durch einen Alpha-Wert in background-color weder der Text des Elements noch darin enthaltene untergeordnete Elemente transparent.

Wie CSS Color Module Level 4 Alpha-Werte für Hex-Farben eingeführt hat

Mit den ursprünglichen Hex-Formaten #RGB und #RRGGBB ließ sich keine Transparenz ausdrücken. Für halbtransparente Farben wurde deshalb lange Zeit rgba() eingesetzt. CSS Color Module Level 4 führte anschließend die 4-stellige Schreibweise #RGBA und das 8-stellige Format #RRGGBBAA ein. Dadurch kann der Alpha-Kanal direkt innerhalb eines Hex-Werts angegeben werden. Projekte, die bereits konsequent Hex-Farben einsetzen, können Transparenz somit ergänzen, ohne auf eine andere Farbfunktion wechseln zu müssen.

Das 4-stellige Hex-Format #RGBA

Syntax und Aufbau

Das 4-stellige Format verwendet das Schema #RGBA. Dabei steht jeweils ein Zeichen für Rot, Grün, Blau und Alpha. Es handelt sich um die Kurzform von #RRGGBBAA, genauso wie #RGB die verkürzte Schreibweise von #RRGGBB darstellt.

Wie 4-stellige Kurzformen in 8-stellige Werte umgewandelt werden

Bei der Umwandlung eines 4-stelligen Hex-Werts in die entsprechende 8-stellige Schreibweise wird jedes Zeichen verdoppelt. Aus F wird beispielsweise FF, aus 0 wird 00 und entsprechend werden auch alle weiteren Zeichen verdoppelt.

/* Diese Wertepaare sind identisch */
/* #RGBA    ->  #RRGGBBAA          */
/* #F00A    ->  #FF0000AA          */
/* #0000    ->  #00000000          */

Codebeispiel: #RGBA als Hintergrundfarbe verwenden

Ein 4-stelliger Hex-Wert lässt sich auf dieselbe Weise wie jeder andere CSS-Farbwert verwenden. Bei der vollständigen Darstellung wird jedes Zeichen verdoppelt. #00FA wird beispielsweise so erweitert: 0→00, 0→00, F→FF und A→AA. Daraus entsteht #0000FFAA, also Blau mit ungefähr 67 % Deckkraft.

div {
  background-color: #00FA; /* erweitert zu #0000FFAA */
}

Das 8-stellige Hex-Format #RRGGBBAA

Aufbau des 8-stelligen Formats

Das 8-stellige Hex-Format erweitert das gewöhnliche Muster #RRGGBB um einen zusätzlichen zweistelligen Alpha-Wert und ergibt dadurch #RRGGBBAA. Die ersten sechs Zeichen entsprechen vollständig einem normalen Hex-Farbwert. Das letzte Zeichenpaar steuert die Transparenz.

Wie Alpha-Werte im Hexadezimalsystem funktionieren

Das Zeichenpaar AA verwendet denselben Wertebereich von 00 bis FF wie die einzelnen RGB-Kanäle. 00 bedeutet vollständig transparent, während FF vollständig deckend bedeutet. Zwischenwerte vermischen die Vordergrundfarbe mit dem dahinterliegenden Inhalt. Der Browser berechnet das endgültige Pixel anhand des Zusammenhangs Vordergrund × Alpha + Hintergrund × (1 − Alpha). Dabei entspricht Alpha dem numerischen Wert von AA geteilt durch 255. Deshalb kann derselbe Alpha-Wert auf unterschiedlichen Hintergründen verschieden aussehen. #0000FF80 kann auf einem weißen Hintergrund beispielsweise wie ein abgeschwächtes Blau wirken, auf schwarzem Hintergrund dagegen wie ein dunkles Marineblau. Der eigentliche Farbwert ändert sich dabei nicht. Unterschiedlich ist lediglich der Hintergrund, mit dem er vermischt wird. Da Hexadezimalwerte für Transparenz visuell nur schwer einzuschätzen sind, zeigt die folgende Tabelle verbreitete Alpha-Werte und die zugehörigen Deckkraftwerte.

Codebeispiel: Teilweise Transparenz auf ein UI-Element anwenden

Um einer vorhandenen deckenden Farbe Transparenz hinzuzufügen, wird einfach ein zweistelliger Alpha-Wert an den bestehenden 6-stelligen Hex-Farbcode angehängt. Ausgangspunkt ist beispielsweise ein deckendes Blau:

div {
  background-color: #0080FF;
}

Dieser Code wird folgendermaßen dargestellt: Hintergrundfarbe #0080FF

Danach lässt sich Transparenz hinzufügen, indem zwei weitere Hexadezimalzeichen ergänzt werden. Im folgenden Beispiel wird für den Alpha-Kanal der Wert 80 verwendet:

div {
  background-color: #0080FF80;
}

Dieser Code wird folgendermaßen dargestellt: Hintergrundfarbe #0080FF80

Der Alpha-Wert 80 behält den bestehenden Farbwert #0080FF bei und fügt unmittelbar Transparenz hinzu. Ein Wechsel zu einer anderen CSS-Farbfunktion ist dafür nicht erforderlich.

Codebeispiel: Vollständig transparente und vollständig deckende Werte

.fully-opaque {
  /* entspricht #3498DB, keine Transparenz */
  background-color: #3498DBFF;
}

.fully-transparent {
  /* unsichtbar, der Hintergrund scheint vollständig durch */
  background-color: #3498DB00;
}

Referenztabelle: Hex-Alpha-Werte und Transparenz in Prozent

Um den Hex-Alpha-Wert für eine bestimmte Deckkraft zu berechnen, wird die gewünschte Deckkraft zunächst als Dezimalzahl dargestellt, anschließend mit 255 multipliziert, auf die nächste ganze Zahl gerundet und danach in einen Hexadezimalwert umgewandelt. Die folgende Tabelle zeigt verbreitete Abstufungen in 10-Prozent-Schritten.

Hinweis: Diese Werte beziehen sich auf auf 10-Prozent-Schritte gerundete Deckkraftwerte. Für eine genauere Steuerung kann round(opacity × 255) berechnet und das Ergebnis anschließend in einen zweistelligen Hexadezimalwert umgewandelt werden. Eine Deckkraft von 50 % entspricht 80, also dem Dezimalwert 128, und nicht 7F oder 88.

CSS-Methoden für Transparenz im Vergleich

CSS bietet vier häufig verwendete Möglichkeiten, Transparenz umzusetzen. Hexadezimale Alpha-Werte, rgba() und hsla() steuern jeweils die Transparenz eines einzelnen Farbwerts. Die Eigenschaft opacity verhält sich anders, da sie das gesamte Element transparent macht.

8-stellige Hex-Werte im Vergleich zu rgba()

Beide Schreibweisen beschreiben eine RGB-Farbe zusammen mit einem Alpha-Kanal. Beispielsweise erzeugen rgba(52, 152, 219, 0.5) und #3498DB80 dasselbe Ergebnis. rgba() kann leichter lesbar sein, weil der Alpha-Wert dort als Dezimalwert zwischen 0 und 1 angegeben wird. Außerdem lässt es sich gut mit CSS Custom Properties verwenden, bei denen die RGB-Kanäle separat gespeichert werden, wie im später gezeigten rgb()-Beispiel. #RRGGBBAA ist dagegen besonders kompakt, weil Farbwert und Transparenz in einem einzigen Wert enthalten sind.

8-stellige Hex-Werte im Vergleich zu hsla()

hsla() definiert eine Farbe anhand von Farbton, Sättigung und Helligkeit und ergänzt diese Werte um einen Alpha-Kanal. Dadurch lassen sich beispielsweise unterschiedliche Abstufungen derselben Farbe leichter programmatisch ableiten. Hex-Alpha bietet diese Art der direkten Kontrolle über Farbkomponenten nicht, da es sich um einen unmittelbaren RGB-Wert mit zusätzlichem Alpha-Kanal handelt. hsla() eignet sich deshalb besonders dann, wenn neben der Transparenz auch Helligkeit oder Sättigung angepasst werden sollen.

8-stellige Hex-Werte im Vergleich zur CSS-Eigenschaft opacity

Die CSS-Eigenschaft opacity beeinflusst das gesamte Element, einschließlich Text und sämtlicher untergeordneter Elemente. Hex-Alpha sowie rgba() und hsla() gelten dagegen nur für den Farbwert, dem sie zugewiesen wurden. Soll beispielsweise lediglich der Hintergrund einer Karte transparent erscheinen, während der Text vollständig lesbar bleiben soll, sollte ein transparenter background-color-Wert verwendet werden und nicht opacity auf dem gesamten Element.

Hex-Alpha und CSS Custom Properties

Eine häufig auftretende Einschränkung besteht darin, dass an eine bestehende CSS Custom Property mit einem Hex-Wert nicht einfach ein Alpha-Kanal angehängt werden kann. Wenn in einem Designsystem beispielsweise --brand: #3498DB; definiert ist, kann dieser Wert mit reinem CSS nicht unmittelbar durch zusätzliche Hexadezimalzeichen auf 50 % Deckkraft erweitert werden. Der Grund dafür ist, dass CSS Zeichenketten auf diese Weise nicht miteinander verknüpft. Zwei praktische Möglichkeiten können dieses Problem lösen.

Eine Variante besteht darin, die einzelnen RGB-Kanäle statt des Hex-Werts zu speichern und anschließend die Slash-Alpha-Syntax von rgb() zu verwenden:

:root {
  --brand-rgb: 52 152 219;
}

.button {
  background-color: rgb(var(--brand-rgb) / 50%);
}

Alternativ kann die bestehende Hex-Variable beibehalten und mit color-mix() eine transparente Variante daraus erzeugt werden:

:root {
  --brand: #3498DB;
}

.button {
  background-color: color-mix(in srgb, var(--brand) 50%, transparent);
}

color-mix() stellt eine flexiblere moderne Lösung dar. Bevor diese Methode für bestimmte Zielumgebungen eingesetzt wird, sollte die jeweilige Browserunterstützung für color-mix geprüft werden.

Vergleichstabelle: Wann welche Methode sinnvoll ist

Hinweis: Zusätzlich zu dem zuvor gezeigten color-mix() führt CSS Color Module Level 5 auch die relative Farbsyntax ein. Damit lässt sich aus einer vorhandenen Farbe ein neuer Farbwert ableiten, beispielsweise eine transparente Variante, indem einzelne Farbkanäle verändert werden. Vor einem Einsatz in produktiven Projekten sollte die Browserunterstützung für relative CSS-Farben geprüft werden.

Browserunterstützung für Hex-Werte mit Alpha-Kanal

Die 4-stelligen #RGBA– und 8-stelligen #RRGGBBAA-Formate werden von allen aktuellen wichtigen Browsern unterstützt. Internet Explorer unterstützt diese Syntax nicht. Die nachfolgend angegebenen Mindestversionen basieren auf Browser-Support-Referenzen. Vor dem Einsatz sollte geprüft werden, welche Browser für die eigene Zielgruppe tatsächlich unterstützt werden müssen.

Fallback-Strategie: Wenn Browser unterstützt werden müssen, die Hex-Werte mit Alpha-Kanal nicht verstehen, kann zunächst ein rgba()-Wert als Fallback definiert und anschließend durch den 8-stelligen Hex-Wert überschrieben werden. Browser mit Unterstützung für Hex-Alpha verwenden die zweite Deklaration, während ältere Browser auf die erste zurückgreifen können.

.banner {
  background-color: rgba(52, 152, 219, 0.5); /* Fallback für ältere Browser */
  /* 8-stelliger Hex-Wert für moderne Browser */
  background-color: #3498DB80;
}

Praktische Beispiele für transparente Hex-Farben

Transparentes Overlay über einem Bild

Um Text auf einem Hintergrundbild besser lesbar zu machen, kann über ein Pseudo-Element eine halbtransparente schwarze Ebene eingefügt werden. Die Kurzschreibweise inset: 0 entspricht top: 0; right: 0; bottom: 0; left: 0 und sorgt dafür, dass sich das Overlay über das gesamte übergeordnete Element erstreckt. Ohne position: relative und einen geeigneten z-index für den Inhalt könnte das Overlay oberhalb des Textes dargestellt werden.

.hero {
  position: relative;
  background-image: url("hero.jpg");
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Schwarz mit 50 % Deckkraft */
  background-color: #00000080;
}

.hero__content {
  position: relative;
  z-index: 1;
}

Deaktivierten Button mit Hex-Alpha darstellen

Wird die Farbe eines Buttons auf 40 % Deckkraft reduziert, kann dadurch sichtbar gemacht werden, dass das Steuerelement derzeit nicht aktiv ist, ohne es aus dem Seitenlayout zu entfernen.

.button:disabled {
  /* Markenblau mit 40 % Deckkraft */
  background-color: #3498DB66;
  cursor: not-allowed;
}

Kartenhintergrund mit leichter Transparenz

Ein weißer Hintergrund mit 80 % Deckkraft ermöglicht es, dass eine dahinterliegende Textur oder ein Farbverlauf noch leicht sichtbar bleibt, während der Inhalt der Karte weiterhin gut lesbar ist.

.card {
  /* Weiß mit 80 % Deckkraft */
  background-color: #FFFFFFCC;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

Browser-Entwicklertools zum Auswählen und Konvertieren von Farben verwenden

Eine einfache Möglichkeit, CSS-Farben in verschiedenen Schreibweisen zu betrachten, bieten die Entwicklertools moderner Webbrowser.

Nachdem das Entwicklertools-Panel geöffnet wurde, kann im Bereich für CSS-Stile nach dem gewünschten Farbwert gesucht werden. Über das Farbfeld neben dem jeweiligen Wert lässt sich die Farbe unmittelbar verändern. Mit dem verfügbaren Tastaturmodifikator beim Anklicken des Farbfelds kann außerdem zwischen unterschiedlichen unterstützten Farbformaten gewechselt werden, wobei die entsprechenden Werte automatisch korrekt umgerechnet werden.

FAQ

Was ist ein 8-stelliger Hex-Farbcode in CSS?

Ein 8-stelliger Hexadezimal-Farbcode verwendet das Format #RRGGBBAA. Die beiden letzten Zeichen bestimmen den Alpha- beziehungsweise Transparenzkanal als Hexadezimalwert von 00 für vollständig transparent bis FF für vollständig deckend.

Welcher Hex-Code steht für eine vollständig transparente Farbe?

Jeder Hex-Farbwert mit 00 als Alpha-Paar ist vollständig transparent. Beispiele dafür sind #FF000000 für transparentes Rot und #00000000 für transparentes Schwarz. CSS akzeptiert außerdem den benannten Wert transparent.

Was bedeutet #0000 in CSS?

#0000 ist die 4-stellige Kurzform von #00000000 und beschreibt vollständig transparentes Schwarz. Beim 4-stelligen Format wird jedes einzelne Zeichen verdoppelt, sodass aus jedem der vier Nullen jeweils 00 wird.

Wie wird eine rgba()-Farbe in einen 8-stelligen Hex-Code umgewandelt?

Der Alpha-Dezimalwert zwischen 0.0 und 1.0 wird mit 255 multipliziert und das Ergebnis anschließend in eine Hexadezimalzahl umgewandelt. Bei rgba(255, 0, 0, 0.5) beträgt der Alpha-Wert beispielsweise 0.5. Dies entspricht im Dezimalsystem 128 und im Hexadezimalsystem 80. Das Ergebnis lautet daher #FF000080.

Wird 8-stelliges Hex in allen Browsern unterstützt?

#RRGGBBAA wird von aktuellen wichtigen Browsern unterstützt, darunter Chrome ab Version 62, Firefox ab Version 49, Safari ab Version 10 und Edge ab Version 79. Internet Explorer unterstützt dieses Format nicht. Für Umgebungen, in denen dieser ältere Browser berücksichtigt werden muss, kann rgba() als Fallback eingesetzt werden.

Was ist der Unterschied zwischen Hex-Alpha und der CSS-Eigenschaft opacity?

Die Eigenschaft opacity macht ein vollständiges Element einschließlich aller darin enthaltenen Elemente transparent. Hex-Alpha beeinflusst dagegen ebenso wie rgba() ausschließlich den konkreten Farbwert, für den es verwendet wird. Hex-Alpha eignet sich daher, wenn nur eine bestimmte Farbe transparent dargestellt werden soll, ohne gleichzeitig den Inhalt untergeordneter Elemente abzuschwächen.

Kann für Farben mit Alpha-Kanal die 4-stellige Hex-Kurzform verwendet werden?

Ja. Bei der Schreibweise #RGBA wird jedes Zeichen verdoppelt, um den entsprechenden 8-stelligen Wert zu erhalten. #F00A wird somit zu #FF0000AA. Die Browserunterstützung von #RGBA entspricht der Unterstützung von #RRGGBBAA.

Wie lässt sich mit einem Hex-Farbcode 50 % Transparenz einstellen?

Für 50 % Deckkraft ergibt die Berechnung round(0.5 × 255) = 128. Der Dezimalwert 128 entspricht im Hexadezimalsystem 80. Dieser Wert wird an einen beliebigen 6-stelligen Hex-Farbcode angehängt. #3498DB80 stellt beispielsweise den Farbwert #3498DB mit ungefähr 50 % Deckkraft dar.

Fazit

In diesem Artikel wurde das CSS-Hex-Farbformat erläutert und gezeigt, wie die 4-stellige Schreibweise #RGBA sowie das 8-stellige Format #RRGGBBAA einen Alpha-Kanal für Transparenz ergänzen. Außerdem wurde erklärt, wie sich Hex-Alpha-Werte anhand der Referenztabelle in prozentuale Deckkraftwerte einordnen lassen und wie rgba() als Fallback für Browser eingesetzt werden kann, die Hex-Werte mit Alpha-Kanal nicht unterstützen.

Darüber hinaus wurden Hex-Alpha, rgba(), hsla() und die CSS-Eigenschaft opacity miteinander verglichen. Der entscheidende Unterschied liegt im jeweiligen Geltungsbereich: Hex-Alpha und die Farbfunktionen beeinflussen einen einzelnen Farbwert, während opacity ein komplettes Element einschließlich seiner untergeordneten Elemente abschwächt. Welche Methode verwendet wird, sollte sich nach dem gewünschten visuellen Ergebnis und den bereits etablierten Konventionen des jeweiligen Codeprojekts richten.