Dlaczego HSB wygrywa z RGB w grach na zgadywanie kolorów

Gdy budowaliśmy Toon Tone, najważniejszą decyzją interfejsu była: jaki model koloru reprezentują suwaki? RGB to oczywisty wybór domyślny — tak każdy ekran renderuje piksele — ale dla gry, w której ludzi prosi się o zgadywanie kolorów, jest katastrofalnie zły. Ten wpis tłumaczy, dlaczego zamiast tego wybraliśmy HSB i dlaczego każda gra na zgadywanie kolorów powinna zrobić to samo.

Dwa modele koloru w 30 sekund

RGB opisuje kolor poprzez to, ile czerwonego, zielonego i niebieskiego światła emituje. Każdy kanał idzie od 0 do 255. (255, 0, 0) to czysta czerwień. (255, 255, 0) to żółty, bo światło czerwone i zielone razem dają na ekranie żółty. Model jest poprawny dla sprzętu: dokładnie to robią subpiksele twojego monitora.

HSB (zwany też HSV) opisuje kolor poprzez barwę (0–360°, gdzie na kole barw), nasycenie (0–100, jak żywy) i jasność (0–100, jak jasny). (0, 100, 100) to ta sama czysta czerwień. (60, 100, 100) to żółty, bo obróciłeś pokrętło barwy o 60 stopni. Model jest błędny dla sprzętu, ale właściwy dla ludzkiej intuicji.

Trzy powody, dla których RGB jest zły dla gry na zgadywanie koloru

1. RGB nie pasuje do tego, jak ludzie opisują kolor

Poproś kogoś, żeby opisał kolor, a powie „ciemniejsza czerwień" albo „bardziej pomarańczowy żółty" albo „spłowiały niebieski". Nikt nie powie „kolor z 30% większą ilością zieleni". Nawet profesjonalni projektanci, którzy RGB poznają pierwszego dnia, mówią o kolorze w terminach HSB. Słownik koloru to słownik barwy, żywości i jasności — trzy gałki, a nie trzy intensywności światła.

Jeśli suwak nie pasuje do modelu mentalnego gracza, gracz musi liczyć w głowie, żeby go obsłużyć. Liczenie w głowie podczas zadania na przypominanie to najgorszy możliwy UX. Gracze Toon Tone muszą jak najszybciej wprowadzić zapamiętany kolor do interfejsu; HSB pozwala im zrobić to w jednym kroku (obrócić barwę), RGB zmusza do trzech.

2. Suwaki RGB nie zachowują się liniowo tak, jak wyglądają

Przeciągnij kanał czerwony ze 100 do 200, a próbka prawie się nie zmieni. Przeciągnij zielony ze 100 do 200, a próbka przeskoczy do zupełnie innej rodziny. Oko nie jest tak samo wrażliwe na trzy barwy podstawowe — zielony dominuje w postrzeganej jasności, niebieski wnosi najmniej. Suwaki RGB wyglądają identycznie, ale dają bardzo różne wizualne delty na jednostkę ruchu.

Dla gry na zgadywanie ta asymetria jest fatalna. Gracz przestrzeli zielony o 20 i próbka jest nie do poznania; ta sama przestrzała w czerwonym ledwo zauważalna. Punktacja staje się niesprawiedliwa między barwami.

3. RGB nie izoluje wymiarów, które naprawdę obchodzą graczy

Gracze, którzy chybili strzał, chcą wiedzieć, w którym wymiarze się pomylili. Z HSB rozbicie wyniku jest czyste: „trafiłeś w barwę, ale byłeś o 20 punktów zbyt nasycony". To konkretny feedback. Z RGB rozbicie brzmi: „byłeś o 14 za wysoko w czerwonym, 22 za nisko w zielonym, 8 za wysoko w niebieskim" — bez sensu dla człowieka.

Teoria koloru uczy, że barwa, nasycenie i jasność są niezależnymi osiami percepcyjnymi. Osie RGB nie są percepcyjne — są sprzętowe. Dobry UX uczy użytkownika czegoś o nim samym; HSB uczy użytkownika, że niedoszacowuje nasycenie. RGB nie uczy niczego.

Dlaczego nie poszliśmy w Lab albo OKLab

Uczciwe pytanie, z którym walczyliśmy tydzień. Lab i OKLab są percepcyjnie jednorodne — równe odległości liczbowe odpowiadają równym postrzeganym różnicom, co zrobiłoby punktację jeszcze sprawiedliwszą niż HSB. Ale są dwa praktyczne problemy:

• Lab nie jest intuicyjny. Kanał L to jasność, ale a i b to osie „zielono-czerwona" i „niebiesko-żółta", których żaden niespecjalista nie rozumie. Gracze potrzebowaliby samouczka tylko po to, żeby wiedzieć, w którą stronę ciągnąć.
• Lab ma strefy poza gamutem. Niektóre trójki Lab nie odpowiadają żadnemu wyświetlanemu kolorowi RGB. Suwaki produkujące niedostępne kolory to koszmar użyteczności.

Więc używamy HSB dla interfejsu i percepcyjnej metryki odległości do punktacji pod spodem — co najlepsze z obu światów.

Funkcja punktacji, krótko

Toon Tone ocenia każdą próbę w skali 0–10, licząc ważoną odległość między próbą a celem w przestrzeni HSB:

score = 10 - 0,4 * |Δbarwa znormalizowana| - 0,3 * |Δnas| - 0,3 * |Δjasność|

Barwa ma trochę większą wagę, bo pomyłka co do barwy to najbardziej diagnostyczny rodzaj chyby — błąd jasności wciąż trafia w rodzinę koloru; błąd barwy znaczy, że źle zapamiętałeś postać. Dokładne wagi są dostrojone tak, by 7,0 dawało wrażenie „trafiłeś rodzinę", 8,5 „dość blisko, żeby projektant to przepuścił", a 9,5+ „nadprzyrodzone oko".

Co to znaczy dla innych projektantów gier

Jeśli budujesz grę na zgadywanie kolorów, wniosek jest prosty:

• Użyj suwaków HSB do UX wejścia.
• Punktuj w HSB albo metryką percepcyjną — nigdy surową odległością euklidesową RGB.
• Pokaż rozbicie po H/S/B w karcie wyniku, żeby gracze uczyli się, w którym wymiarze są słabi.
• Oprzyj się pokusie dodania czwartego suwaka dla alfy albo wymyślnego selektora kolorów — trzy suwaki to właściwa złożoność dla zadania na przypominanie.

Jeśli jesteś graczem zastanawiającym się, dlaczego Toon Tone wydaje się inny niż inne gry kolorowe, które próbowałeś — to większa część odpowiedzi.

Sam spróbuj