Konvertiere HEX und RGBA, ohne Transparenz zu verlieren

Wenn eine halbtransparente Farbe nach dem Kopieren und Einfügen undurchsichtig wird, überprüfe, welches Ausgabeformat du kopiert hast. Eine sechsstellige HEX-Farbe enthält Rot, Grün und Blau; sie hat keinen Alphakanal. Im Farbkonverter verwende HEX · mit Alpha, RGBA, HSLA oder Modernes CSS, wenn du die Transparenz erhalten möchtest.

Probiere rgba(255, 136, 0, 0.5) im Feld Zu konvertierende Farbe aus. Die Vorschau zeigt dasselbe Orange über einem Schachbrettmuster, Weiß und einem dunklen Hintergrund. Die undurchsichtigen und halbtransparenten Ausgaben stehen nebeneinander, daher ist die Wahl wichtig.

Ausgabe kopieren, die Alpha erhält

Für diese Eingabe erzeugt das Tool:

/* Opaque: alpha is omitted */
#FF8800
rgb(255, 136, 0)

/* Keeps the decimal alpha */
rgba(255, 136, 0, 0.5)
rgb(255 136 0 / 50%)

/* Alpha rounded to one byte */
#FF880080

Benutze die Kopieren-Schaltfläche neben dem benötigten Format. CSS-Variablen kopieren liefert zwei Variablen: --color ist undurchsichtig und --color-alpha erhält die Transparenz in moderner RGB-Syntax. Wenn du für eine Überlagerung die erste Variable wählst, wird sie undurchsichtig, obwohl die zweite Variable im gleichen Code-Snippet vorhanden ist.

Du kannst die CSS-Beispiele herunterladen und in deinem eigenen Stylesheet ausprobieren. Die Notation wählt nicht automatisch dein Element oder die CSS-Eigenschaft aus.

Warum 50 % in HEX etwa 50,2 % werden

CSS verwendet die letzten zwei Stellen einer achtstelligen HEX-Farbe für Alpha. 00 ist vollständig transparent und FF vollständig undurchsichtig; die MDN-HEX-Dokumentation beschreibt die Reihenfolge und Kurzschreibweise.

Es gibt 256 mögliche Alpha-Werte (0 bis 255). Die Mitte zwischen 0 und 255 ist 127,5, daher rundet dieser Konverter 50 % auf 128, geschrieben als 80. Beim Zurücklesen entspricht das 128 ÷ 255, also etwa 50,1961 %.

Füge #FF880080 wieder als Eingabe ein. Das Tool zeigt rgba(255, 136, 0, 0.501961). Diese kleine Änderung ist Quantisierung, keine zweite Opazitätseinstellung. Behalte die dezimale Alpha-Form, wenn du genau 0,5 erhalten möchtest; angezeigte Dezimalwerte können bei anderen Eingaben gerundet sein.

Kurze HEX-Form kann größere Unterschiede verbergen

Diese Eingaben sind leicht zu verwechseln:

Jede Ziffer in vierstelligen HEX wird verdoppelt. Das letzte 8 wird zu 88, nicht zu 80, daher ist die Kurzform oben keine 50-%-Abkürzung. Die Konversionsergebnisse enthalten alle drei Eingaben und das Orange-Beispiel.

Hintergrund prüfen vor dem Einsatz

Übereinstimmende Farbwerte garantieren nicht dasselbe Aussehen auf jeder Oberfläche. Die weißen und dunklen Vorschauen des Konverters helfen dir zu erkennen, dass eine Überlagerung vom Hintergrund abhängt. Für Text überprüfe auch das tatsächliche Text-/Hintergrundpaar; unser Kontrast-Guide erklärt diese separate Prüfung.

Dieser Konverter verarbeitet die angegebenen HEX-, RGB-, HSL- und HSV-Eingaben. Er löst keine CSS-Variablen auf, keine Farbnamen außer transparent und keine Wide-Gamut-Farbräume. Die CMYK-Ausgabe ist eine Annäherung ohne Druckprofil, und HSV/CMYK-Notation ist kein CSS-Wert zum Einfügen in Stylesheets.

Wir haben diese Beispiele am 21. Oktober 2026 mit dem Tool geprüft. Der Ergebnisdatensatz speichert die geparsten Kanäle und formatierten Ausgaben; es ist kein Test für Display-Kalibrierung oder Druckfarbe.