~/devtools / color
tool::color

Color
Converter

Farben in Echtzeit zwischen HEX, RGB und HSL konvertieren. Farbe visuell auswählen oder in einem beliebigen Format eingeben.

ad · 728×90
// Farbformate
HEX: #RRGGBB — RGB: rgb(R, G, B) — HSL: hsl(H°, S%, L%)
// Farbwähler
#00FF88
// Formate
HEX
RGB
HSL
// Presets
ad · 300×250
// about this tool

Was ist ein Color Converter?

Web-Entwicklung und Design erfordern häufig das Wechseln zwischen HEX-, RGB- und HSL-Farbformaten. Design-Tools geben häufig HEX aus, während CSS manchmal von rgb() oder hsl() für bessere Lesbarkeit profitiert.

HEX (#RRGGBB) ist die verbreitetste Web-Farbnotation. RGB drückt die Intensität jedes Kanals von 0 bis 255 aus. HSL — Hue, Saturation, Lightness — ist intuitiver für das Anpassen von Farben und eignet sich hervorragend zum Erstellen von Paletten.

Dieses Tool konvertiert in Echtzeit zwischen allen drei Formaten. Farben können auch visuell mit dem Farbwähler ausgewählt werden. Konvertierte Werte lassen sich per Klick für die direkte Verwendung in CSS kopieren.

Anwendungsfälle
  • ▸HEX-Werte aus Figma oder Sketch in CSS-RGB konvertieren
  • ▸Markenfarben für ein Designsystem in mehrere Formate umwandeln
  • ▸Helligkeit via HSL anpassen, um Hover- oder deaktivierte Zustände zu erstellen
  • ▸Farbkontrast-Analyse für Barrierefreiheits-Review vorbereiten
  • ▸Werte für CSS-Custom-Properties (--color-primary usw.) bestimmen
Häufige Fragen
Q. Was ist der Unterschied zwischen RGB und HSL?
RGB stellt Farben als Kombinationen von Rot-, Grün- und Blaulicht dar. HSL verwendet Hue (0–360°), Saturation (0–100%) und Lightness (0–100%) und ist dadurch intuitiver für das Anpassen von Farben.
Q. Kann ich ein 3-stelliges HEX (#RGB) eingeben?
#RGB ist die Kurzform für #RRGGBB. Zum Beispiel entspricht #f0a dem Wert #ff00aa. Das Tool akzeptiert 3-stelliges HEX und erweitert es automatisch auf 6 Stellen.
Q. Wird Alpha (Transparenz) unterstützt?
Die aktuelle Version unterstützt nur vollständig opake Farben (alpha = 1). Unterstützung für rgba()- und hsla()-Transparenzkonvertierung ist für ein zukünftiges Update geplant.
// related tools
⏱
Cron Expression Generator
Cron-Ausdrücke visuell erstellen und analysieren. Beschreibungen generieren und die nächsten Ausführungszeiten vorschau.
jwt
JWT Decoder
JWT-Token dekodieren und prüfen. Header, Payload und Signaturdetails anzeigen.
rx
Regex Tester
Reguläre Ausdrücke mit Live-Highlighting testen. Treffer-Indizes, Werte und Capture-Gruppen anzeigen.
ts
Timestamp Converter
Unix-Timestamps in lesbare Datumsangaben umrechnen. Unterstützt ms/s, UTC/lokal und relative Zeit.