HEX in RGB und HSL umrechnen: Farbkonverter

Designerinnen liefern Hex-Codes, CSS-Animationen bevorzugen HSL, weil es sich sinnvoll interpolieren lässt, und Canvas-Arbeit braucht RGB-Kanäle. Dieser Konverter nimmt eine Farbe und erzeugt die übrigen Formate, mit Live-Farbfeld und dem Kontrastverhältnis gegen Schwarz und Weiß für die Barrierefreiheit.

Farbkonverter: so funktioniert er

1. Geben Sie eine Farbe als HEX ein oder wählen Sie sie im Farbwähler.
2. Lesen Sie die entsprechenden Werte in RGB und HSL ab.
3. Prüfen Sie die Kontrastverhältnisse gegenüber weißem und schwarzem Text.
4. Kopieren Sie das benötigte Format in fertiger CSS-Schreibweise.

Häufige Fragen

Warum HSL statt HEX verwenden?

Weil HSL für Menschen lesbar ist. Eine Farbe aufzuhellen heißt, eine Zahl zu erhöhen, statt drei Hex-Paare neu zu berechnen – das macht eine stimmige Palette viel einfacher.

Welchen Kontrast brauche ich für Barrierefreiheit?

WCAG AA verlangt 4,5:1 für normalen Text und 3:1 für großen Text; AAA hebt das auf 7:1 an. Die angezeigten Werte sagen sofort, ob weißer oder schwarzer Text funktioniert.

Was bedeutet der vierte Wert bei RGBA?

Den Alphakanal, also die Deckkraft, von 0 (vollständig transparent) bis 1 (vollständig deckend). Modernes CSS akzeptiert auch achtstellige Hex-Werte, bei denen das letzte Paar das Alpha kodiert.

Warum sieht derselbe Hex-Wert auf zwei Bildschirmen anders aus?

Wegen des Farbmanagements. Displays unterscheiden sich in Farbraum und Kalibrierung, und ohne explizites Farbprofil erscheint derselbe sRGB-Wert auf einem Monitor mit großem Farbraum anders.

JSON-Formatierer · Base64-Konverter · URL-Kodierer · JWT-Decoder · Alle Tools ansehen

Auch verfügbar auf: English · Español · Português · Français