Farbkonverter: wofür er gut ist
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
- Geben Sie eine Farbe als HEX ein oder wählen Sie sie im Farbwähler.
- Lesen Sie die entsprechenden Werte in RGB und HSL ab.
- Prüfen Sie die Kontrastverhältnisse gegenüber weißem und schwarzem Text.
- 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.