Renk Tahmin Oyunlarında HSB Neden RGB'yi Yener

Toon Tone'u kurarken en önemli arayüz kararı şuydu: kaydırıcılar hangi renk modelini temsil ediyor? RGB bariz varsayılan — her ekran pikselleri böyle çizer — ama insanlardan renk tahmin etmesini isteyen bir oyun için felaket derecede yanlış. Bu yazı, neden onun yerine HSB'yi seçtiğimizi ve neden her renk tahmin oyununun aynısını yapması gerektiğini anlatıyor.

İki renk modeli, 30 saniyede

RGB, bir rengi ne kadar kırmızı, yeşil ve mavi ışık yaydığı üzerinden tanımlar. Her kanal 0'dan 255'e kadar gider. (255, 0, 0) saf kırmızıdır. (255, 255, 0) sarıdır çünkü kırmızı ve yeşil ışık birleşince ekranda sarı verir. Model donanım için doğru: monitörünün alt pikselleri tam olarak bunu yapar.

HSB (HSV de denir) bir rengi ton (0–360°, renk çarkında nerede), doygunluk (0–100, ne kadar canlı) ve parlaklık (0–100, ne kadar açık) üzerinden tanımlar. (0, 100, 100) aynı saf kırmızıdır. (60, 100, 100) sarıdır çünkü ton kadranını 60 derece çevirdin. Model donanım için yanlış ama insan sezgisi için doğru.

RGB'nin bir renk tahmin oyunu için neden yanlış olduğuna dair üç sebep

1. RGB, insanların rengi anlatma biçimine uymaz

Birine bir rengi tarif etmesini söyle, "daha koyu bir kırmızı" ya da "daha turuncuya çalan bir sarı" ya da "soluk bir mavi" der. Kimse "%30 daha yeşili olan bir renk" demez. RGB'yi ilk gün öğrenen profesyonel tasarımcılar bile rengi HSB terimleriyle konuşur. Rengin sözlüğü, ton, canlılık ve parlaklık sözlüğüdür — üç düğme, üç ışık şiddeti değil.

Bir kaydırıcı oyuncunun zihinsel modeline uymuyorsa, oyuncu onu kullanmak için zihninden hesap yapmak zorunda kalır. Bir hatırlama görevi sırasında zihinden hesap yapmak, mümkün olan en kötü UX'tir. Toon Tone oyuncularının hatırladığı bir rengi olabildiğince çabuk arayüze sokması gerekir; HSB bunu bir adımda yapmalarına izin verir (tonu çevir), RGB ise üç adıma zorlar.

2. RGB kaydırıcıları, göründükleri gibi doğrusal davranmaz

Kırmızı kanalını 100'den 200'e sürükle, örnek neredeyse değişmez. Yeşili 100'den 200'e sürükle, örnek bambaşka bir aileye sıçrar. Göz, üç ana renge eşit hassasiyette değildir — yeşil algılanan parlaklığa hâkimdir, mavi en az katkıyı yapar. RGB kaydırıcıları aynı görünür ama her birim hareket başına çok farklı görsel delta üretir.

Bir tahmin oyunu için bu asimetri öldürücüdür. Bir oyuncu yeşili 20 birim aştığında örnek tanınmaz hâle gelir; aynı taşma kırmızıda neredeyse fark edilmez. Puanlama, tonlar arasında adaletsizleşir.

3. RGB, oyuncuların gerçekten önemsediği boyutları ayrıştırmaz

Bir tahmini ıskalayan oyuncular hangi boyutta yanıldıklarını bilmek ister. HSB ile puan dökümü temizdir: "tonu tutturdun ama 20 puan fazla doygundun". İşte eyleme dönüşebilir geri bildirim. RGB ile döküm şudur: "kırmızıda 14 fazla, yeşilde 22 az, maviye 8 fazlaydın" — bir insan için anlamsız.

Renk teorisi, ton, doygunluk ve parlaklığın bağımsız algısal eksenler olduğunu öğretir. RGB eksenleri algısal değil — donanımsal. İyi bir UX kullanıcıya kendisi hakkında bir şey öğretir; HSB kullanıcıya doygunluğu hafife aldığını öğretir. RGB hiçbir şey öğretmez.

Neden Lab ya da OKLab'a gitmedik

Bir hafta uğraştığımız dürüst bir soru. Lab ve OKLab algısal olarak tek tip — eşit sayısal mesafeler eşit algılanan farklara karşılık gelir, bu da puanlamayı HSB'den bile daha adil yapardı. Ama iki pratik sorun var:

• Lab sezgisel değil. L kanalı parlaklıktır ama a ve b, hiçbir uzman olmayanın anlamadığı "yeşil-kırmızı" ve "mavi-sarı" eksenleridir. Oyuncuların sadece hangi yöne sürüklemeleri gerektiğini bilmek için bir rehbere ihtiyacı olurdu.
• Lab'ın gamut dışı bölgeleri var. Bazı Lab üçlüleri görüntülenebilir hiçbir RGB rengine karşılık gelmez. Geçersiz renkler üreten kaydırıcılar, kullanılabilirlik kâbusudur.

O yüzden arayüz için HSB'yi, altta puanlama için algısal bir mesafe metriğini kullanıyoruz — her iki dünyanın en iyisi.

Puan fonksiyonu, kısaca

Toon Tone her tahmini, HSB uzayında tahmin ile hedef arasındaki ağırlıklı mesafeyi hesaplayarak 0–10 ölçeğinde puanlar:

score = 10 - 0,4 * |Δton normalize| - 0,3 * |Δdoy| - 0,3 * |Δparlaklık|

Ton biraz daha fazla ağırlık alır çünkü tonu kaçırmak en tanılayıcı hata türüdür — parlaklık hatası yine de renk ailesini tutturur; ton hatası ise yanlış karakteri hatırladığın anlamına gelir. Tam ağırlıklar şöyle ayarlandı: 7,0 "aileyi tutturdun" gibi hissettirsin, 8,5 "bir tasarımcının kabul edeceği kadar yakın" hissettirsin, 9,5+ ise "doğaüstü göz" hissettirsin.

Bu, diğer oyun tasarımcıları için ne anlama geliyor

Bir renk tahmin oyunu kuruyorsan, sonuç basit:

• Giriş UX'i için HSB kaydırıcıları kullan.
• HSB'yle ya da algısal bir metrikle puanla — asla ham RGB öklidyen mesafesiyle değil.
• Sonuç kartında H/S/B dökümünü göster ki oyuncular hangi boyutta zayıf olduklarını öğrensin.
• Alfa için dördüncü bir kaydırıcı ya da süslü bir color picker ekleme dürtüsüne karşı dur — üç kaydırıcı, bir hatırlama görevi için doğru karmaşıklıktır.

Toon Tone'un denediğin diğer renk oyunlarından neden farklı hissettirdiğini merak eden bir oyuncuysan — sebebin büyük kısmı bu.

Sen de dene