CSS und Design
HEX RGB und HSL Farbkonverter
Wandle Farben zwischen HEX, RGB, RGBA, HSL und HSLA um. Jedes Feld ist Eingabe und Ausgabe: du editierst HEX, fügst rgb() oder hsl() aus dem Stylesheet ein oder stellst R, G, B beziehungsweise H, S und L per Zahl ein, alle anderen Formate passen sich sofort an.
CSS und Design
HEX, RGB, RGBA, HSL und HSLA umrechnen
Du kannst jedes Feld bearbeiten. Das zuletzt geänderte Feld steuert die Umrechnung, alle anderen Formate aktualisieren sich live.
Vorschau
Anzeige rundet geringfügig. Sehr lange Dezimalstellen können leicht von deinem Design Tool abweichen.
Anleitung
So nutzt du dieses Tool
Die folgenden Hinweise erklären die Eingaben, Formeln und typische Entscheidungen rund um den Rechner.
Übernehme HEX mit oder ohne Kreuz, kopiere klassische css() Strings oder passe die Zahlenfelder für R G B bzw H S und L direkt an. Der native Farbwähler unterstützt nur undurchsichtige Farben, hilft aber schnell bei der ersten Wahl.
RGBA und HSLA zeigen sowie die achtstellige HEX Form den Kanaldeckungsgrad an. Bei reinem RGB ohne Alpha bleibt der letzte bekanntere Alpha Kanal bestehen bis du ihn in RGBA HEX oder hsla() änderst.
Unter anderem drei und sechs sowie acht stelliges HEX sowie rgb hsl und die Varianten mit Komma oder Leerzeichen und optional Slash Syntax für Alpha. Bei unbekanntem Text bleiben die anderen Felder unverändert und ein kurzer Hinweis erscheint.
Leistungen & Services
Von Shop-Systemen bis Marketing, hier findest du unsere Schwerpunkte im Überblick.
Farben zwischen HEX, RGB und HSL synchron halten
Der HEX RGB HSL Konverter vereinheitlicht Farbangaben aus Design-Handoffs, Theme-JSON und Legacy-CSS. Jede Eingabefläche aktualisiert die übrigen Formate live, sodass du schnell prüfen kannst, ob ein Farbwert zu Tokens, Styleguides oder Barrierefreiheitsvorgaben passt.
HEX ist kompakt und weit verbreitet. RGBA und HSLA machen Transparenz explizit. HSL erleichtert das Feintuning von Helligkeit oder Sättigung, wenn du Farbschemata systematisch variieren willst.
Wann welches Format Sinn ergibt
- HEX für kurze Notationen in Konfigurationen und älteren Stylesheets.
- RGB oder RGBA, wenn du Farben aus Bildbearbeitung oder Analytics-Exports übernimmst.
- HSL oder HSLA, wenn du Farbverläufe oder States programmatisch ableiten willst.
Barrierefreiheit und Qualitätssicherung
Der Rechner zeigt numerische Werte, ersetzt aber keinen Kontrast-Checker nach WCAG. Nutze zusätzliche Tools, sobald Text auf Vollflächen sitzt oder dynamische Theming-Modi aktiv sind.
Typische Einsatzorte im Shop-Alltag
- Abgleich von Markenfarben zwischen Figma und Theme-Variablen.
- Normalisierung von Snippets aus Drittanbieter-Widgets.
- Dokumentation von Hover- und Focus-States mit identischer Farbfamilie.
Die Eingabeparser akzeptieren gängige CSS-Schreibweisen. Unbekannte Strings lösen einen Hinweis aus, ohne gültige Werte zu überschreiben.