16.777.216 Farben, aber niemand tippt sie in HEX
Ein RGB-Farbraum mit 256 Abstufungen pro Kanal ergibt genau 16.777.216 darstellbare Farbtöne, das ist der Standard-Farbraum sRGB, den praktisch jeder Monitor und Browser verwendet. Trotzdem rechnet kaum jemand im Kopf zwischen den Notationen um. Wer in CSS eine Farbe etwas heller machen will, steht oft vor einem Wert wie #3B82F6, ohne zu wissen, welche der sechs Ziffern sich dafür ändern lassen. Genau dafür ist dieser Konverter da: Sie geben eine Farbe in einem Format ein und sehen sofort die anderen Notationen sowie das visuelle Ergebnis.
Vier Modelle, vier Denkweisen
HEX
Eine hexadezimale Kurzschreibweise der Rot-, Grün- und Blau-Kanäle. #FF0000 ist Rot, #00FF00 Grün, #0000FF Blau. Mit einem zusätzlichen Kanal-Paar lässt sich auch Transparenz kodieren, #FF000080 ist Rot mit rund 50 % Deckkraft. Kompakt und in jedem Design-Tool Standard, für Menschen aber kaum auf Anhieb lesbar.
RGB und RGBA
Die gleiche Information wie HEX, nur als Dezimalzahlen von 0 bis 255 pro Kanal. RGBA ergänzt einen Alpha-Wert zwischen 0 und 1. Der Vorteil gegenüber HEX: RGBA-Werte lassen sich einfacher mit CSS-Variablen oder in JavaScript berechnen.
HSL und HSLA
Hue (Farbton, 0 bis 360 Grad), Saturation (Sättigung, 0 bis 100 %) und Lightness (Helligkeit, 0 bis 100 %). Der Vorteil: Wer nur die Helligkeit verändert, behält Farbton und Sättigung exakt bei. Das macht HSL zur naheliegenden Wahl, wenn Sie aus einer Grundfarbe systematisch hellere oder dunklere Varianten ableiten wollen, etwa für Hover-Zustände.
HSV beziehungsweise HSB
Sieht HSL auf den ersten Blick ähnlich, verwendet aber „Value" statt „Lightness". Der Unterschied wird bei den Extremwerten deutlich: 100 % Lightness ergibt in HSL immer Weiß, unabhängig vom Farbton. 100 % Value in HSV ergibt dagegen die volle, satte Farbe. In Adobe-Anwendungen ist HSV das gebräuchlichere Modell.
Was moderne Browser zusätzlich können
Neuere CSS-Funktionen gehen über die vier Grundmodelle hinaus. oklch() ist wahrnehmungsbasiert aufgebaut: Gleich große numerische Schritte wirken auch für das menschliche Auge gleich groß, was bei HSL nicht der Fall ist. color-mix() mischt zwei Farben in einem definierbaren Farbraum. Für Browser ohne Unterstützung dieser Funktionen bleibt HEX oder RGB die verlässlichere Wahl, deshalb rechnet unser Tool bewusst in die vier klassischen Modelle um.
Wo Sie das im Alltag brauchen
- Ein Design-System mit Haupt- und Akzentfarben aufbauen, bei dem sich Variationen über die Lightness in HSL sauber ableiten lassen.
- Eigene Farben in eine Tailwind-Konfiguration eintragen, meist als HEX- oder HSL-Wert.
- Einen Dark Mode entwickeln, bei dem Sie gezielt die Helligkeit invertieren, ohne die Grundfarbe zu verändern.
- RGB-Werte aus einem Bildbearbeitungsprogramm für den CSS-Einsatz nach HEX übertragen.
Kontrast nicht vergessen
Eine stimmige Farbe nützt wenig, wenn der Text darauf kaum lesbar ist. Für WCAG AA gilt ein Mindestkontrast von 4,5:1 für Fließtext und 3:1 für große Schrift. Über den Lightness-Wert in HSL lässt sich der Kontrast gezielt nachjustieren, ohne den Farbton zu verlieren. Für eine genaue Prüfung empfiehlt sich zusätzlich ein dedizierter Kontrast-Rechner.
Farbvarianten schnell ableiten
- Gleicher Hue, niedrigere Lightness: dunklere Variante für Hover- oder Active-Zustände.
- Gleicher Hue, höhere Lightness: hellere Variante für Hintergründe oder deaktivierte Elemente.
- Hue um 180 Grad gedreht: Komplementärfarbe.
- Hue um plus/minus 30 Grad verschoben: Analogfarben, die harmonisch zur Ausgangsfarbe wirken.
Datenschutz
Die Umrechnung läuft vollständig im Browser. Es werden keine Farbwerte oder Entwürfe an unseren Server übertragen.