CSS-Farbkonverter: HEX zu RGB & HSL

Konvertiere CSS-Farben zwischen HEX, RGB und HSL mit Live-Farbfeld und Alpha-Unterstützung.

Jede eingegebene Farbe wird lokal in deinem Browser konvertiert und nichts wird auf einen Server hochgeladen.

Entwickelt und gepflegt von Udit Agarwal

HEX, RGB and HSL Color Codes, Explained

Lesbarkeit prüfen? Probiere den Kontrast-Checker.

Über CSS-Farbkonverter

Dieser CSS-Farbkonverter wandelt jeden Farbwert gleichzeitig in HEX, RGB und HSL um, mit einer Live-Farbfeldvorschau, sodass du den genauen Farbton beim Tippen siehst. Füge einen Hex-Code, einen rgb()- oder hsl()-Wert oder einen gängigen CSS-Farbnamen wie blue, teal oder gold ein, und das Tool normalisiert die Eingabe sofort in alle drei Formate. Es behandelt auch Transparenz, einschließlich rgba(), hsla() und 8-stelligem Hex mit Alphakanal. Ob du hex-zu-rgb-Berechnungen für ein Design-Token machst, rgb zu hex für ein Stylesheet konvertierst oder einen HSL-Wert beim Abstimmen einer Palette prüfst, es hält jedes Format synchron. Gebaut für Frontend-Entwickler, Designer und QA-Ingenieure, die täglich mit Farbformaten jonglieren. Alles läuft lokal in deinem Browser, sodass die eingegebenen Werte dein Gerät nie verlassen.

Funktionen

  • Konvertiert HEX, RGB und HSL gleichzeitig aus einer einzigen Eingabe
  • Erkennt gängige CSS-Farbnamen wie blue, teal und gold
  • Unterstützt Transparenz über rgba(), hsla() und 8-stelliges Hex-Alpha
  • Live-Farbfeldvorschau aktualisiert sich sofort beim Tippen
  • Akzeptiert verkürzte 3- und 4-stellige Hex-Codes
  • Normalisiert Prozent- und 0-255-RGB-Kanalwerte
  • Zeigt eine klare Inline-Fehlermeldung, wenn ein Wert nicht geparst werden kann
  • Lokal in deinem Browser verarbeitet

So verwendest du CSS-Farbkonverter

  1. Tippe oder füge eine Farbe in das Farb-Eingabefeld ein.
  2. Verwende einen Hex-Code, rgb(), hsl() oder einen CSS-Farbnamen wie blue.
  3. Lies die konvertierten HEX-, RGB- und HSL-Werte in den Ergebniszeilen.
  4. Prüfe das Farbfeld neben der Eingabe, um die genaue Farbe vorzuschauen.

Beispiel

Eingabe

#3b82f6

Ausgabe

HEX  #3b82f6
RGB  rgb(59, 130, 246)
HSL  hsl(217, 91%, 60%)

Ein Hex-Wert in RGB und HSL umgewandelt mit passendem Live-Farbfeld.

Häufige Fehler & Fehlerbehebung

  • "Diese Farbe konnte nicht geparst werden" erscheint nach Eingabe eines Werts. — Verwende einen gültigen Hex-Code, rgb()/rgba(), hsl()/hsla() oder einen unterstützten CSS-Farbnamen; fremde Zeichen oder fehlende Klammern brechen das Parsen.
  • Ein CSS-Farbname wie "salmon" wird nicht erkannt. — Nur eine kuratierte Auswahl gängiger Namen wird unterstützt. Gib stattdessen den entsprechenden Hex- oder rgb()-Wert ein.
  • Alpha geht nach der Konvertierung verloren. — Füge den Alphakanal in die Eingabe ein, etwa rgba(0,0,0,0.5) oder ein 8-stelliges Hex wie #00000080, und er wird in alle Formate übernommen.
  • RGB-Werte über 255 oder Prozentangaben sehen falsch aus. — Kanäle werden auf den gültigen Bereich begrenzt; gib Zahlen von 0-255 oder Prozentwerte von 0%-100% ein, um das erwartete Ergebnis zu erhalten.

Häufig gestellte Fragen

Was ist der CSS-Farbkonverter?
Es ist ein Tool im Browser, das jeden HEX-, rgb()/rgba()-, hsl()/hsla()- oder gängigen CSS-Farbnamen liest und in HEX, RGB und HSL zusammen mit einer Live-Farbfeldvorschau umwandelt.
Wie konvertiere ich HEX mit diesem Tool zu RGB und HSL?
Füge einen Hex-Code wie #3b82f6 in das Farbfeld ein, und der CSS-Farbkonverter zeigt sofort die passenden rgb()- und hsl()-Werte in den Ergebniszeilen.
Unterstützt der CSS-Farbkonverter Transparenz und Alphakanäle?
Ja. rgba(), hsla() und 8-stelliges Hex mit Alphawert werden alle geparst, und das Alpha bleibt über jedes Ausgabeformat hinweg erhalten.
Kann ich einen CSS-Farbnamen statt eines Codes einfügen?
Ja, Standardnamen wie blue, teal, gold und indigo werden erkannt und in HEX, RGB und HSL konvertiert.
Akzeptiert es verkürzte Hex-Codes?
Ja, 3-stelliges und 4-stelliges Kurz-Hex wie #f00 oder #f00a werden vor der Konvertierung automatisch erweitert.
Werden die eingegebenen Farbwerte irgendwohin hochgeladen?
Nein. Der CSS-Farbkonverter läuft vollständig in deinem Browser, sodass die eingegebenen Werte lokal verarbeitet werden und dein Gerät nie verlassen.

Verwandte Tools

  • Kontrast-Checker — Prüfe das WCAG-Kontrastverhältnis und ob AA/AAA zwischen zwei Farben bestanden wird.
  • CSS-/SCSS-Formatierer — Verschönere oder minimiere CSS/SCSS/LESS, sortiere Eigenschaften und entferne Duplikate.
  • SVG-Optimierer — Minimiere SVG: entferne Kommentare, Metadaten und Editor-Reste und reduziere Leerzeichen.
  • Zahlenbasis-Konverter — Konvertiere ganze Zahlen zwischen binär, oktal, dezimal und hexadezimal.
  • HTML escapen / entescapen — Escape und entescape HTML-Sonderzeichen und -Entitäten.
  • JS-/TS-Formatierer — Verschönere JavaScript, TypeScript und JSX/TSX mit Prettier-Optionen oder minimiere reines JavaScript.
  • HTML-Formatierer — Verschönere oder minimiere HTML, formatiere eingebettetes CSS/JS und zeige eine Vorschau.

Weitere Code-Formatierer-Tools

  • Text vergleichen — Vergleiche zwei Texte Zeile für Zeile und sieh Hinzufügungen und Löschungen.
  • MDX-Konverter — Rendere MDX als Text, konvertiere HTML → MDX und escape Text zu MDX-Literalen.
  • CSS-/SCSS-Formatierer — Verschönere oder minimiere CSS/SCSS/LESS, sortiere Eigenschaften und entferne Duplikate.
  • JS-/TS-Formatierer — Verschönere JavaScript, TypeScript und JSX/TSX mit Prettier-Optionen oder minimiere reines JavaScript.
  • HTML-Formatierer — Verschönere oder minimiere HTML, formatiere eingebettetes CSS/JS und zeige eine Vorschau.
  • XML-Formatierer — Verschönere, minimiere und validiere XML und konvertiere XML ↔ JSON.
  • SQL-Formatierer — Formatiere SQL für MySQL, PostgreSQL, SQL Server, SQLite, BigQuery und Oracle.
  • GraphQL-Formatierer — Formatiere oder minimiere GraphQL-Abfragen und -Schemas, validiere die Syntax und extrahiere Operationen.
  • Dockerfile-Formatierer — Formatiere ein Dockerfile und erhalte Best-Practice- und Lint-Hinweise.
  • MongoDB-Query-Formatierer — Formatiere MongoDB-Shell-Abfragen und Aggregations-Pipelines.
  • Kontrast-Checker — Prüfe das WCAG-Kontrastverhältnis und ob AA/AAA zwischen zwei Farben bestanden wird.
  • Mermaid-Diagramm-Renderer — Rendere Mermaid-Diagramme (Fluss, Sequenz, Gantt) als SVG in deinem Browser.

Alle Code-Formatierer-Tools ansehen (32) · Alle Tools