RGB-Werte in HSV umrechnen

Inhalt zuletzt geprüft:

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.

HSV-Schreibweise

Grad und Prozent zeigen Photoshop und Figma. OpenCV speichert den Farbton von 0 bis 179 sowie Sättigung und Hellwert von 0 bis 255. Brüche von 0 bis 1 liefern colorsys in Python und Unity.

nach

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.

Farbige Musterkarten, im Kreis auf einem hellen Tisch aufgefächert
Farbmusterkarten, im Kreis gelegt von Gelb über Grün und Blau bis zu Violett, Rosa und Rot. Die Lage einer Karte auf so einem Kreis ist in HSV die erste Zahl, der Farbton. Foto: Andy Brown, Unsplash.

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?

Die Tabelle zeigt das Ergebnis des Umrechners für zwölf Farben in allen drei Schreibweisen, die der Schalter HSV-Schreibweise anbietet.
Farbe und RGB-WerteHEX-Code0–360°, 0–100%OpenCV (0–179, 0–255)0–1
Rot 255, 0, 0#FF0000hsv(0, 100%, 100%)0, 255, 2550, 1, 1
Orange 255, 165, 0#FFA500hsv(38.8, 100%, 100%)19, 255, 2550.1078, 1, 1
Gelb 255, 255, 0#FFFF00hsv(60, 100%, 100%)30, 255, 2550.1667, 1, 1
Grün 0, 255, 0#00FF00hsv(120, 100%, 100%)60, 255, 2550.3333, 1, 1
Cyan 0, 255, 255#00FFFFhsv(180, 100%, 100%)90, 255, 2550.5, 1, 1
Blau 0, 0, 255#0000FFhsv(240, 100%, 100%)120, 255, 2550.6667, 1, 1
Violett 128, 0, 128#800080hsv(300, 100%, 50.2%)150, 255, 1280.8333, 1, 0.502
Magenta 255, 0, 255#FF00FFhsv(300, 100%, 100%)150, 255, 2550.8333, 1, 1
Weiß 255, 255, 255#FFFFFFhsv(0, 0%, 100%)0, 0, 2550, 0, 1
Grau 128, 128, 128#808080hsv(0, 0%, 50.2%)0, 0, 1280, 0, 0.502
Schwarz 0, 0, 0#000000hsv(0, 0%, 0%)0, 0, 00, 0, 0
Blau 59, 130, 246#3B82F6hsv(217.2, 76%, 96.5%)109, 194, 2460.6034, 0.7602, 0.9647
OpenCV speichert den Farbton als halben Winkel, damit er in ein Byte passt, deshalb steht Blau dort bei 120 statt 240. Sättigung und Hellwert reichen dort bis 255 statt bis 100 %[5].

Wie ändert sich HSV, wenn man einer Farbe Weiß oder Schwarz beimischt?

Die Tabelle mischt 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].
MischungRGB-WerteHEX-CodeHSV
75 % Weiß206, 224, 253#CEE0FDhsv(217, 18.6%, 99.2%)
50 % Weiß157, 193, 251#9DC1FBhsv(217, 37.5%, 98.4%)
25 % Weiß108, 161, 248#6CA1F8hsv(217.3, 56.5%, 97.3%)
Ausgangsfarbe59, 130, 246#3B82F6hsv(217.2, 76%, 96.5%)
25 % Schwarz44, 98, 185#2C62B9hsv(217, 76.2%, 72.5%)
50 % Schwarz30, 65, 123#1E417Bhsv(217.4, 75.6%, 48.2%)
75 % Schwarz15, 33, 62#0F213Ehsv(217, 75.8%, 24.3%)
Der Farbton bleibt in beiden Richtungen bei 217°. Abweichungen um Bruchteile eines Grades entstehen, weil die RGB-Kanäle auf ganze Zahlen gerundet sind. Eine hellere oder dunklere Variante einer Farbe für eine Palette plant man deshalb bequem in HSV, indem man nur eine Zahl ändert.

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.

  1. 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%.
  2. 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.
  3. OpenCV

    Ein 8-Bit-Bild hat nach cv2.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.
  4. Python und Unity

    colorsys.rgb_to_hsv erwartet Kanäle von 0 bis 1 und gibt das Ergebnis in derselben Skala zurück[7]. Color.RGBToHSV in Unity liefert H, S und V ebenfalls von 0 bis 1[8]. Beiden entspricht die Option 0–1.

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?

Jede dieser Schreibweisen nimmt das Feld an und rechnet sie um, Sie müssen vor dem Einfügen also nichts korrigieren. Die Tabelle zeigt, was der Umrechner mit jeder davon macht, und die Ergebnisse hat er selbst mit der Option 0–360°, 0–100% berechnet.
Was Sie eingebenWas der Umrechner zeigtWie wir es lesen
rgb(59, 130, 246)hsv(217.2, 76%, 96.5%)Die CSS-Schreibweise mit Klammern übernehmen wir unverändert.
59 130 246hsv(217.2, 76%, 96.5%)Drei durch Leerzeichen getrennte Zahlen genügen, Klammern und Kommas sind nicht nötig.
R: 59, G: 130, B: 246hsv(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,9647hsv(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, 128hsv(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

  1. HSV-Farbraum — Wikipedia
  2. Color Gamut Transform Pairs (SIGGRAPH 78) — Alvy Ray Smith
  3. HSL and HSV — Wikipedia (englisch)
  4. Farben in Adobe Photoshop auswählen — Adobe
  5. Color conversions: RGB ↔ HSV — OpenCV
  6. About color models — Figma Help Center
  7. colorsys — Conversions between color systems — Python Software Foundation
  8. Color.RGBToHSV — Unity
  9. Image file reading and writing: imread — OpenCV
  10. 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.

Screenshot des kostenlosen Arteon-Werkzeugs: RGB-Werte in HSV umrechnen

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.