Як я можу знайти оптимальний набір кольорів для 10 гравців?


293

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

Кожен набір, який я придумав, містить забагато кольорів.

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


2
Червоний, синій, зелений, фіолетовий, коричневий, помаранчевий, жовтий, чорний, білий і сірий.
Луїс Естрада

12
який колір має задній грунт? або які інші кольори у вас в сцені (наприклад, для нейтральних об'єктів)?
Ali1S232

Це може бути трохи більш амбітним, ніж те, що ви планували, але як щодо надання гравцям всіляких варіантів, щоб налаштувати вигляд своїх персонажів, щоб кожен з них виглядав унікальним завдяки великій кількості можливих комбінацій?
Філіпп

Зірваного погляду, я гадаю, я б запитав, що саме ви фарбуєте? Зони на карті? Маркери? Моделі гравців у 3D-грі?
Тім Холт

4
Я наче не очікував, що це питання матиме хороші відповіді, уау.
поштовх

Відповіді:


337

Ви можете створити рівновіддалені значення відтінку в просторі HSV:

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

спробуйте 1

Однак можливо, що у вас не завжди буде 10 гравців. У такому випадку палітра була б не дуже ефективною, якщо ви знову не створили іншу палітру для іншої кількості гравців. Натомість деякі автори рекомендують генерувати палітру, використовуючи відношення золота, скориставшись властивістю, отриманою в результаті теореми про рівномірний розподіл :

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

спробуйте 2

Таким чином, навіть якщо ви зупинитесь на 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)));

спробуйте 3

Оновлення : наведені вище результати можна покращити, використовуючи коригувальну криву для H(подібно до кривої гамми для RGB-компонентів), яка враховує візуальну систему людини. Це крива коригування відтінку, яку я обчислював за допомогою метрики CIEDE2000 :

крива корекції відтінку

Результати для рівновіддалених значень відтінку такі:

спробуйте 4

А для поколінь із поколінням золотого співвідношення (із налаштуваннями та без них V):

спробуйте 5 спробуйте 6

Я опублікую наближення формули кривої для використання в програмах, як тільки знайду досить гарну.


11
Чудова відповідь! Зміщення значень насичення також може допомогти, тут у вас немає коричневого кольору. Залежно від стилів карти, можливі також кольори білого або чорного кольорів.
bobobobo

21
Це, мабуть, не враховує дальтонізм? Дуже цікава відповідь.
ОлександрБревіг

7
@AlexanderBrevig ні, на жаль; він також не враховує той факт, що люди не вважають, що відтінки контрастують однаково. Я думаю про останнє і можу відповісти згодом оновити. Боюся, питання про сліпоту кольорів - набагато складніша справа.
sam hocevar

25
Найкраща відповідь на дальтонізм - це просто, не покладаючись на колір. Кожен гравець в ідеалі повинен мати унікальний силует для будь-яких акторів, якими він керує. І я маю на увазі силует, а не якийсь символ; занадто багато видів матчів 3 відповідають цілком неправильним, і навіть для тих, хто не має дальтонізму, їм просто важко грати і викликати занадто велике напруження очей.
Шон Міддлічч

13
Будь ласка, дивіться графік сприйняття кольорів людини . Ви повинні побудувати точки, рівновіддалені в цьому двовимірному просторі. побудувати схему, рівновіддалену за відтінком - це не в змозі пристосувати людське сприйняття навіть у найменшій частині
ErikE

172

8 кольорів StarCraft :

Червоний, Синій, Тіл, Фіолетовий, Помаранчевий, Коричневий (зелений на картах пустелі), Білий (зелений на льодових картах), Жовтий

Обв. Blizzard - генії інтерфейсу та вивчили проблему.

Вони залишили Зелений як підміна для Брауна на картах пустель, тому технічно там перераховано 9.

У 12 Warcraft 3 кольори:

Червоний, Синій, Тіл, Фіолетовий, Жовтий, Помаранчевий, Зелений, Рожевий, Сірий, Світло-синій, Темно-зелений, Коричневий

Ось як це виглядає:

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

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


3
Якби я міг вибрати 2 відповіді, я вибрав би і вашу. Дякую
Девід Тілен

11
Бути тетрахроматом допомагає розрізняти кольори в реальному світі, оскільки нормальні об'єкти мають складний спектр. Однак бути тетрахроматом не допоможе комп'ютерні ігри, оскільки монітори мають лише три кольори (червоно-зелений синій). Щоб принести користь людям з мутацією в статті, потрібен новий монітор з чотирма кольорами (червоно-зелений синій помаранчевий). Обмежений кольоровий простір RGB також означає, що всі фото / відео повинні виглядати тетрахроматично нереально.
Джо

3
Люди з частковою кольоровою сліпотою є ще однією проблемою - на наведеному вище скріншоті W3 рожевий та сірий виглядають практично однаково для мене, поки я не прочитаю, що це таке, і знову придивляюся уважно.
f055

20
чудові програмісти крадуть! Перше, на що я пішов би - це будь-яка сучасна багатокористувацька гра Blizzard.
Джефф Етвуд

4
Насправді я частково сліпий за кольором, тому наступні кольори важче розрізнити: Помаранчевий проти зеленого, рожевий проти сірого, темно-зелений проти коричневого
Архімед Траяно

75

Кілька людей тут рекомендують розділити кольори простору HSV на 10 рівновідставних позицій за відтінком. На мою думку, це насправді не вдале рішення. Людське око не сприймає різниці в кольорі однаково в усьому спектрі ВПГ. Наприклад, те, що ми би назвали помаранчевим, займає крихітний шматочок смужки, тоді як хороший шматок 25% може кваліфікуватися як зелений. Отже, це починається з поганої передумови. Подивіться на перший ряд кольорів у цій відповіді . Дві зелені майже не відрізняються.

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

Редагувати: зв’язок між мовою та кольоровим сприйняттям такий цікавий, я просто хотів поділитися цим дивовижним посиланням:

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


2
Це справді має багато сенсу; під час написання своєї відповіді я дослідив більше інформації про відносне сприйняття контрасту людьми, але не знайшов жодної цифри. Можливо, у вас є якісь посилання?
sam hocevar

Ось цікава програма про співвідношення мови та кольору: dailymotion.com/video/…
Метт М.

Чи знаєте ви нелінійній карті величини відтінку, яка враховує це?
Аноні-Мус

1
Привіт @MattMontag, лише думка: Замість того, щоб посилатися на "відповідальну відповідь", яка може змінитись (хоча, знову ж таки, вона має широкі результати ...), варто посилатися безпосередньо на відповідну відповідь. Хороша відповідь, +1
Platinum Azure

3
@ Anonymous-Mousse: Колірний простір лабораторії створений для наближення людського зору. Він прагне до перцептивної рівномірності. Візьміть рівновіддалені кольори лабораторії і нанесіть їх на HSV, і ви побачите листування. Це було б не тільки нелінійно щодо відтінку.
Янус Трольсен

29

Я думав, що мені потрібно розбити цей "символічний" підхід на окрему відповідь.

Ще тоді я припускаю, що людям потрібні прапори та інше, щоб легко ідентифікувати армію на відстані, так що ви знаєте, чи нападати чи захищати (у разі ворогів), чи звільнятись (у випадку союзників).

Отже, випадково саме це ви намагаєтеся зробити. Легко визначте щось на відстані.

Ви можете це зробити просто кольором, але, можливо, кращим способом це зробити з кольором та символами . Використання комбінації кольорів та символів допоможе кольоровим сліпам ототожнювати речі, як і багато хто згаданих вище.

Якщо одиниці досить великі, ви також можете перейти з 2-4 кольоровими гербами.

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

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

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

Можливо, вам також буде цікава ідея японського пн , які дуже просто виглядають "логотипами"

японський пн

Тепер ви в основному брендуєте свої підрозділи сучасними "брендами". StarCraft II зробив це трохи за допомогою "наліпки",

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

але це майже не видно в грі

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

і не використовуються для ідентифікації одиниць настільки, як кольори.

Я хотів би роздивитись прапори також для натхнення, особливо тих, у яких не використовується 3-смугастий візерунок бренду (вони стають трохи заплутаними). Поміркуйте:

  • Швейцарія: прапор Швейцарії
  • Сомолія: прапор Сомолі
  • Південна Корея: прапор Південної Кореї

Всі вони мають дуже прості на вигляд, але характерні прапори.

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

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

 


Поділ цього на дві відповіді порушив деякі образи.
Маркс Томас

Герби виглядають круто, але в справжньому геймплейі вони занадто складні, щоб розкрити. Принаймні без основного кольору фону.
Давид С. Єпископ

3
Знаєте, це "Сомалі", а не "Сомолія".
Піжама Panda

21

Навіщо винаходити колесо? Навіть є стандарт для набору з шістнадцяти кольорів, з яких можна було вибрати десять. Це набір ANSI http://en.wikipedia.org/wiki/ANSI_escape_code#Colors

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

Колір ANSI однаково розподілений на кубі RGB, який, я думаю, краще підходить для цієї проблеми, ніж простір HSV.

Приймаючи крайність куба RGB, ви отримуєте знайомі кольори, такі як червоний, синій, блакитний тощо. Після восьми кутових точок ви отримуєте всі точки посередині, по краях.


2
насправді зважаючи на кольорових сліпих, це досить близько до кольорових сліпих, якщо ви усунете деякі кольори
Архімед Траяно

20

Зробити 10 кольорів, які можна розрізнити, буде справді важко. Це досить поширена проблема у створенні графіків чи діаграм для багатьох значень, саме тому вони часто використовують поєднання кольорів і форм, кольорів та хеш-малюнків.

Якщо вам потрібно відобразити маркери, ви можете використовувати 4 основні кольори (наприклад, червоний, синій, помаранчевий, чорний) та чотири основні форми (квадрат, коло, трикутник, ромб) та отримати 16 дуже просто відрізнити маркерів.

Якщо ви забарвлюєте в областях, використовуйте ту саму ідею, але комбінуйте кольори з візерунками люків чорними або білими лініями замість форм.

Інша річ, яку слід врахувати, - це не використовувати колір як єдиний спосіб сказати сторону. Налаштування на область може виділити її та дати підказку інструменту із чітко вказаним ім'ям гравця. Або, можливо, список із 10 гравців можна перемістити, і коли один наводить на ім'я гравця, відображаються всі області на карті для цього гравця.

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


4
+1 для згадування візерунків та кольорової сліпоти! Недостатньо розробників ігор думають над цією проблемою.
Тревор Пауелл

7

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

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

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


Говорячи про відмінні риси, я пропоную вам спробувати подивитися на гру Bomberman з 10 гравцями для Sega Saturn ще в 1993 році i.imgur.com/mCVmk.png
Архімед

Укажіть "Я", оскільки часто важко розрізнити B <- I та I -> V. У вас ще 12 кольорових ідентифікаторів.
ocodo

Напевно, правда, що "Я" важко відрізнити. Однак я підозрюю, що можна було б знайти легше "B" і темніше "Я", щоб змусити його працювати з 7 (14 з смугами). Однак головний момент щодо додавання смуг чи іншої відмітної риси - все ж.
Крістофер

4

Просто хотілося б навести посилання на палітру Tableau-10, яка була розроблена для високої виразності і яка описана в цій роботі:

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

"Палітра Tableau-10 забезпечує найкращу кольорову виразність і мінімальне збіг імен."


3

Брент Берлін та Пол Кей показали, що кольоровий простір можна розділити лише на кілька основних кольорів, але це залежить від вашої культури в тому, що надання ім'я кольору робить його більш помітним.

В англійській мові є 11 основних кольорів: білий, чорний, червоний, зелений, жовтий, синій, коричневий, фіолетовий, рожевий, помаранчевий та сірий.

Мені не подобається ідея вибору відтінків навколо колеса з тих самих причин, що і Метт Монтаг


+1 Це правда. Є культурний ухил. Але є також наука про колір, і хвилевих гармонік не можна заперечувати, якщо сенсорне обладнання не працює (наприклад, дальтонізм).
Інженер

З паперу є посилання на акуратний онлайн-додаток: kuler.adobe.com
bobobobo

3

Робіть більше, ніж просто кольори - майте візуальні зображення, що додають як лору, мистецькому стилю, так і зображенню кольору.

Наприклад, Легенда про п’ять кілець використовує неймовірний спосіб розмежувати "набір кольорів".

Один з найкрасивіших прикладів, з якого можна взяти урок. Зверніть увагу на сотні способів розмежування кланів. Це не тільки первинні кольори, але й вторинні та навіть третинні кольори. Кольори навіть включені у зачіску, тип одягу, тип характеру, прикріплений символ, прапори, банери, міні-прапори на спині, особистості.

Найбільше, що я взяв би з цього, - це поєднання декількох кольорів. Це не просто: синій, червоний, фіолетовий, коричневий, жовтий, зелений, чирок.

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

Кожен клан мав би як основний колір, так і набір вторинних кольорів.

"Краб в основному ототожнювався із синьо-сірим, а також чорним, червоним та коричневим кольорами".

Це прекрасно, адже незалежно від того, як виглядала людина (великий, кволий, самурай, чарівник, селянин), ти завжди міг сказати, з якого клану вони родом. Це був не просто "Червоний" для Скорпіона, це був темний Кров Червоно-Чорний. У той час Фенікс мав кольори сонячних променів: червоний, помаранчевий, жовтий.

Ви ніколи не плутатимете Скорпіона з Феніксом, навіть якщо їхні кольори були схожі, і вони обоє використовували багато червоного.


3

Спробуйте цей змішувач кольорів: w3schools.com Змішувач кольорів HTML .

Ось що б я зробив: виберіть колір для першого варіанту. Потім виберіть один для другого варіанту, щоб 2-й колір знаходився в абсолютно протилежному положенні щодо першого. Отже, колір у позиції: рядок 1, клітинка 1 матиме протилежне значення: останній рядок, останній комірок.

Таким чином ви щоразу отримуєте два дуже різних кольори на кінцівках суміші. Повторіть це 5 разів, завжди вибираючи кольори, далекі від останнього.


2
Я спробував це. Мені здалося, що простіше просто вибрати кольори, розташовані один від одного, як це . Добре працює.
MichaelHouse

1

На це запитання є багато відповідей, але я хотів більше торкнутися доступності.

Якби я був у вашому сценарії (потрібно вибрати кольори для кількох речей у грі, які повинні сприйматись різними усіма учасниками гравців), моє головне питання стосуватиметься не лише гравців з кольоровими слідами, але й гравців, які мають низький зір.

Наскільки мені відомо, єдине рішення цього питання - це ЗНАЧЕННЯ КОНТРАСТ . Деякі люди можуть бачити лише чорно-біле (джерело: друг з розповідей художнього коледжу про те, що проходить клас з теорії кольорів, не маючи можливості сприймати жодне забарвлення через невдалу лазерну операцію очей). Деякі люди зі слабким зором або частково / юридично сліпі. Ви повинні різних відтінків сірого в якості відправної точки , так що кольори , які ви DO вибираєте для перегляду і різні для КОЖНОГО .

Щоб виконати все це та мати кольори, які добре виглядають, розгляньте це зображення, отримане шляхом нанесення горизонтального градієнта веселки в режимі кольорового змішування поверх вертикального чорно-білого градієнта (спробуйте самостійно, можливо, за допомогою спеціального кольору градієнт, крім веселки!):

процес відтворення цього зображення, описаного вище

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

Ви можете бачити слабкий зигзаг «чистого кольору»? ТО - натуральна цінність зображених кольорів. Навіть при використанні чистих кольорів блакитний темний, а жовтий - найлегший. Скористайтеся цією інформацією, щоб вибрати кольори, які відповідають вимогам цінності для геймерів, котрі мають сліпий колір та / або низький зір І естетично приємні для людей, які можуть сприймати всю велич обраних вами відтінків.

Сподіваюся, це допомагає! : -)



PS Я хочу переконатися, що ви також бачили цей коментар!

Найкраща відповідь на дальтонізм - це просто, не покладаючись на колір. Кожен гравець в ідеалі повинен мати унікальний силует для будь-яких акторів, якими він керує. І я маю на увазі силует, а не якийсь символ; занадто багато видів матчів 3 відповідають цілком неправильним, і навіть для тих, хто не має дальтонізму, їм просто важко грати і викликати занадто велике напруження очей. - Шон Міддлічч 30 грудня 1212 о 5:08


0

Способом забезпечення оптимального набору з точки зору розрізнених кольорів для різної кількості гравців (без урахування колірної сліпоти) буде вибір із кольорової моделі HSL (відтінок, насиченість та легкість).

Ви вибираєте постійну легкість і насиченість, залежно від вашого вибору. Потім ви зміщуєте відтінок кольору на 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);

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), заштрихувавши їх поділом, а потім - використовуючи інструмент для імітації кольорової сліпоти - почав твінінг. Опісля я додав майже білого, майже чорного та прошмигнув сірий, бо міг. Це дало мені 15 кольорів. Я хотів 16 кольорів, оскільки це потужність 2, і я хоч міг би полегшити розробникам щось. Врешті-решт я знайшов спосіб додати 16-й колір, для цього мені довелося пересувати інші. Потім ... ще раз перевірити інструментом моделювання кольорової сліпоти, виправити та повторити.

Ось різні випадки кольорової сліпоти:

Звичайний: 16 кольорів

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

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

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

Протаномалія: Протаномалія

Дейтераномалія: Дейтераномалія

Тританомалія: Тританомалія

Ахроматопсія: Ахроматопсія

Ахроматомалія: Ахроматомалія


Після деякого часу граючи з інструментом моделювання кольорової сліпоти, я мушу сказати, контраст є першорядним.

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

На цій ноті ... якщо ви вибрали комбінацію двох кольорів замість одного, щоб представити фракцію, це пройде довгий шлях.

Ці кольори були підібрані дуже емпіричним методом. Я помічаю, що дуже важливим моментом є переконатися, що вони всі мають різну яскравість. Я також зауважую, що більшість «кольорів» з’являються двічі (є дві зелені, дві фіолетові, дві коричневі тощо). Насправді четвертий колір (оливковий) - це останній, який я додав, і я вирішую, що це був би жовтий колір, тому що жодного кольору не було. Я вважаю, що це може бути основою для більш системного способу вибору кольорів.

У ретроспективі я, мабуть, повинен зробити другий жовтоподібний колір (оливковий) темнішим, і використовувати цю пляму яскравості для рожевого (див. 7 колір). ¿Чому? Бо це дало б вам більше відтінків, з якими можна пограти. Ерн ... це досить добре, і отримати всі фотографії - це клопот.

Додаток : Щось я не враховував - це те, як ЖК-екран викривляє кольори, якщо виходите з бажаного діапазону кутів.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.