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

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

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

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

279 голосов | спросил David Thielen 30 SunEurope/Moscow2012-12-30T02:25:30+04:00Europe/Moscow12bEurope/MoscowSun, 30 Dec 2012 02:25:30 +0400 2012, 02:25:30

13 ответов


324

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

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

try 1

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

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

try 2

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

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

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

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)));

try 3

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

кривая коррекции оттенков

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

try 4

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

try 5 try 6

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

ответил sam hocevar 30 SunEurope/Moscow2012-12-30T04:32:11+04:00Europe/Moscow12bEurope/MoscowSun, 30 Dec 2012 04:32:11 +0400 2012, 04:32:11
164

Значения 8 StarCraft :

  

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

Аверс. Blizzard являются гениями UI и изучили проблему.

Они оставили Green в качестве своп-кода для Брауна на картах пустыни, поэтому технически там указано 9.

Цвета 12 Warcraft 3:

  

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

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

введите описание изображения здесь>> </p>

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

ответил bobobobo 30 SunEurope/Moscow2012-12-30T05:20:22+04:00Europe/Moscow12bEurope/MoscowSun, 30 Dec 2012 05:20:22 +0400 2012, 05:20:22
72

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

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

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

ответил Matt M. 30 SunEurope/Moscow2012-12-30T07:53:30+04:00Europe/Moscow12bEurope/MoscowSun, 30 Dec 2012 07:53:30 +0400 2012, 07:53:30
27

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

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

Итак, как раз то, что вы пытаетесь сделать. Легко идентифицировать что-то на расстоянии.

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

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

введите описание изображения здесь>> </p>

<p> <strong> шаблон </strong> легко узнаваем, а не только цвет. Хорошее текстурирование может украсить герб, достаточно большой на сундуке или в верхней части каждого блока. </p>

<p> На изображении выше шлемы для разных единиц <strong> имеют разную геометрию </strong>, а также знаки отличия щита. </p>

<p> Вам также может быть интересна идея <a href= японского понедельника , которые очень просты выглядящие «логотипы»

japanese mon

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

введите описание изображения здесь

, но они едва заметны в игре

введите описание изображения здесь>> </p>

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

<p> Я бы посмотрел на флагов и для вдохновения, особенно тех, которые не используют шаблон с 3 полосами (это немного запутывает). Рассмотрим: </p>

<ul>
<li> Швейцария: <img src =

  • Сомолия: флаг Сомолии
  • Южная Корея: флаг Южной Кореи
  • Все они имеют очень простые, но отличительные флаги.

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

    введите описание изображения здесь>> </p>

<p> Â </p></body></html>

    ответил bobobobo 1 Jpm1000000pmTue, 01 Jan 2013 23:56:46 +040013 2013, 23:56:46
    19

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

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

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

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

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

    ответил Tim Holt 30 SunEurope/Moscow2012-12-30T03:54:39+04:00Europe/Moscow12bEurope/MoscowSun, 30 Dec 2012 03:54:39 +0400 2012, 03:54:39
    17

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

     введите описание изображения здесь>> </a> </p>

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

<p> При принятии крайностей куба RGB вы получаете знакомые цвета, такие как красный, синий, голубой и т. д. После восьми угловых точек вы получаете все точки между ними по краям. </p></body></html>

    ответил RobAu 31 MonEurope/Moscow2012-12-31T01:12:33+04:00Europe/Moscow12bEurope/MoscowMon, 31 Dec 2012 01:12:33 +0400 2012, 01:12:33
    7

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

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

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

    ответил Christopher 30 SunEurope/Moscow2012-12-30T10:05:01+04:00Europe/Moscow12bEurope/MoscowSun, 30 Dec 2012 10:05:01 +0400 2012, 10:05:01
    4

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

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

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

    ответил Elijah 31 MonEurope/Moscow2012-12-31T06:32:51+04:00Europe/Moscow12bEurope/MoscowMon, 31 Dec 2012 06:32:51 +0400 2012, 06:32:51
    3

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

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

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

    ответил 30 SunEurope/Moscow2012-12-30T15:10:37+04:00Europe/Moscow12bEurope/MoscowSun, 30 Dec 2012 15:10:37 +0400 2012, 15:10:37
    3

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

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

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

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

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

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

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

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

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

    ответил 31 Mayam13 2013, 03:16:50
    2

    Попробуйте использовать этот цветной микшер:

    http://www.w3schools.com/tags/ref_colormixer.asp?colorbottom = 7FFFD4 & амп; Colortop = FFFFFF

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

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

    ответил 30 SunEurope/Moscow2012-12-30T02:42:55+04:00Europe/Moscow12bEurope/MoscowSun, 30 Dec 2012 02:42:55 +0400 2012, 02:42:55
    0

    Способ обеспечения оптимального набора с точки зрения различимых цветов для переменного количества игроков (без учета цветовой слепоты) должен был бы выбрать из HSL (цветовая модель Hue, Saturation и 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);
    
    ответил Mario Pistrich 30 SunEurope/Moscow2012-12-30T04:17:36+04:00Europe/Moscow12bEurope/MoscowSun, 30 Dec 2012 04:17:36 +0400 2012, 04:17:36
    0

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

     16 цветов

    Это цвета 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), разглядывая их разделение, а затем - используя инструмент для имитации цветовой слепоты - начал tweeking. Впоследствии я добавил почти белый, почти черный, и прокрался в серый цвет, потому что мог. Это дало мне 15 цветов. Я хотел 16 цветов, потому что это сила 2, и я, хотя это может облегчить работу разработчиков. В конце концов я нашел способ добавить 16-й цвет, мне пришлось переместить остальных для этого. Затем ... снова проверьте инструмент моделирования цветной слепоты, исправьте и повторите.

    Вот различные случаи цветной слепоты:

    Normal: 16 цветов

    Протанопия: Протанопия

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

    Tritanopia: Тританопия

    Protanomaly: Protanomaly

    Deuteranomaly: Deuteranomaly

    Tritanomaly: Tritanomaly

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

    Achromatomaly: Achromatomaly


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

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

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

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

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

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

    ответил Theraot 3 Mayam18 2018, 07:17:55

    Похожие вопросы

    Популярные теги

    security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132