Wer mit Farben am Computer arbeitet, stolpert früher oder später über zwei Abkürzungen: RGB und HSV. Beide beschreiben dieselben Farben, aber auf völlig unterschiedliche Weise. RGB denkt wie ein Bildschirm, HSV denkt wie ein Mensch. Dieser Artikel erklärt, was hinter beiden Modellen steckt, wie du zwischen ihnen umrechnest und warum HSV beim Gestalten oft die bessere Wahl ist.
RGB: So sieht ein Bildschirm Farben
Im RGB-Farbraum setzt sich jede Farbe aus drei Lichtanteilen zusammen: Rot, Grün und Blau. Jeder Kanal hat einen Wert von 0 bis 255. Reines Rot ist also (255, 0, 0), Weiß ist (255, 255, 255) und Schwarz ist (0, 0, 0). Das entspricht genau der Funktionsweise eines Displays, bei dem winzige rote, grüne und blaue Subpixel unterschiedlich hell leuchten.
RGB ist deshalb das native Format für Bildschirme und das Web. Der bekannte Hex-Code wie #FF8800 ist nichts anderes als RGB in Hexadezimalschreibweise: FF entspricht 255 (Rot), 88 entspricht 136 (Grün), 00 entspricht 0 (Blau). RGB ist exakt und maschinennah, aber für den Menschen unintuitiv: Wie machst du eine Farbe ein bisschen heller, ohne den Farbton zu verändern? In RGB musst du dafür alle drei Werte gleichzeitig anpassen.
HSV: So denken Menschen über Farben
Genau hier setzt HSV an, was für Hue, Saturation, Value steht – auf Deutsch Farbton, Sättigung und Helligkeit. Dieses Modell beschreibt eine Farbe so, wie ein Mensch sie wahrnimmt:
- Hue (Farbton): Ein Winkel von 0 bis 360 Grad auf dem Farbkreis. 0 Grad ist Rot, 120 Grad ist Grün, 240 Grad ist Blau. Das bestimmt, "welche" Farbe es ist.
- Saturation (Sättigung): 0 bis 100 Prozent. Bei 0 Prozent ist die Farbe ein Grauton, bei 100 Prozent ist sie maximal kräftig und satt.
- Value (Helligkeit): 0 bis 100 Prozent. Bei 0 Prozent ist alles schwarz, bei 100 Prozent leuchtet die Farbe maximal.
Der große Vorteil: Du kannst eine Farbe gezielt verändern. Willst du dasselbe Blau, nur etwas blasser? Senke einfach die Sättigung. Soll es dunkler werden? Reduziere die Helligkeit. Der Farbton bleibt dabei stabil. Genau deshalb arbeiten Farbwähler in Grafikprogrammen meist mit einem Farbkreis oder -feld, das HSV abbildet.
Die Umrechnung zwischen HSV und RGB
Da Bildschirme nur RGB verstehen, muss jeder HSV-Wert am Ende in RGB übersetzt werden. Die Umrechnung ist mathematisch nicht trivial: Zunächst wird aus Helligkeit und Sättigung ein Chroma-Wert bestimmt, dann anhand des Farbton-Winkels entschieden, welcher der sechs Sektoren des Farbkreises greift, und schließlich werden die Rot-, Grün- und Blau-Anteile berechnet. Im Kopf ist das kaum machbar – aber genau dafür gibt es Werkzeuge. Mit dem HSV RGB Konverter gibst du einfach Farbton, Sättigung und Helligkeit ein und bekommst sofort die passenden RGB- und Hex-Werte zurück, ganz ohne Formel im Hinterkopf.
Das ist im Alltag enorm praktisch: Du entwirfst eine Farbpalette gedanklich in HSV ("ein warmes Orange, etwas entsättigt, mittlere Helligkeit"), lässt dir mit dem HSV RGB Konverter den exakten Hex-Code ausgeben und fügst ihn direkt in dein CSS oder Designtool ein.
HSV, HSL und HSB: Wo liegt der Unterschied?
Oft tauchen ähnliche Kürzel auf. HSB (Brightness) ist praktisch identisch mit HSV – nur ein anderer Name für dieselbe Sache. HSL dagegen ersetzt die Helligkeit durch Lightness und verhält sich an den Rändern anders: Bei HSL liegt reines Weiß bei 100 Prozent Lightness, während bei HSV erst die Kombination aus voller Helligkeit und null Sättigung Weiß ergibt. CSS unterstützt nativ hsl(), weshalb HSL im Web verbreiteter ist, während HSV in Grafiksoftware wie Photoshop dominiert.
Wann nutzt du welchen Farbraum?
Eine einfache Faustregel: Gestalte in HSV, speichere in RGB. Während des kreativen Prozesses ist HSV überlegen, weil du Farben intuitiv variieren kannst. Sobald die Farbe feststeht, brauchst du den RGB- oder Hex-Wert für die technische Umsetzung. Für abgestufte Paletten lohnt sich ein Blick auf den Farbpalette Generator, und wer Kontraste prüfen will, ist mit dem Farbkontrast Checker gut bedient. Weitere nützliche Farbwerkzeuge findest du gesammelt unter kotsch.tech/webtools.
Häufige Fragen
Ist HSV genauer als RGB?
Nein, beide beschreiben exakt denselben Farbraum. HSV ist nur eine andere Darstellung derselben Information und damit für Menschen leichter steuerbar. Bei der Umrechnung in RGB kann es durch Rundung minimale Abweichungen geben, in der Praxis ist das aber irrelevant.
Warum sind Farbton-Werte in Grad angegeben?
Weil der Farbton ein Kreis ist: Nach 360 Grad bist du wieder bei der Ausgangsfarbe. Diese zyklische Natur lässt sich mit einem Winkel sauber abbilden, während ein linearer Wert von 0 bis 255 das nicht könnte.
Kann ich HSV direkt in CSS verwenden?
CSS kennt hsl(), aber kein natives hsv(). Wenn du in HSV denkst, rechne den Wert mit einem Konverter in RGB oder Hex um und nutze diesen direkt im Stylesheet.