Zum Inhalt springen
Toolars
Erkunden
Fehler melden

Design · Lokal-Werkzeug

HEX zu RGBA

HEX to RGBA Converter

Konvertiere HEX-Farben in allen vier Schreibweisen von #RGB bis #RRGGBBAA präzise in rgba() — inklusive Alpha als Byte geteilt durch 255.

Aufgabenpfad / von der Eingabe zum Ergebnis

Gib die HEX-Farbe ein

Läuft lokal · Nichts wird hochgeladen

Wie HEX zu RGBA funktioniert, Datenschutz und verwandte Tools

Aufgabenpfad / von der Eingabe zum Ergebnis

So wandelst du eine HEX-Farbe in RGBA um

  1. 01

    Gib die HEX-Farbe ein

    Tippe den Wert in das Feld HEX-Farbe, das mit #6D5EF8CC vorbefüllt startet. Der strikte Parser akzeptiert #RGB, #RGBA, #RRGGBB und #RRGGBBAA — die Hilfe unter dem Feld listet genau diese vier Formate, und das Feld begrenzt die Eingabe auf neun Zeichen.

  2. 02

    Führe die Umwandlung aus

    Drücke In RGBA umwandeln. Der Parser validiert den gesamten Wert, bevor etwas rendert, und ein fehlerhafter Wert wird mit einer Meldung abgelehnt, die die vier akzeptierten Formate nennt. Das Bearbeiten des Felds löscht das vorherige Ergebnis, das Panel darunter zeigt also nie eine veraltete Farbe.

  3. 03

    Lies die RGBA-Kanäle

    Alpha wird als sein Byte geteilt durch 255 dekodiert, ohne Rundung während der Berechnung. RGBA und die Kanalanzeige verwenden bis zu sechs Dezimalstellen; alle 256 Alpha-Bytes überstehen den Roundtrip durch das exportierte RGBA.

  4. 04

    Prüfe das Farbfeld

    Das große Vorschau-Farbfeld rendert die umgewandelte Farbe direkt, ein transluzentes Ergebnis ist also sofort gegen die Seite sichtbar. Nutze es, um vor dem Kopieren zu bestätigen, dass das Alpha so liest, wie das Design es beabsichtigt hat.

  5. 05

    Lade bei Bedarf das Beispiel

    Drücke Beispiel laden, um ein vollständiges Beispiel laufen zu lassen — #22C55E99 wird zu rgba(34, 197, 94, 0.6) —, das den ganzen Ablauf von der Eingabe zu den Kanälen zeigt. Zurücksetzen stellt das Feld auf #6D5EF8CC zurück und löscht das Ergebnis.

  6. 06

    Kopiere oder lade das Ergebnis herunter

    Drücke Ausgabe kopieren, um den rgba()-Wert in die Zwischenablage zu kopieren, oder Herunterladen, um ihn als toolars-color-rgba.txt zu speichern. Beide Aktionen bleiben deaktiviert, bis eine Umwandlung erfolgreich war, du kopierst also nie ein leeres Ergebnis.

Tool-Fakten

Verarbeitung
In deinem Browser
Eingabe verlässt dieses Gerät
Nie
Aufbewahrung
Nichts wird gespeichert
Preis
Kostenlos

Deine Eingabe bleibt im Browser.

HEX zu RGBA nutzt seinen verifizierten lokalen Ausführungspfad und erstellt keinen versteckten Ein- oder Ausgabeverlauf.

Lokale Ausführung

Läuft im aktuellen Browser-Tab.

Keine versteckte Verarbeitung

Aktive Tool-Daten werden nie zu einem Toolars-Dokumentdatensatz.

Kein Konto erforderlich

Nutze den Kern-Workflow ohne Profil. Favoriten werden mit deinem Konto synchronisiert, sobald du dich anmeldest.

Sofortiges Zurücksetzen

Leere den Tab, und die aktiven Arbeitsdaten sind weg.

Was HEX zu RGBA tatsächlich tut

Eine Design-Übergabe listet eine transluzente Markenfarbe als #6D5EF8CC, und das Stylesheet, das du bearbeitest, will rgba(): Die Rot-, Grün- und Blau-Bytes sind machbar, aber CC heißt 204 von 255 — etwa 0,8 Alpha —, und das im Kopf zu rechnen lädt zu Fehlern ein. Der HEX-zu-RGBA-Konverter dekodiert jede Zifferngruppe exakt, expandiert Kurzform-Ziffern und zeigt jeden Kanal zur Kontrolle neben einem Live-Farbfeld. Der kopierte String fällt direkt in eine Rahmen-, Schatten- oder Verlaufsdeklaration. Der Wert verlässt nie den Tab, die Umwandlung passt also in jede datenschutzsensible Codebasis.

Häufige Fragen

Welche HEX-Formate werden akzeptiert?
Genau vier: #RGB, #RGBA, #RRGGBB und #RRGGBBAA. Alles andere — ein fehlendes #, fünf Ziffern oder ein Farbschlüsselwort — wird mit einer Meldung abgelehnt, die die akzeptierten Formate nennt.
Wie werden die Kurzformate expandiert?
Jede Ziffer verdoppelt sich: #RGB wird zu #RRGGBB, indem jedes Zeichen wiederholt wird, #6F8 dekodiert also als Rot 102, Grün 255, Blau 136. In #RGBA verdoppelt sich die vierte Ziffer zum Alpha-Byte, bevor das übliche 0–255-zu-0–1-Mapping greift.
Wie wird das Alpha-Byte umgewandelt?
Alpha wird als sein Byte geteilt durch 255 dekodiert, ohne Rundung während der Berechnung. RGBA und die Kanalanzeige verwenden bis zu sechs Dezimalstellen; alle 256 Alpha-Bytes überstehen den Roundtrip durch das exportierte RGBA.
Warum ist mein Ergebnis verschwunden?
Das Bearbeiten des Eingabefelds löscht das vorherige Ergebnis absichtlich, damit das Panel nie eine Farbe zeigen kann, die nicht mehr zum Getippten passt. Drücke In RGBA umwandeln erneut und das frische Ergebnis erscheint sofort.
Kann ich in die andere Richtung umwandeln?
Ja — nutze den RGBA-zu-HEX-Konverter, der die Notationen rgb() und rgba() akzeptiert und den passenden Hex-Wert erzeugt, inklusive Alpha-Byte, wenn die Farbe transluzent ist. Die beiden Tools teilen dieselbe Kanalrechnung, ein Roundtrip liefert also den Wert zurück, mit dem du gestartet bist.
Wird die Farbe irgendwohin gesendet?
Nein. Die Umwandlung läuft vollständig in diesem Browser-Tab, Eingaben und Ergebnisse verlassen ihn nie, und es ist kein Konto nötig.

Weiter in Design

Verwandte Aufgaben statt Sackgasse.

Wechsle in einen anderen fokussierten Arbeitsbereich, ohne zum vollständigen Index zurückzukehren.

Generator für CSS-Ladeanimationen

CSS Loader Generator

Gestalte Ladeindikatoren als Ring oder Punkte mit 24 bis 160 px Rahmen und 0,2 bis 4 Sekunden Zyklus — mit Live-Vorschau und Code zum Kopieren.

Erstellen

CSS-Checkbox-Generator

CSS Checkbox Generator

Style eigene Checkboxen auf Basis eines nativen input-Elements — mit Fokus-Umriss, Disabled-Zustand und Reduced-Motion-Variante im kopierfertigen CSS.

Erstellen

CSS-Switch-Generator

CSS Switch Generator

Entwirf Umschalter aus reinem CSS mit frei bemessener Schiene und Regler, 180-ms-Transition und Reduced-Motion-Fallback — Code zum Kopieren.

Erstellen

CSS-clip-path-Generator

CSS Clip Path Generator

Bearbeite Polygonpunkte per Ziehen, Tastatur oder Koordinaten. Vier Vorlagen und lokaler Export als clip-path-Deklaration oder vollständiges CSS.

Erstellen