Как мне найти оптимальный набор цветов для 10 игроков?

Я хочу дать каждому из 10 игроков уникальный идентификационный цвет. Есть ли оптимальный набор цветов для этого? Как мне его создать?

Каждый набор, который я придумал, содержит слишком похожие цвета.

Обновление: меня спросили ниже, для чего это (честный вопрос). Теперь я могу сказать вам - Windwardopolis и цвета работали отлично.

Вы можете создать эквидистантные значения оттенка в пространстве HSV:

for (int i = 0; i < 10; i++)
    colors[i] = HSV(0.1 * i, 0.5, 1.0);

Однако возможно, что у вас не всегда будет 10 игроков. В этом случае палитра не будет очень эффективной, если вы повторно не сгенерируете другую палитру для другого числа игроков. Вместо этого некоторые авторы рекомендуют генерировать палитру с использованием золотого сечения, используя свойство, вытекающее из теоремы о равном распределении :

for (int i = 0; i < 10; i++)
    colors[i] = HSV(fmod(i * 0.618033988749895, 1.0), 0.5, 1.0);

Таким образом, даже если вы остановитесь на 3, 4 или 7 игроках, вы получите очень хороший спред.

Многие иррациональные числа подойдут, но золотое сечение будет работать лучше всего (это было доказано ).

Наконец, вы можете использовать две разные последовательности генерации для настройки Sили Vтоже. Например ( изменить : я добавил sqrtпризыв к лучшему равномерному распределению ):

for (int i = 0; i < 10; i++)
    colors[i] = HSV(fmod(i * 0.618033988749895, 1.0),
                    0.5,
                    sqrt(1.0 - fmod(i * 0.618033988749895, 0.5)));

Обновление : вышеупомянутые результаты могут быть улучшены с помощью кривой коррекции для H(аналогичной гамма-кривой для компонентов RGB), которая учитывает зрительную систему человека. Это кривая коррекции оттенка, которую я рассчитал с использованием метрики CIEDE2000 :

Результаты для значений эквидистантного оттенка следующие:

А для последовательностей генерации золотого сечения (с твиками и без них V):

Я опубликую аппроксимацию формулы кривой для использования в программах, как только найду достаточно хорошую.

8 цветов StarCraft :

Красный, синий, бирюзовый, фиолетовый, оранжевый, коричневый (зеленый на картах пустыни), белый (зеленый на картах льда), желтый

Аверс. Blizzard - гении пользовательского интерфейса, изучившие проблему.

Они оставили Грина в качестве замены Брауна на картах пустыни, так что технически там их 9.

В 12 Warcraft 3 цвета:

Красный, синий, бирюзовый, фиолетовый, желтый, оранжевый, зеленый, розовый, серый, светло-голубой, темно-зеленый, коричневый

Вот как это выглядит:

Как видите, они довольно различимы и легко различимы. Темно-зеленый цвет на самом деле легко отличить от чирка, возможно, потому, что человеческий глаз легче всего различает оттенки зеленого. Если вы уверены, что вашими игроками будут женские тетрахроматы, вы можете выбрать любой цвет.

Несколько человек здесь рекомендуют разделить цветовое пространство HSV на 10 равноудаленных позиций по оттенку. На мой взгляд, это на самом деле не очень хорошее решение. Человеческий глаз не воспринимает различия в цвете одинаково по всему спектру ВПГ. Например, то, что мы бы назвали оранжевым, занимает крошечный кусочек полосы, тогда как хороший 25% -ый кусок может быть квалифицирован как зеленый. Так что все начинается с плохой предпосылки. Посмотрите на первый ряд цветов в этом ответе . Две зелени почти неразличимы.

Помните, что ваши пользователи должны будут общаться и ссылаться на цвета. В свете этого тема Starcraft / Warcraft является отличным примером для подражания. Выбор на основе списка простых английских цветов Crayola совсем не плохая идея, потому что в итоге вы получите знакомые именованные цвета. Затем просто настройте эти цвета, чтобы они были смелыми, приглушенными, в зависимости от вашей эстетики, при условии, что они по-прежнему узнаваемы, например: красный, оранжевый, желтый, зеленый, синий, фиолетовый, коричневый, серый, белый, черный.

Изменить: связь между языком и восприятием цвета настолько интересна, я просто хотел поделиться этой удивительной ссылкой:

Crayola-фикация мира: как мы дали названия цветов, и это перепуталось с нашими мозгами на Эмпирическом рвении

Я подумал, что нужно разбить этот подход к «символам» в отдельный ответ.

В свое время, я предполагаю, что людям нужны флаги и прочее, чтобы легко идентифицировать армию на расстоянии, чтобы вы знали, атаковать или защищаться (в случае врагов), или быть освобожденным (в случае союзников).

Кстати, именно это вы и пытаетесь сделать. Легко определить что-то на расстоянии.

Вы можете сделать это только цветом, но, возможно, лучший способ сделать это с цветом и символами . Использование комбинации цветов и символов поможет дальтоникам идентифицировать вещи, как и многие люди, упомянутые выше.

Если юниты достаточно большие, вы также можете использовать 2-4 цветных герба.

Модель легко узнаваема, а не только цвета. Хорошее текстурирование может сделать герб довольно большим на груди или плече каждого подразделения.

На изображении выше шлемы для разных юнитов имеют разную геометрию , а также эмблему щита.

Вы также можете найти интересную идею японского Mon , которые очень просто выглядят как «логотипы».

Теперь вы в основном рекламируете свои подразделения с помощью современных «брендов». StarCraft II сделал это немного с «наклейками»,

но они едва видны в игре

и не используются для идентификации единиц, так как цвета.

Для вдохновения я бы также посмотрел на флаги, особенно те, которые не используют трехполосный шаблон (они немного сбивают с толку). Рассмотреть возможность:

• Швейцария:
• Somolia:
• Южная Корея:

У всех них есть очень простые на вид, но отличительные флаги.

Также проверьте символы, которые американское правительство использует, чтобы идентифицировать защитников. Это монохромные изображения (могут быть полностью черно-белыми), так что это может быть отличным решением, которое не исключает дальтоников (в основном используют символы для идентификации команд вместо цветов)

Зачем изобретать велосипед? Существует даже стандарт для набора из шестнадцати цветов, из которых вы можете выбрать десять. Это набор ANSI http://en.wikipedia.org/wiki/ANSI_escape_code#Colors

Цвет ANSI равномерно распределен по кубу RGB, который, я думаю, лучше подходит для этой проблемы, чем пространство HSV.

Взяв крайние значения куба RGB, вы получите знакомые цвета, такие как красный, синий, голубой и т. Д. После восьми угловых точек вы получите все промежуточные точки по краям.

Сделать 10 цветов, которые можно выделить, будет очень сложно. Это довольно распространенная проблема при создании графиков или диаграмм для многих значений, поэтому они часто используют цвет и форму или комбинацию цветов и рисунков.

Если вам нужно отобразить маркеры, вы можете использовать 4 основных цвета (например, красный, синий, оранжевый, черный) и четыре основные формы (квадрат, круг, треугольник, ромб) и получить 16 очень легко различимых маркеров.

Если вы раскрашиваете области, используйте ту же идею, но комбинируйте цвета с узорами штриховки в черных или белых линиях вместо фигур.

Еще одна вещь, чтобы рассмотреть это не использовать цвет как единственный способ сказать стороне. Наведение мышью на область может выделить ее и дать подсказку с явно указанным именем игрока. Или, может быть, список из 10 игроков может быть наведен мышью, и когда вы наводите курсор на имя игрока, отображаются все области на карте для этого игрока.

Также при выборе цвета учитывайте дальтонизм. Например, зеленый и красный могут быть не различимы. Посмотрите на http://jfly.iam.u-tokyo.ac.jp/color/#select для набора предлагаемых цветов, которые не будут проблемой для дальтоников. Дополнительным ресурсом является http://www.usability.gov/articles/newsletter/pubs/022010new.html#ColorsthatWorktheBest

Даже если вы можете получить 10 уникальных цветов, легко различимых одним человеком, другому человеку все равно будет сложнее его различить.

Попробуйте ограничить себя меньшим набором цветов и добавить отличительную черту , например черную полосу . Для набора цветов, вероятно, лучше не отклоняться слишком далеко от того, что большинство людей может легко отличить: ROYGBIV . Простая полоса / без полос на ROYGBIV дает вам 14 идентифицирующих игровых фигур.

Вы не должны ограничивать себя черной полосой. Рассмотрим следующее решение для разводки 25 пар (которые также могут быть полосами вместо пар): http://en.wikipedia.org/wiki/25-pair_color_code

Просто хотел добавить ссылку на палитру Tableau-10, которая была разработана для высокой отличимости и которая описана в этой статье:

http://vis.stanford.edu/files/2012-ColorNameModels-CHI.pdf

«Палитра Tableau-10 обеспечивает наилучшую цветопередачу и минимальное совпадение имен».

Брент Берлин и Пол Кей показали, что цветовое пространство можно разделить на несколько основных цветов, но это зависит от вашей культуры, поскольку присвоение имени цвету делает его более различимым.

На английском языке существует 11 основных цветов: белый, черный, красный, зеленый, желтый, синий, коричневый, фиолетовый, розовый, оранжевый и серый.

Мне не нравится идея выбирать оттенки вокруг колеса по тем же причинам, о которых говорил Мэтт Монтег

Делайте больше, чем просто цвета - имейте визуальные представления, которые добавляют как знания, художественный стиль, так и представление цвета.

Например, в Legend of the Five Rings используется невероятный способ различать «набор цветов».

Один из самых красивых примеров, чтобы взять урок. Обратите внимание на сотни различий между кланами. Это не только основные цвета, но и вторичные и даже третичные цвета. Цвета даже включены в прическу, тип одежды, тип персонажа, прикрепленный символ, флаги, баннеры, мини-флаги на спине, персоналии.

Самая большая вещь, которую я бы взял из этого, - это сочетание нескольких цветов. Это не просто: синий, красный, фиолетовый, коричневый, желтый, зеленый, бирюзовый.

Это сочетание двух цветов, причем оба они очень ярко выражены. Это может позволить значительное количество дополнительного количества игроков.

Каждый клан будет иметь как основной цвет, так и набор вторичных цветов.

«Краб был в основном идентифицирован сине-серым, а также черным, красным и коричневым цветами».

Это красиво, потому что независимо от того, как выглядел человек (крупный, хрупкий, самурай, волшебник, крестьянин), вы всегда могли определить, из какого клана он был. Это был не просто «Красный» для Скорпиона, это был темный кроваво-красный и ЧЕРНЫЙ. При этом у Феникса были цвета солнечных лучей: красный, оранжевый, желтый.

Вы никогда не перепутаете Скорпиона с Фениксом, даже если их цвета были похожи, и они оба использовали много красного.

Попробуйте этот цветовой миксер: w3schools.com HTML Color Mixer .

Вот что я бы сделал: выберите цвет для первого варианта. Затем выберите один для 2-го варианта, чтобы 2-й цвет находился в точном противоположном положении по отношению к первому. Таким образом, цвет в позиции: строка 1, ячейка 1 будет иметь противоположное значение: последняя строка, последняя ячейка.

Таким образом, каждый раз вы получаете 2 очень разных цвета на концах микса. Повторите это 5 раз, всегда выбирая цвета, которые далеки от последнего выбора.

На этот вопрос есть много ответов, но я хотел бы больше затронуть вопрос доступности.

Если бы я был в вашем сценарии (мне нужно было выбрать цвета для того количества вещей в игре, которые должны восприниматься всеми участвующими игроками как отличные), моей главной заботой было бы не только наличие дальтоников, но и игроков, у которых есть плохое зрение.

Насколько мне известно, единственным решением этой проблемы является VALUE CONTRAST . Некоторые люди могут видеть только черным по белому (источник: рассказ друга из художественного колледжа о том, что он посещает занятия по теории цвета, хотя вообще не может воспринимать любой цвет из-за неудачной лазерной операции на глазах). Некоторые люди плохо видят или частично / юридически слепы. Вы должны различных оттенков серого в качестве отправной точки , так что цвета , которые вы DO выбираете для просмотра и различны для КАЖДОГО .

Чтобы добиться всего этого и получить цвета, которые выглядят хорошо, рассмотрите это изображение, полученное наложением горизонтального градиента радуги в режиме смешивания цветов поверх вертикального черно-белого градиента (попробуйте сами, возможно, с использованием собственного цвета градиент кроме радуги!)

От самого темного до самого светлого: черный, синий, красный, пурпурный, зеленый, голубой, желтый, белый.

Вы видите слабый зигзаг "чистого цвета"? Это естественная ценность цветов. Даже при использовании чистых цветов синий цвет темнее, а желтый светлее. Используйте эту информацию, чтобы выбрать цвета, которые соответствуют ценностным требованиям геймеров, которым дальтонизм и / или слабовидение, и эстетически приятны людям, которые могут ощутить всю полноту выбранных вами оттенков.

Надеюсь это поможет! : -)

PS Я хочу убедиться, что вы также видели этот комментарий!

Лучший ответ на дальтонизм это просто не полагаться на цвет. Каждый игрок в идеале должен иметь уникальный силуэт для любых актеров, которых он контролирует. И я имею в виду силуэт, а не какой-то символ; слишком много игр в жанре «Матч 3» делают это совершенно неправильно, и даже для тех, кто не страдает дальтонизмом, в них просто трудно играть и они слишком сильно напрягают глаза. - Шон Мидлдич 30 декабря '12 в 5:08

Способ обеспечения оптимального набора с точки зрения различимых цветов для различного числа игроков (без учета дальтонизма) заключается в выборе цветовой модели HSL (Hue, Saturation and Lightness).

Вы выбираете постоянную яркость и насыщенность, в зависимости от вашего выбора. Затем вы меняете оттенок цвета 360 / playerCount, как в следующем псевдокоде:

saturation = 200;
lightness = 128;
hueDelta = 360 / PLAYER_COUNT;

for (int i = 0; i < PLAYER_COUNT; i++)
    color[i] = Color.FromHSL(hueDelta * i, saturation, lightness);

Я хочу представить альтернативную цветовую схему:

Это цвета RGB (в том же порядке) с предлагаемыми именами:

#eeeeee - white
#efef00 - yellow
#00e1da - cyan
#bfbf00 - olive
#12c055 - light green
#e21e80 - pink
#777777 - gray
#c10008 - red
#8900ae - light purple
#7c3900 - light brown
#0029b9 - blue
#400086 - dark purple
#4b1c00 - dark brown
#003004 - dark green
#07004b - dark blue
#111111 - black

Примечание: я не использовал чистый черный и белый, думая, что, возможно, они используются в качестве фона или контуров.

Методология: выбрал 12 цветов на насыщенной поверхности цветового куба (думаю, что я был бы счастлив с 12), следил за их разделением, а затем - используя инструмент для имитации дальтонизма - начал твикинг. После этого я добавил почти белое, почти черное и прокрался серым, потому что мог. Это дало мне 15 цветов. Я хотел 16 цветов, потому что это степень 2, и я думал, что это может упростить задачу для разработчиков. В конце концов я нашел способ добавить 16-й цвет, для этого мне пришлось переместить остальных. Затем ... проверьте еще раз с помощью инструмента моделирования дальтонизма, исправьте и повторите.

Вот различные случаи дальтонизма:

Обычный:

Протанопия:

Дейтеранопия:

Tritanopia:

Protanomaly:

Deuteranomaly:

Tritanomaly:

цветовая слепота:

Achromatomaly:

Надо сказать, что после некоторой игры с имитатором дальтонизма контраст имеет первостепенное значение.

Рассмотрим, например, 5-й (светло-зеленый), 7-й (серый) и 9-й (светло-фиолетовый) цвета. Они выглядят похожими в некоторых случаях, в частности, в небольших размерах и разделены другим цветом. Однако разместите их рядом, и вы сможете отличить их друг от друга. Увеличьте площадь, покрытую цветом, и вы сможете легко отличить их друг от друга. Итак ... дизайн для дальтонизма - это не только выбор цветов.

На этой ноте ... если вы выберете комбинацию из двух цветов вместо одного, чтобы представить фракцию, это будет иметь большое значение.

Эти цвета были выбраны очень эмпирическим методом. Я заметил, что очень важно убедиться, что все они имеют разную яркость. Я также заметил, что большинство «цветов» появляются дважды (есть два зеленых, два пурпурных, два коричневых и т. Д.). Фактически, 4-й цвет (оливковый) - последний, который я добавил, и я решил, что это будет желтый цвет, потому что не было ничего похожего на желтый. Я полагаю, что это может стать основой для более системного выбора цветов.

В ретроспективе я, вероятно, должен сделать второй желтый цвет (оливковый) темнее и использовать это пятно яркости для розового цвета (см. 7-й цвет). Почему? Потому что это даст вам больше оттенков для игры. Эрн ... это достаточно хорошо, и получать все фотографии - это хлопотно.

Приложение : Что-то, что я не учел, это то, как ЖК-экран искажает цвета, если вы смотрите за пределы предпочтительного диапазона углов.