Podcast o Model HSV: barwa, nasycenie i jasność

Kapitoly

Wstęp

Czym jest model HSV?

Wizualizacja w 3D

Konwersja z RGB do HSV

Przykład konwersji w praktyce

Zastosowania i typowe błędy

Podsumowanie w symulacji

Přepis

Maja: Wyobraźcie sobie studentkę, nazwijmy ją Ania. Ania robi projekt graficzny na zaliczenie. Chce zmienić kolor czerwonej sukienki na zdjęciu na idealny odcień błękitu. Otwiera edytor, widzi suwaki R, G, B i zaczyna je przesuwać. Efekt? Sukienka staje się szaro-fioletowa, potem brudno-zielona... Po dziesięciu minutach frustracji Ania ma ochotę rzucić komputerem o ścianę.

Antoni: Brzmi znajomo? Na szczęście istnieje o wiele bardziej intuicyjny sposób na pracę z kolorami. Sposób, który myśli tak, jak my. Słuchacie Studyfi Podcast, a ja jestem Antoni.

Maja: A ja Maja. Dzisiaj rozłożymy na czynniki pierwsze model kolorów HSV, czyli tajną broń grafików, która pozwala zapanować nad chaosem barw.

Antoni: Dokładnie! Zamiast mieszać czerwony, zielony i niebieski, HSV dzieli kolor na trzy proste, zrozumiałe cechy. H, S i V. Brzmi jak tajny kod, ale to proste.

Maja: Rozszyfrujmy go zatem. Czym jest H?

Antoni: H to Hue, czyli odcień. To jest to, co potocznie nazywamy „kolorem”. Czerwony, żółty, niebieski... W modelu HSV odcień to kąt na kole barw, od 0 do 360 stopni.

Maja: Czyli jak w tęczy, gdzie jeden kolor płynnie przechodzi w drugi. A co z S?

Antoni: S to Saturation, czyli nasycenie. Pomyśl o tym jak o intensywności koloru. 100% nasycenia to żywy, czysty kolor. 0% to... odcień szarości. To jak dolewanie szarej farby do kolorowej.

Maja: Rozumiem. A ostatnia litera, V?

Antoni: V to Value, czyli jasność. To po prostu ilość światła. 0% to absolutna czerń, a 100% to najjaśniejsza wersja danego koloru. To jakbyśmy regulowali ściemniacz światła w pokoju.

Maja: Czyli odcień, intensywność i jasność. Proste. Ale jak to wygląda w praktyce?

Antoni: Świetne pytanie. Wyobraź sobie stożek. Taki do lodów, ale postawiony do góry nogami.

Maja: Lody o smaku danych? Jestem za!

Antoni: Prawie. Oś tego stożka to nasza jasność, czyli V. Na samym dole, w czubku, jest V równe zero, czyli czerń. Na górze, na płaskiej podstawie, jest V równe sto procent – najjaśniej.

Maja: Okej, mam ten stożek. Gdzie jest odcień i nasycenie?

Antoni: Odcień, czyli H, to kąt wokół osi stożka. Jakbyś chodził dookoła niego. 0 stopni to czerwień, 120 stopni zieleń, 240 niebieski i tak dalej. A nasycenie, S, to odległość od środkowej osi. Im dalej od środka, tym kolor jest bardziej intensywny.

Maja: A więc na samej osi, w środku stożka, nasycenie wynosi zero. I dlatego tam są tylko odcienie szarości, od czerni na dole do bieli na górze. Genialne! A to koło barw, które widzimy w Photoshopie?

Antoni: To dokładnie to! To jest po prostu widok z góry na nasz stożek. Płaski przekrój przy maksymalnej jasności. Dlatego w środku tego koła jest biel lub szarość, a na krawędziach najbardziej nasycone kolory.

Maja: Skoro HSV jest tak intuicyjne, to dlaczego nasze aparaty, skanery i monitory wciąż uparcie trzymają się RGB?

Antoni: To kwestia technologii. Wyświetlacze składają obraz z maleńkich czerwonych, zielonych i niebieskich pikseli. Dlatego konieczna jest konwersja między tymi dwoma światami. Na szczęście jest na to prosty algorytm.

Maja: Brzmi jak coś, co może pojawić się na egzaminie. Jak to działa?

Antoni: Po pierwsze, normalizujemy wartości RGB z zakresu 0-255 do zakresu od 0 do 1. Wystarczy podzielić każdą wartość przez 255. Proste.

Maja: Okej. Mamy więc trzy liczby od 0 do 1. Co dalej?

Antoni: Znajdujemy największą i najmniejszą z nich. Nazwijmy je Cmax i Cmin. Jasność, czyli V, to po prostu Cmax. Już mamy jedną trzecią pracy za sobą!

Maja: To było łatwe! A nasycenie, czyli S?

Antoni: Nasycenie obliczamy, dzieląc różnicę między Cmax i Cmin przez Cmax. To pokazuje, jak „daleko” od szarości jest nasz kolor. Jeśli Cmax jest zerem, czyli mamy czerń, to nasycenie też jest zerem.

Maja: Logiczne. Został nam najtrudniejszy, czyli odcień H.

Antoni: Tylko z pozoru. Używamy jednego z trzech prostych wzorów, w zależności od tego, która składowa – R, G czy B – była największa. To nam mówi, w której części koła barw się znajdujemy.

Maja: Dobrze, przećwiczmy to. Powiedzmy, że mamy kolor RGB (100, 200, 50). To taki trawiasty zielony. Jak go zamienić na HSV?

Antoni: Świetny przykład! Krok pierwszy: normalizacja. Dzielimy wszystko przez 255. Dostajemy R prim około 0.39, G prim około 0.78 i B prim około 0.20.

Maja: Ok. Największa wartość, Cmax, to 0.78, a najmniejsza, Cmin, to 0.20. Więc nasza jasność, V, wynosi 0.78, czyli 78%.

Antoni: Dokładnie! Teraz nasycenie. Różnica Cmax i Cmin to 0.58. Dzielimy to przez Cmax, czyli 0.78, i dostajemy około 0.75. Nasze nasycenie to 75%. To całkiem żywy kolor.

Maja: Został odcień, H. Największą wartością było G prim, czyli znormalizowana zieleń. Używamy więc drugiego wzoru. Co on mówi?

Antoni: Mówi nam, żeby odjąć B prim od R prim, podzielić przez różnicę, dodać 2 i całość pomnożyć przez 60 stopni. Po podstawieniu liczb wychodzi nam H równe dokładnie 100 stopni.

Maja: Czyli nasz trawiasty zielony RGB(100, 200, 50) to w modelu HSV kolor o odcieniu 100 stopni, nasyceniu 75% i jasności 78%. Teraz widzę, jak to działa!

Antoni: I właśnie dlatego Ania z naszej historii powinna była użyć HSV! Chcąc zmienić czerwoną sukienkę na niebieską, wystarczyłoby, że przesunęłaby tylko jeden suwak – odcień H. Nasycenie i jasność pozostałyby bez zmian, a efekt byłby naturalny.

Maja: A gdyby chciała zrobić zdjęcie w stylu vintage? Wystarczyłoby obniżyć nasycenie S, żeby kolory stały się bardziej wyblakłe. To takie proste!

Antoni: Właśnie. Ale uwaga na pułapki. Najczęstszy błąd to mylenie jasności V z luminancją. V w HSV to po prostu maksymalna składowa RGB. Kolor o V=100% może być wciąż ciemny percepcyjnie.

Maja: A, czyli trzeba pamiętać, że to model matematyczny, nie idealne odwzorowanie ludzkiego oka. A co się dzieje, gdy nasycenie S jest zerowe?

Antoni: Wtedy odcień H nie ma żadnego znaczenia. Bo jakiego odcienia jest szary? Po prostu szary. Jego „szarość” zależy już tylko od jasności V.

Maja: Dobre pytanie. I podobnie, gdy jasność V jest zerowa, to zawsze mamy czerń, niezależnie od H i S. Brak światła to brak koloru. Proste.

Antoni: Wyobraź sobie teraz interaktywną symulację z trzema suwakami: H, S i V. Przesuwasz suwak H i widzisz, jak kolor płynnie wędruje po tęczy – od czerwieni, przez żółć, zieleń, aż do fioletu.

Maja: A nasycenie i jasność pozostają bez zmian. Teraz łapię za suwak S i przesuwam go w lewo. Kolor staje się coraz bardziej „sprany”, aż w końcu przy S=0% jest idealnie szary.

Antoni: A gdy przesuniesz go w prawo, staje się super intensywny, niemal neonowy. Na koniec bawisz się suwakiem V. Przesuwasz w lewo i kolor gaśnie, aż do czerni przy V=0%.

Maja: Przesuwam w prawo, a kolor się rozjaśnia, staje się świetlisty. To naprawdę pozwala poczuć, jak te trzy składowe niezależnie od siebie działają. To jest klucz do intuicyjnego panowania nad kolorem.

Antoni: Dokładnie tak. Model HSV to nie tylko teoria na egzamin. To potężne narzędzie, które zmienia sposób, w jaki myślimy o kolorach i pracujemy z nimi.

Maja: Dzięki, Antoni! To było naprawdę rozjaśniające. Mam nadzieję, że dla was również. To był Studyfi Podcast. Do usłyszenia!

Antoni: Cześć!