Przelicz zapis HSV na wartości RGB

Pierwsza liczba to odcień (H), zapisany jako kąt na kole barw: 0° to czerwień, 120° zieleń, a 240° niebieski[1]. Druga to nasycenie (S), a trzecia to jasność (V). W Photoshopie ten sam model nazywa się HSB, a pomoc Adobe nazywa jego składowe barwą, nasyceniem i jasnością[2].

Nasycenie i jasność najłatwiej zrozumieć przez farby. Alvy Ray Smith, który opisał ten model w 1978 roku, porównał je do dodawania bieli i czerni do czystej barwy: niższe nasycenie to więcej bieli, a niższa jasność to więcej czerni[3]. Dlatego przy jasności 0% kolor jest czarny bez względu na dwie pozostałe liczby, a przy nasyceniu 0% zostaje szarość o tej jasności.

Jeśli kolor masz w innym zapisie, na przykład w OKLCH, Lab albo jako kod z Androida, konwerter kolorów pokaże go naraz we wszystkich zapisach.

Najpierw policz chromę, czyli rozpiętość kanałów: C = V × S. Potem podziel odcień przez 60°. Część całkowita wyniku wskazuje jeden z sześciu wycinków koła, a z reszty liczysz kanał pośredni: X = C × (1 − |(H ÷ 60°) mod 2 − 1|). Na koniec do wszystkich kanałów dodajesz m = V − C[4].

Weźmy hsv(217.2, 76%, 96.5%). Chroma to 0,965 × 0,76 = 0,733. Odcień podzielony przez 60° daje 3,62, czyli wycinek między 180° a 240°, w którym czerwony kanał jest zerowy, zielony pośredni, a niebieski pełny. Kanał pośredni wynosi 0,733 × (1 − |1,62 − 1|) = 0,279, a m = 0,965 − 0,733 = 0,232.

Po dodaniu m kanały mają 0,232, 0,511 i 0,965. Po pomnożeniu przez 255 i zaokrągleniu wychodzi rgb(59, 130, 246), a kod HEX tego koloru poda konwerter RGB na HEX.

CSS nie ma funkcji hsv(), ale ma hwb(), w której po odcieniu podajesz ilość bieli i czerni domieszanej do barwy[6]. Model HWB opisał ten sam Alvy Ray Smith w 1996 roku, a z HSV przelicza się go dwoma prostymi wzorami: W = (1 − S) × V oraz B = 1 − V[7].

Dla hsv(217.2, 76%, 96.5%) biel wynosi (1 − 0,76) × 0,965 = 23,1%, a czerń 1 − 0,965 = 3,5%, więc w arkuszu stylów wpiszesz hwb(217.2 23.1% 3.5%). Przeglądarka pokaże ten sam kolor co rgb(59, 130, 246). Jeśli wolisz zapis, który rozumie każde narzędzie, wklej po prostu wynik tego konwertera.

OpenCV zapisuje odcień obrazu 8-bitowego jako połowę kąta, żeby zmieścił się w jednym bajcie[8]. Kolejne wartości odcienia różnią się więc o 2°, a kolor pomiędzy nimi nie ma dokładnego zapisu. Trójka 109, 194, 246, którą OpenCV daje dla rgb(59, 130, 246), wraca przy opcji OpenCV jako rgb(59, 127, 246), czyli z zielonym kanałem niższym o 3. OpenCV zwraca dokładnie to samo: porównaliśmy opcję OpenCV z OpenCV.js 4.10 na wszystkich trójkach z odcieniem od 0 do 180.

Jeśli wynik ma trafić z powrotem do obrazu wczytanego przez cv2.imread, użyj stałej cv2.COLOR_HSV2BGR, bo taki obraz trzyma kanały w kolejności niebieski, zielony, czerwony[9].