Zum Hauptinhalt springen
Palette

HEX-, RGB- und HSL-Farbkonverter

Konvertieren Sie deckende sRGB-Farben zwischen 3/6-stelligem HEX, kommagetrenntem Ganzzahl-RGB und Prozent-HSL und erzeugen Sie klassische, pastellige oder kräftige Farbstufen. Unverzichtbar für Webentwickler, UI-Designer und Grafiker, die Farbwerte zwischen Design-Tools, CSS und Prototyping-Plattformen übertragen. Bietet sofortige Vorschau und Kopierfunktion für alle Formate.

#6366f1
FARBE AUSWÄHLEN
Live-Farbvorschau

CSS-Ausgaben

HEX-CODE
#6366f1
RGB-WERT
rgb(99, 102, 241)
HSL-FORMAT
hsl(239, 84%, 67%)
TAILWIND UTILITY STIL
bg-[#6366f1]

Berechnete Schattierungen & Kernwerte (Wind)

Klicken Sie auf eine Farbprobe, um sie als Basisfarbe anzuwenden.

50
#eff0fe
100
#d8d9fc
200
#b1b3f8
300
#9294f5
400
#7a7df3
500
#6366f1
600
#595cd9
700
#4a4db5
800
#3b3d91
900
#282960
950
#191a3c

Kurz erklärt

Übersetzen Sie nur die tatsächlich unterstützten Syntaxformen, kopieren Sie CSS oder eine Tailwind-Arbitrary-Klasse und kennzeichnen Sie 50–950-Stufen als eigene statt offizielle Palette.

Unterstützte Funktionen

  • Deckende Hexwerte #RGB und #RRGGBB.
  • Historisches rgb(r, g, b) mit Ganzzahlen 0–255.
  • Historisches hsl(h, s%, l%) mit 0–360 und 0–100 Prozent.
  • Kopierbare HEX-, RGB-, HSL- und bg-[#rrggbb]-Ausgabe.
  • Elf eigene Stufen 50–950 in klassisch, pastell oder kräftig.

HEX-, RGB- und HSL-Farbkonverter verwenden

Führen Sie einen überprüfbaren HEX-, RGB- und HSL-Farbkonverter-Ablauf in diesem Browser aus.

  1. 1

    Schritt 1

    Exakte Eingabe bereitstellen

    Unterstütztes HEX, RGB oder HSL eingeben oder den nativen Farbwähler nutzen.

  2. 2

    Schritt 2

    Verfügbare Optionen setzen

    Passenden Tab wählen; moderne Syntax, Alpha, Namen, HWB, Lab und OKLCH werden nicht geparst.

  3. 3

    Schritt 3

    Vorgang ausführen

    Konvertieren oder Zufallsfarbe auslösen und Stufenmodus wählen.

  4. 4

    Schritt 4

    Ergebnis prüfen

    Werte und Vorschau vergleichen; Kontrast separat messen.

  5. 5

    Schritt 5

    Weitergeben oder exportieren

    Exakten Wert kopieren und Stufennummern als eigene Palette dokumentieren.

Häufige Fehler

rgb(255 128 0 / 50%) eingeben

Folge: Moderne Syntax mit Alpha wird abgelehnt.

Lösung: Hier rgb(255, 128, 0) oder einen vollständigen CSS-Parser nutzen.

Stufen als offizielle Tailwind-Palette bezeichnen

Folge: Berechnete Farben unterscheiden sich von kuratierten Tokens.

Lösung: Als eigene Palette kennzeichnen und Arbitrary-Klasse kopieren.

Barrierefreiheit visuell beurteilen

Folge: Sichtbarer Unterschied garantiert keinen Mindestkontrast.

Lösung: WCAG-Kontrast separat messen.

Bewährte Verfahren

  • Originalnotation bei Präzisionsbedarf behalten.
  • #ff8000 → rgb(255, 128, 0) → hsl(30, 100%, 50%) testen.
  • Eigene Stufen kennzeichnen und Kontrast je Einsatz messen.
  • Endgültiges CSS in Zielbrowsern prüfen.

Verbundene Abläufe

Browser-Einschränkungen

  • Keine Alphakanäle und keine moderne CSS-Funktionssyntax.
  • Rundung auf 8-Bit-sRGB und ganzzahlige HSL-Werte.
  • Nativer Farbwähler und Farbmanagement unterscheiden sich je Browser und Display.

Verbindliche Quellen

CSS Color Module Level 4Herausgeber: W3C · Geprüft: 2026-07-26HTML Standard: Color stateHerausgeber: WHATWG · Geprüft: 2026-07-26

Konkrete Beispiele

Eingabe
#ff8000
Ergebnis
rgb(255, 128, 0); hsl(30, 100%, 50%); bg-[#ff8000]

Die deckenden sRGB-Kanäle sind 255, 128 und 0; HSL wird auf 30°, 100 %, 50 % gerundet.

Häufig gestellte Fragen

Warum wird 8-stelliges HEX abgelehnt?

Akzeptiert werden nur #RGB und #RRGGBB ohne Alpha.

Ist rgb(255 128 0) gültig?

Nicht in dieser Oberfläche; nutzen Sie rgb(255, 128, 0).

Sind 50–950 offizielle Tailwind-Farben?

Nein, es sind lokal berechnete Varianten.

Prüft das Werkzeug WCAG-Kontrast?

Nein, es berechnet keine Kontrastverhältnisse.

Warum ändert sich HSL beim Rundlauf?

Komponenten werden auf Ganzzahlen gerundet.

Werden Farben übertragen?

Nein, alle Berechnungen bleiben lokal.

Datenschutz und Offline-Verhalten

Parsing, Konvertierung, Stufen, Vorschau und Kopie laufen lokal im Browser ohne Upload. Nach dem Cachen statischer Ressourcen ist Offline-Nutzung möglich.