HEX-RGB-Konverter
Konvertieren Sie Farben zwischen HEX, RGB(A) und HSL(A) mit Live-Aktualisierung, Alpha-Unterstützung und kopierbaren CSS-Werten.
🔒 Läuft vollständig in Ihrem Browser — nichts wird hochgeladenFarbformate umrechnen, ohne zu raten
Farbwerte wandern oft zwischen Tools, die unterschiedliche Formate bevorzugen. Ein Designer übergibt vielleicht ein HEX-Token, eine CSS-Animation braucht RGB-Kanäle, und eine Theme-Anpassung gelingt am einfachsten in HSL. Dieser HEX-RGB-Konverter hält die gängigen Webformate synchron: Geben Sie die Version ein, die Sie haben, und kopieren Sie die, die Sie brauchen. Die Live-Vorschau macht Fehler außerdem sofort sichtbar: Wird ein Kanal falsch eingegeben, ändert sich die Vorschau umgehend.
Der Konverter unterstützt den alltäglichen CSS-Workflow: sechsstelliges HEX, RGB, RGBA, HSL und HSLA. Alpha wird separat gesteuert, weil Deckkraft meist eine Gestaltungsentscheidung ist und nicht Teil eines Marken-Farbtokens. Setzen Sie Alpha auf eins für deckende Farben oder senken Sie den Wert, um Overlays, Fokusringe, Schatten und transparente Hintergründe mit demselben zugrunde liegenden Farbton zu erzeugen.
Wann RGB, RGBA, HSL oder HSLA verwenden
RGB beschreibt die Bildschirmfarbe direkt und ist nützlich, wenn Sie Werte aus Screenshots, Canvas-Ausgaben oder älteren Design-Tools abgleichen. RGBA ergänzt Transparenz, praktisch für Overlays und dezente Rahmen. HSL beschreibt Farbe über Farbton, Sättigung und Helligkeit und ist daher natürlicher, wenn Sie verwandte Farben erzeugen möchten: Drehen Sie den Farbton für einen neuen Akzent, senken Sie die Sättigung für einen gedämpften Zustand oder erhöhen Sie die Helligkeit für einen Tint. HSLA bringt dieselbe Alpha-Steuerung in dieses besser lesbare Modell.
Verlässliche Werte für CSS und Design-Tokens
In Designsystemen kommt es auf konsistente Umrechnungen an. Rundungsfehler oder kopierte Tippfehler erzeugen fast identische Farben, die schwer zu bemerken, aber mühsam zu pflegen sind. Dieses Tool begrenzt RGB-Kanäle auf den gültigen Bereich 0–255, hält HSL-Prozentwerte im Bereich 0–100 und formatiert die Ausgabe als direkt einfügbares CSS. Da alles lokal läuft, können Sie unveröffentlichte Produktfarben, Kundenpaletten oder interne Marken-Tokens sicher umrechnen, ohne sie irgendwohin hochzuladen.
So verwenden Sie
- Wert eingebenGeben Sie einen HEX-Wert ein oder passen Sie die RGB- und HSL-Kanäle an.
- Formate prüfenDer Konverter hält die Ausgaben in HEX, RGB(A) und HSL(A) synchron.
- CSS kopierenÜbernehmen Sie das benötigte Format mit den Kopier-Buttons in CSS, Design-Tokens oder Dokumentation.