RGB-Werte in HSV umrechnen
Geben Sie drei RGB-Kanäle ein, und das HSV-Ergebnis erscheint schon beim Tippen: rgb(59, 130, 246) ergibt hsv(217.2, 76%, 96.5%). Mit dem Schalter HSV-Schreibweise wählen Sie Grad und Prozent wie in Grafikprogrammen, die OpenCV-Skala oder Brüche von 0 bis 1, und Kanäle, die als Brüche geschrieben sind, erkennt das Feld selbst.
Was ist HSV und worin unterscheidet es sich von RGB?
RGB beschreibt eine Farbe über die Menge an rotem, grünem und blauem Licht, die der Bildschirm an einer Stelle abgibt. HSV beschreibt dieselbe Farbe über drei Merkmale, die man sich leichter vorstellen kann: den Farbton (H) als Winkel auf dem Farbkreis mit 0° für Rot, 120° für Grün und 240° für Blau, die Sättigung (S) und den Hellwert (V)[1].
Das Modell hat Alvy Ray Smith 1978 beschrieben. Er wollte, dass man Bildschirmfarben so wählt, wie ein Maler Farben mischt: Man nimmt einen reinen Farbton und hellt ihn mit Weiß auf oder dunkelt ihn mit Schwarz ab. In seinem Modell bedeutet weniger Sättigung mehr Weiß und ein niedrigerer Hellwert mehr Schwarz[2].
Dasselbe Modell heißt oft auch HSB, mit B für brightness[3]. Unter diesem Namen steht es im Farbwähler von Photoshop, und das Feld B heißt dort Helligkeit[4]. Vorsicht bei diesem Wort: Die deutsche Wikipedia nennt so auch das L aus HSL, eine andere Größe[1]. Die RGB-Kanäle, von denen Sie ausgehen, schreibt der RGB-in-HEX-Umrechner auch als Hexadezimalcode.

Liegt Ihre Farbe in einer anderen Schreibweise vor, etwa als OKLCH, Lab oder Android-Code, zeigt der Farbumrechner sie gleichzeitig in allen Schreibweisen.
Wie rechnet man RGB in HSV um?
Teilen Sie jeden Kanal durch 255. Der Hellwert V ist das größte der drei Ergebnisse. Die Sättigung S ist der Abstand zwischen dem größten und dem kleinsten Wert, geteilt durch den größten. Der Farbton H hängt davon ab, welcher Kanal am stärksten ist[5].
Formel: V = max, S = (max − min) ÷ max, und wenn Blau der stärkste Kanal ist, H = 240° + 60° × (R − G) ÷ (max − min). Ist Rot am stärksten, zählt der Farbton ab 0°, bei Grün ab 120°[5].
Nehmen wir rgb(59, 130, 246). Durch 255 geteilt, haben die Kanäle die Werte 0,231, 0,510 und 0,965. Blau ist am höchsten, also beträgt der Hellwert 96,5 %. Der Abstand zwischen höchstem und niedrigstem Wert ist 0,733, und 0,733 ÷ 0,965 ergibt eine Sättigung von 76 %.
Der Farbton ist 240° + 60° × (0,231 − 0,510) ÷ 0,733, also 240° − 22,8° = 217,2°. Die ganze Farbe lautet hsv(217.2, 76%, 96.5%). Sind alle drei Kanäle gleich, ist die Farbe grau, die Sättigung beträgt 0 und der Farbton spielt keine Rolle[2]. Der Umrechner setzt dann 0 ein.
Welche HSV-Werte haben die Grundfarben?
| Farbe und RGB-Werte | HEX-Code | 0–360°, 0–100% | OpenCV (0–179, 0–255) | 0–1 |
|---|---|---|---|---|
| Rot 255, 0, 0 | #FF0000 | hsv(0, 100%, 100%) | 0, 255, 255 | 0, 1, 1 |
| Orange 255, 165, 0 | #FFA500 | hsv(38.8, 100%, 100%) | 19, 255, 255 | 0.1078, 1, 1 |
| Gelb 255, 255, 0 | #FFFF00 | hsv(60, 100%, 100%) | 30, 255, 255 | 0.1667, 1, 1 |
| Grün 0, 255, 0 | #00FF00 | hsv(120, 100%, 100%) | 60, 255, 255 | 0.3333, 1, 1 |
| Cyan 0, 255, 255 | #00FFFF | hsv(180, 100%, 100%) | 90, 255, 255 | 0.5, 1, 1 |
| Blau 0, 0, 255 | #0000FF | hsv(240, 100%, 100%) | 120, 255, 255 | 0.6667, 1, 1 |
| Violett 128, 0, 128 | #800080 | hsv(300, 100%, 50.2%) | 150, 255, 128 | 0.8333, 1, 0.502 |
| Magenta 255, 0, 255 | #FF00FF | hsv(300, 100%, 100%) | 150, 255, 255 | 0.8333, 1, 1 |
| Weiß 255, 255, 255 | #FFFFFF | hsv(0, 0%, 100%) | 0, 0, 255 | 0, 0, 1 |
| Grau 128, 128, 128 | #808080 | hsv(0, 0%, 50.2%) | 0, 0, 128 | 0, 0, 0.502 |
| Schwarz 0, 0, 0 | #000000 | hsv(0, 0%, 0%) | 0, 0, 0 | 0, 0, 0 |
| Blau 59, 130, 246 | #3B82F6 | hsv(217.2, 76%, 96.5%) | 109, 194, 246 | 0.6034, 0.7602, 0.9647 |
Wie ändert sich HSV, wenn man einer Farbe Weiß oder Schwarz beimischt?
rgb(59, 130, 246) in Schritten von 25 % mit Weiß und mit Schwarz, und jedes Ergebnis hat dieser Umrechner umgerechnet. Man sieht Smiths Idee: Weiß senkt die Sättigung bei fast gleichem Hellwert, Schwarz senkt den Hellwert bei fast gleicher Sättigung[2].| Mischung | RGB-Werte | HEX-Code | HSV |
|---|---|---|---|
| 75 % Weiß | 206, 224, 253 | #CEE0FD | hsv(217, 18.6%, 99.2%) |
| 50 % Weiß | 157, 193, 251 | #9DC1FB | hsv(217, 37.5%, 98.4%) |
| 25 % Weiß | 108, 161, 248 | #6CA1F8 | hsv(217.3, 56.5%, 97.3%) |
| Ausgangsfarbe | 59, 130, 246 | #3B82F6 | hsv(217.2, 76%, 96.5%) |
| 25 % Schwarz | 44, 98, 185 | #2C62B9 | hsv(217, 76.2%, 72.5%) |
| 50 % Schwarz | 30, 65, 123 | #1E417B | hsv(217.4, 75.6%, 48.2%) |
| 75 % Schwarz | 15, 33, 62 | #0F213E | hsv(217, 75.8%, 24.3%) |
Wie verwendet man das Ergebnis in Photoshop, Figma, OpenCV und Python?
Jedes dieser Werkzeuge schreibt HSV in einer eigenen Skala. Zu jedem nennen wir die Option des Schalters HSV-Schreibweise, die Zahlen in derselben Form liefert.
Photoshop
Tragen Sie das Ergebnis im Farbwähler in die Felder H, S und B ein. Der Farbton ist dort ein Winkel zwischen 0 und 360 Grad, Sättigung und Helligkeit sind Prozentwerte[4]. Wählen Sie also 0–360°, 0–100%.Figma
Wählen Sie in der Liste der Farbmodelle unter den Reglern HSB. Figma nimmt dort ganze Zahlen an: den Farbton von 0 bis 360, Sättigung und Helligkeit von 0 bis 100[6]. Runden Sie das Ergebnis aus 0–360°, 0–100% also auf ganze Zahlen.OpenCV
Ein 8-Bit-Bild hat nachcv2.cvtColor(bild, cv2.COLOR_RGB2HSV)einen Farbton von 0 bis 180 sowie Sättigung und Hellwert von 0 bis 255[5]. Die Option OpenCV (0–179, 0–255) rechnet mit derselben Ganzzahlarithmetik. Wir haben sie mit OpenCV.js 4.10 an allen 16 777 216 RGB-Farben verglichen, und jedes Ergebnis stimmte überein.Python und Unity
Warum liefert OpenCV einen anderen Farbton als der Umrechner?
Meist, weil OpenCV ein Bild mit den Kanälen in der Reihenfolge Blau, Grün, Rot einliest[9]. Ein Bild aus cv2.imread rechnen Sie deshalb mit cv2.COLOR_BGR2HSV um, nicht mit COLOR_RGB2HSV. Die Verwechslung ändert nur den Farbton: Dieselben drei Bytes 59, 130, 246 ergeben als BGR gelesen in OpenCV den Farbton 11 statt 109, also Orange statt Blau.
Die zweite Falle ist Rot. Es liegt an beiden Enden der Farbtonskala, deshalb hat reines Rot in OpenCV den Farbton 0, während rgb(225, 0, 15), ein Rot mit einem Hauch Blau, schon bei 178 liegt. Ein Bereich, mit dem Sie rote Pixel auswählen, muss darum beide Enden der Skala abdecken.
Welche RGB-Schreibweisen nimmt dieser Umrechner an?
| Was Sie eingeben | Was der Umrechner zeigt | Wie wir es lesen |
|---|---|---|
| rgb(59, 130, 246) | hsv(217.2, 76%, 96.5%) | Die CSS-Schreibweise mit Klammern übernehmen wir unverändert. |
| 59 130 246 | hsv(217.2, 76%, 96.5%) | Drei durch Leerzeichen getrennte Zahlen genügen, Klammern und Kommas sind nicht nötig. |
| R: 59, G: 130, B: 246 | hsv(217.2, 76%, 96.5%) | Die Kanalbuchstaben, wie sie in Markenhandbüchern stehen, lassen wir weg und nehmen nur die Zahlen. |
| rgb(23.1%, 51%, 96.5%) | hsv(217.2, 76%, 96.5%) | Kanäle in Prozent rechnen wir selbst in die Skala von 0 bis 255 um. |
| rgba(59, 130, 246, 0,5) | hsva(217.2, 76%, 96.5%, 0.5) | Die Deckkraft mit deutschem Dezimalkomma übernehmen wir ins Ergebnis als hsva. |
| 0,2314 0,5098 0,9647 | hsv(217.2, 76%, 96.5%) | Kanäle als Brüche von 0 bis 1 erkennen wir am Komma und rechnen sie in die Skala von 0 bis 255 um. |
| (59, 130, 246) | hsv(217.2, 76%, 96.5%) | Das Tupel, das Python ausgibt, lesen wir samt Klammern. |
| [59, 130, 246] | hsv(217.2, 76%, 96.5%) | Ein von Python ausgegebenes NumPy-Array lesen wir samt eckigen Klammern. |
| background-color: rgb(59, 130, 246); | hsv(217.2, 76%, 96.5%) | Eine ganze aus dem Stylesheet kopierte Zeile nehmen wir an und holen die Farbe heraus. |
| 300, -20, 128 | hsv(329.9, 100%, 100%) | Werte außerhalb des Bereichs schneiden wir wie der Browser ab: 300 wird zu 255 und −20 zu 0. |
RGB in andere Einheiten umrechnen
Quellen
- HSV-Farbraum — Wikipedia
- Color Gamut Transform Pairs (SIGGRAPH 78) — Alvy Ray Smith
- HSL and HSV — Wikipedia (englisch)
- Farben in Adobe Photoshop auswählen — Adobe
- Color conversions: RGB ↔ HSV — OpenCV
- About color models — Figma Help Center
- colorsys — Conversions between color systems — Python Software Foundation
- Color.RGBToHSV — Unity
- Image file reading and writing: imread — OpenCV
- Changing Colorspaces — OpenCV
Alle Werte in den Tabellen haben wir aus den Einheitendefinitionen berechnet und vor der Veröffentlichung rechnerisch geprüft. Historische Angaben und die Namen lokaler Einheiten stützen sich auf die oben genannten Quellen.
Inhalt zuletzt geprüft: · erstellt und geprüft vom Arteon-Team
Häufige Fragen zur Umrechnung von RGB in HSV
Wann ist HSV besser geeignet als RGB?
Wenn Sie eine Farbe nach Farbton, Sättigung und Helligkeit auswählen oder verändern. Laut der OpenCV-Dokumentation lässt sich eine Farbe in HSV leichter beschreiben als in BGR[10], deshalb sucht man dort Objekte einer bestimmten Farbe in HSV. Stylesheets und Bilddateien speichern Farben aber meist als RGB oder HEX, sodass die fertige Farbe am Ende wieder in Kanäle umgerechnet wird.
Was ist der Unterschied zwischen HSV und HSL?
Beide haben denselben Farbton, berechnen die anderen zwei Zahlen aber unterschiedlich. In HSV hat reines Rot den Hellwert 100 %, also hsv(0, 100%, 100%), in HSL die Helligkeit 50 %, also hsl(0, 100%, 50%). Die HSL-Werte derselben Farbe liefert der RGB-in-HSL-Umrechner.
Wie rechne ich einen HEX-Code in HSV um?
Wandeln Sie den Code im HEX-in-RGB-Umrechner in drei Kanäle um und fügen Sie das Ergebnis hier ein. Das Feld nimmt es samt rgb() an.
Behält der Umrechner die Deckkraft bei?
Ja. In Grad und Prozent landet die Deckkraft in hsva(), in der Schreibweise 0–1 wird sie zur vierten Zahl. Die OpenCV-Schreibweise lässt sie weg, weil ein HSV-Bild in OpenCV nur drei Kanäle hat.
Wie rechne ich HSV zurück in RGB um?
Geben Sie das Ergebnis in den HSV-in-RGB-Umrechner ein. Die Schaltfläche Reihenfolge tauschen bringt Sie mit dem aktuellen Ergebnis dorthin.

Helfen Sie uns, unsere Werkzeuge zu verbessern
Haben Sie eine Idee für eine neue Funktion, einen Fehler gefunden oder möchten Sie ein weiteres Werkzeug vorschlagen? Schreiben Sie uns.