Du kennst Hex-Farben wie #3B82F6 – sechs Zeichen für Rot, Grün und Blau. Aber was, wenn eine Farbe halbtransparent sein soll? Dann kommt der Alpha-Kanal ins Spiel, und aus sechs werden acht Stellen. Dieser Ratgeber erklärt, wie sich Deckkraft in Prozent in einen Hex-Alpha-Wert übersetzt und worauf du dabei achten musst.
Was bedeutet der Alpha-Kanal?
Eine Farbe am Bildschirm besteht aus drei Kanälen: Rot, Grün und Blau. Der Alpha-Kanal ist ein vierter Wert und beschreibt die Deckkraft – also wie viel vom Hintergrund durch die Farbe hindurchscheint. Alpha 0 heißt komplett durchsichtig, Alpha 100 % heißt komplett deckend. Alles dazwischen mischt die Farbe mit dem, was darunter liegt.
Von Prozent zu Hex: die Umrechnung
Im 8-stelligen Hex-Format #RRGGBBAA stehen die letzten beiden Zeichen für die Deckkraft. Da Hex-Werte von 00 bis FF reichen (also 0 bis 255), musst du deinen Prozentwert auf diesen Bereich umrechnen: Hex-Alpha = round(Prozent / 100 × 255), anschließend ins Hexadezimalsystem umgewandelt.
- 100 % Deckkraft → 255 →
FF - 75 % Deckkraft → 191 →
BF - 50 % Deckkraft → 128 →
80 - 25 % Deckkraft → 64 →
40 - 10 % Deckkraft → 26 →
1A
Diese Umrechnung im Kopf zu machen ist mühsam, weil das Hexadezimalsystem nicht zur Prozentlogik passt. Genau dafür gibt es den Opacity Hex Rechner: Du gibst die gewünschte Deckkraft in Prozent ein und erhältst sofort das passende Hex-Alpha-Suffix, das du an deine Farbe anhängen kannst.
Wofür man Hex-Alpha braucht
Transparente Farben sind im modernen Web design allgegenwärtig:
- Overlays: ein halbtransparentes Schwarz über einem Bild, damit weißer Text darauf lesbar bleibt.
- Glas-Effekte: milchige Flächen mit niedriger Deckkraft, oft kombiniert mit Weichzeichnung.
- Schatten: Schlagschatten wirken nur mit transparentem Schwarz natürlich, nie mit vollem Schwarz.
- Hover-States: ein dezenter, halbtransparenter Farbschleier über Buttons oder Karten.
Hex-Alpha oder rgba?
CSS bietet zwei Wege, Transparenz auszudrücken. Der 8-stellige Hex-Wert (#000000B3) ist kompakt und passt gut zu Design-Tokens und Tools, die ohnehin Hex liefern. Die Funktion rgba(0, 0, 0, 0.7) ist dagegen besser lesbar, weil die Deckkraft direkt als Dezimalzahl dasteht. Beide werden von allen modernen Browsern unterstützt – die Wahl ist Geschmackssache und hängt davon ab, wie dein Projekt sonst Farben notiert.
Ein häufiger Stolperstein: Verwechsle die Eigenschaft opacity nicht mit Hex-Alpha. opacity macht ein ganzes Element samt allen Kindelementen durchsichtig, während ein Hex-Alpha-Wert nur die eine Farbe betrifft, in der er steht. Wenn nur die Hintergrundfarbe transparent sein soll, ist Hex-Alpha oder rgba die richtige Wahl.
Vom Alpha-Wert zur Palette
Wenn du mit halbtransparenten Farben arbeitest, willst du oft auch passende volle Abstufungen derselben Farbe. Dafür eignet sich der Color Shades Generator, der dir aus einer Basisfarbe eine Reihe hellerer und dunklerer Töne erzeugt. So kombinierst du deckende und transparente Varianten zu einem stimmigen System.
Weitere Werkzeuge für Farbe, CSS und Code findest du in der Web tools-Übersicht. Mit dem Opacity Hex Rechner übersetzt du jede Deckkraft in den passenden Hex-Alpha-Wert – ganz ohne Kopfrechnen im Hexadezimalsystem.
