Почему HSB обходит RGB в играх на угадывание цвета
Когда мы собирали Toon Tone, самым важным решением по интерфейсу был вопрос: какую цветовую модель показывают ползунки? RGB — выбор по умолчанию: именно так каждый экран отрисовывает пиксели. Но для игры, в которой человека просят угадать цвет, RGB — катастрофически неподходящий вариант. В этом посте — почему мы выбрали HSB и почему так же стоит поступать любой игре на угадывание цвета.
Две цветовые модели за 30 секунд
RGB описывает цвет тем, сколько красного, зелёного и синего света он излучает. Каждый канал — от 0 до 255. (255, 0, 0) — чистый красный. (255, 255, 0) — жёлтый, потому что красный и зелёный свет на экране в сумме дают жёлтый. Для «железа» модель правильная: ровно это и делают субпиксели монитора.
HSB (он же HSV) описывает цвет через оттенок (0–360°, точка на цветовом круге), насыщенность (0–100, насколько живой) и яркость (0–100, насколько светлый). (0, 100, 100) — тот же чистый красный. (60, 100, 100) — жёлтый, потому что ты повернул колесо оттенка на 60 градусов. Для «железа» модель неправильная, зато для человеческой интуиции — точная.
Три причины, почему RGB не подходит для игры на угадывание цвета
1. RGB не соответствует тому, как люди описывают цвет
Попроси человека описать цвет — услышишь «красный, но потемнее», «жёлтый с уходом в оранжевый» или «выцветший синий». Никто не скажет «цвет, в котором на 30% больше зелёного». Даже профессиональные дизайнеры, у которых RGB на первой странице учебника, в разговоре о цвете оперируют HSB. Словарь цвета — это словарь оттенка, живости и яркости: три ручки, а не три интенсивности света.
Если ползунок не соответствует ментальной модели игрока, ему приходится считать в голове, чтобы этим ползунком пользоваться. Считать в уме во время задачи на воспоминание — худший возможный UX. Игроку Toon Tone надо как можно быстрее перенести вспомненный цвет в интерфейс; HSB позволяет сделать это за один шаг (повернуть оттенок), RGB — только за три.
2. Ползунки RGB ведут себя нелинейно — вопреки ожиданиям
Потяни красный канал со 100 до 200 — образец почти не изменится. Потяни зелёный со 100 до 200 — образец прыгнет в совершенно другое семейство. Глаз неодинаково чувствителен к трём базовым цветам: зелёный доминирует в воспринимаемой яркости, синий вносит меньше всего. RGB-ползунки выглядят одинаково, но при одинаковом смещении дают совершенно разные визуальные изменения.
Для игры на угадывание такая асимметрия фатальна. Игрок перелетел на 20 пунктов по зелёному — образец неузнаваем; такой же перелёт по красному почти не заметен. Оценка перестаёт быть честной для разных оттенков.
3. RGB не выделяет те измерения, которые реально важны игроку
Когда игрок промахивается, он хочет понять, в каком измерении он ошибся. С HSB разбор счёта получается понятный: «оттенок угадал, но насыщенность была на 20 пунктов выше». Это конкретная, полезная обратная связь. С RGB разбор такой: «красный на 14 выше, зелёный на 22 ниже, синий на 8 выше» — для человека бессмыслица.
Теория цвета учит, что оттенок, насыщенность и яркость — это независимые перцептивные оси. Оси RGB — не перцептивные, а аппаратные. Хороший UX рассказывает пользователю кое-что о нём самом: HSB сообщает игроку «ты недооцениваешь насыщенность». RGB не сообщает ничего.
Почему не Lab и не OKLab
Честный вопрос, над которым мы бились неделю. Lab и OKLab перцептивно равномерны: равные числовые расстояния соответствуют равным воспринимаемым различиям, что сделало бы оценку ещё честнее, чем в HSB. Но есть две практические проблемы:
- Lab неинтуитивен. Канал L — это яркость, но a и b — оси «зелёный-красный» и «синий-жёлтый», которые ни один неспециалист не понимает. Игрокам пришлось бы пройти туториал только ради того, чтобы понять, в какую сторону тянуть.
- Lab имеет зоны вне цветового охвата. Некоторые тройки Lab не соответствуют ни одному отображаемому RGB-цвету. Ползунки, выдающие невозможные цвета, — кошмар с точки зрения юзабилити.
Поэтому мы используем HSB для интерфейса и перцептивную метрику расстояния для оценки под капотом — лучшее из обоих миров.
Функция счёта, коротко
Toon Tone оценивает каждую догадку по шкале 0–10, вычисляя взвешенное расстояние между догадкой и целью в пространстве HSB:
score = 10 − 0,4 · |Δоттенок нормированный| − 0,3 · |Δнасыщенность| − 0,3 · |Δяркость|Оттенок весит чуть больше: ошибка по оттенку — самый диагностически значимый промах. Промах по яркости всё ещё попадает в нужное цветовое семейство, а промах по оттенку означает, что ты помнишь персонажа неправильно. Точные веса настроены так, чтобы 7,0 ощущалось как «попал в семейство», 8,5 — как «достаточно близко, чтобы дизайнер пропустил мимо», а 9,5+ — как «сверхъестественный глаз».
Что это значит для других дизайнеров игр
Если ты делаешь игру на угадывание цвета, вывод простой:
- Используй HSB-ползунки для UX ввода.
- Считай оценку в HSB или в перцептивной метрике — никогда не используй чистое евклидово расстояние в RGB.
- Показывай разбор по H/S/B в карточке результата, чтобы игроки понимали, в каком измерении они слабее.
- Удержись от соблазна добавить четвёртый ползунок для альфы или навороченный color picker: три ползунка — это правильный уровень сложности для задачи на воспоминание.
А если ты игрок и удивляешься, почему Toon Tone ощущается иначе, чем другие цветовые игры, которые ты пробовал, — это и есть бо́льшая часть ответа.