RGBA-Generator
Farbe mit Transparenz erzeugen: Deckkraft einstellen, Vorschau auf hellem, dunklem und kariertem Grund, Werte als RGBA, HEX8, HSL und OKLCH.
Der RGBA-Generator erzeugt Farben mit Transparenz. Du wählst eine Farbe und die Deckkraft und siehst sie auf weißem, schwarzem, kariertem und buntem Grund. Ausgegeben werden alle CSS-Schreibweisen von rgba() über HEX mit Alphakanal bis OKLCH sowie die deckende Mischfarbe auf einem Hintergrund deiner Wahl.
HEX mit Alpha (HEX8)
#2563eb99
Die letzten zwei Zeichen (99) sind die Deckkraft.
RGB
rgb(37 99 235 / 0.6)
RGB (mit Kommas)
rgba(37, 99, 235, 0.6)
HSL
hsl(221 83% 53% / 0.6)
HSL (mit Kommas)
hsla(221, 83%, 53%, 0.6)
HWB
hwb(221 15% 8% / 0.6)
OKLCH
oklch(0.546 0.215 262.88 / 0.6)
OKLab
oklab(0.546 -0.027 -0.214 / 0.6)
CMYK (einfach)
cmyk(84% 58% 0% 8%)
Deckende Mischfarbe
#7ca1f3
So sieht die Farbe auf diesem Hintergrund aus.
Transparente Farben in CSS
Jede CSS-Farbe kann einen Alphakanal haben. Die klassische Schreibweise ist rgba(37, 99, 235, 0.6), moderner ist rgb(37 99 235 / 0.6) ohne
Kommas. Dasselbe funktioniert mit hsl() und oklch().
| Schreibweise | Beispiel (60 %) |
|---|---|
| RGBA | rgba(37, 99, 235, 0.6) |
| RGB modern | rgb(37 99 235 / 0.6) |
| HEX8 | #2563eb99 |
| OKLCH | oklch(0.546 0.215 262.9 / 0.6) |
Weitere Umrechnungen ohne Transparenz macht der Farbumrechner. Ob Text auf der Mischfarbe lesbar ist, prüft der Farbkontrast-Prüfer.
Häufige Fragen
Was bedeutet das A in RGBA?
A steht für Alpha, die Deckkraft. 1 ist voll deckend, 0 unsichtbar, 0,5 halb durchsichtig. In moderner Schreibweise steht sie nach einem Schrägstrich: rgb(37 99 235 / 0.6).
Wie schreibe ich Transparenz als HEX?
Mit acht Stellen: Die letzten beiden geben die Deckkraft von 00 bis FF an. #2563eb99 entspricht etwa 60 % Deckkraft. Alle aktuellen Browser unterstützen diese Schreibweise.
opacity oder rgba?
opacity macht das ganze Element samt Text und Kindern durchsichtig. Eine Farbe mit Alpha betrifft nur die eine Eigenschaft, etwa den Hintergrund, und der Text bleibt deckend.
Wofür brauche ich die deckende Mischfarbe?
Für Kontrastprüfungen und für Stellen, an denen keine Transparenz möglich ist, etwa in E-Mails oder Druckvorlagen. Sie zeigt, welche Farbe auf einem bestimmten Hintergrund tatsächlich sichtbar ist.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.