Como encontro um conjunto ideal de cores para 10 jogadores?

Quero dar a cada um dos 10 jogadores uma cor de identificação única. Existe um conjunto ideal de cores para isso? Como crio um?

Cada conjunto que criei contém cores muito semelhantes.

Atualização: Me perguntaram abaixo o que é isso (pergunta justa). Agora posso lhe dizer - Windwardopolis e as cores funcionaram muito bem.

Você pode gerar valores de matiz equidistantes no espaço HSV:

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

No entanto, é possível que você nem sempre tenha 10 jogadores. Nesse caso, a paleta não seria muito eficiente, a menos que você gere uma paleta diferente para outro número de jogadores. Em vez disso, alguns autores recomendam gerar uma paleta usando a proporção áurea, aproveitando uma propriedade resultante do teorema da equidistribuição :

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

Dessa forma, mesmo que você pare com 3, 4 ou 7 jogadores, obtém uma propagação de matiz muito boa.

Muitos números irracionais funcionarão, mas a proporção áurea funcionará melhor (foi comprovado ).

Finalmente, você pode usar duas seqüências geradoras diferentes para ajustar Sou Vtambém. Por exemplo ( edit : adicionei a sqrtchamada para uma melhor equidistribuição ):

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

Atualização : os resultados acima podem ser aprimorados usando uma curva de correção para H(semelhante à curva gama para componentes RGB) que leva em consideração o sistema visual humano. Esta é a curva de correção de matiz que calculei usando a métrica CIEDE2000 :

Os resultados para valores de matiz equidistantes são os seguintes:

E para as seqüências de geração da proporção áurea (com e sem ajustes V):

Publicarei uma aproximação da fórmula da curva para uso em programas assim que encontrar uma razoavelmente boa.

As 8 cores do StarCraft são :

Vermelho, Azul, Cerceta, Roxo, Laranja, Marrom (verde nos mapas do deserto), Branco (verde nos mapas de gelo), Amarelo

Obv. A Blizzard é um gênio da interface do usuário e estudou o problema.

Eles deixaram Green como um substituto para Brown em mapas do deserto, então tecnicamente existem 9 listados lá.

As 12 cores do Warcraft 3 são:

Vermelho, Azul, Verde-azulado, Roxo, Amarelo, Laranja, Verde, Rosa, Cinza, Azul claro, Verde escuro, Marrom

Veja como isso fica:

Como você pode ver, eles são bastante distintos e facilmente distinguíveis. Verde escuro é realmente fácil de distinguir de verde-azulado, possivelmente porque o olho humano pode distinguir com mais facilidade tons de verde. Se você tem certeza de que seus jogadores serão tetracromatos femininos, você provavelmente poderá escolher qualquer cor.

Algumas pessoas aqui recomendam dividir o espaço de cores HSV em 10 posições equidistantes na tonalidade. Na minha opinião, essa não é realmente uma boa solução. O olho humano não percebe diferenças de cor igualmente no espectro HSV. Por exemplo, o que chamaríamos de laranja ocupa uma pequena fatia da banda, enquanto um bom pedaço de 25% pode se qualificar como verde. Então, começa com uma premissa ruim. Veja a primeira linha de cores nesta resposta . Os dois verdes são quase indistinguíveis.

Lembre-se de que seus usuários precisarão se comunicar e consultar as cores. À luz disso, o tema Starcraft / Warcraft é um ótimo caminho a seguir. Escolher com base em uma lista de cores simples do Crayola em inglês não é uma má idéia, porque você terá cores conhecidas. Em seguida, basta ajustar essas cores para serem ousadas, suaves, o que corresponder à sua estética, desde que ainda sejam reconhecíveis como vermelho, laranja, amarelo, verde, azul, roxo, marrom, cinza, branco, preto.

Edit: a conexão entre linguagem e percepção de cores é tão interessante, eu só queria compartilhar este link incrível:

A crayola-ficção do mundo: como demos nomes às cores, e isso mexeu com nosso cérebro no zelo empírico

Eu pensei que precisava quebrar essa abordagem de "símbolos" em uma resposta separada.

No passado, presumo que as pessoas precisavam de bandeiras e outras coisas para identificar facilmente um exército distante, assim você sabe se deve atacar ou defender (no caso de inimigos) ou se sentir aliviado (no caso de aliados).

Então, aliás, é exatamente isso que você está tentando fazer. Identifique facilmente algo à distância.

Você pode fazer isso apenas com cores, mas possivelmente a melhor maneira de fazer isso é com cores e símbolos . O uso de uma combinação de cores e símbolos ajudará as pessoas daltônicas a identificarem as coisas, como muitas pessoas mencionadas acima.

Se as unidades forem grandes o suficiente, você também pode usar brasões de duas a quatro cores.

O padrão é facilmente reconhecível, não apenas uma cor. Uma boa textura pode marcar o brasão bastante grande no peito ou no braço de cada unidade.

Na imagem acima, os capacetes para diferentes unidades têm geometria diferente , bem como as insígnias de escudo.

Você também pode achar interessante a idéia do japonês Mon , que é um "logotipo" muito simples

Agora você está basicamente marcando suas unidades com "marcas" modernas. StarCraft II fez isso um pouco com "decalques",

mas estes são pouco visíveis no jogo

e não são usados ​​para identificar unidades tanto quanto as cores.

Eu também procurava inspiração em bandeiras, especialmente aquelas que não usam um padrão de marca de três faixas (elas se tornam um pouco confusas). Considerar:

• Suíça:
• Somolia:
• Coreia do Sul:

Todos eles têm algumas bandeiras muito simples, mas distintas.

Verifique também os símbolos que o governo americano usa para identificar a equipe de defesa. São imagens monocromáticas (podem ser feitas completamente em preto e branco), portanto, essa pode ser uma ótima solução que não exclui pessoas daltônicas (basicamente use símbolos para identificar equipes, em vez de cores)

Por que reinventar a roda? Existe até um padrão para um conjunto de dezesseis cores, das quais você pode escolher dez. Este é o conjunto ANSI http://en.wikipedia.org/wiki/ANSI_escape_code#Colors

As cores ANSI são igualmente distribuídas no cubo RGB, que é, eu acho, mais adequado para esse problema do que o espaço HSV.

Ao tirar os extremos do cubo RGB, você obtém cores familiares, como vermelho, azul, ciano, etc. Após os oito pontos de canto, você obtém todos os pontos intermediários, nas bordas.

Fazer 10 cores que podem ser distinguidas será realmente difícil. Esse é um problema bastante comum na criação de gráficos ou tabelas para muitos valores, razão pela qual eles costumam usar cores e formas ou combinações de cores e padrões de hash.

Se você precisar exibir marcadores, poderá usar 4 cores básicas (vermelho, azul, laranja, preto, por exemplo) e quatro formas básicas (quadrado, círculo, triângulo, diamante) e obter 16 muito fácil de distinguir marcadores.

Se você estiver colorindo áreas, use a mesma idéia, mas combine cores com padrões de hachura em linhas pretas ou brancas em vez de formas.

Outra coisa a considerar é não usar a cor como a única maneira de dizer o lado. Passar o mouse sobre uma área pode destacá-la e fornecer uma dica de ferramenta com o nome do jogador explicitamente declarado. Ou talvez uma lista dos 10 jogadores possa ser colocada sobre o mouse e, à medida que se passa o mouse sobre o nome de um jogador, todas as áreas no mapa para esse jogador são mostradas.

Além disso, ao escolher as cores, lembre-se do daltonismo. Verde e vermelho, por exemplo, podem não ser distinguíveis. Dê uma olhada em http://jfly.iam.u-tokyo.ac.jp/color/#select para obter um conjunto de cores sugeridas que não serão um problema para pessoas daltônicas. Um recurso adicional é http://www.usability.gov/articles/newsletter/pubs/022010new.html#ColorsthatWorktheBest

Mesmo se você conseguir 10 cores únicas que são facilmente distinguíveis por uma pessoa, outra pessoa ainda poderá achar esse conjunto mais difícil de distinguir.

Considere limitar-se a um conjunto menor de cores e adicionar um recurso distinto , como uma faixa preta . Para o conjunto de cores, provavelmente é melhor não se afastar muito do que a maioria das pessoas consegue distinguir facilmente: ROYGBIV . Uma simples tarja / sem tarja no ROYGBIV oferece 14 peças de identificação do jogo.

Você também não precisa se limitar a uma faixa preta. Considere a seguinte solução para conectar 25 pares (que podem ser facilmente listras em vez de pares): http://en.wikipedia.org/wiki/25-pair_color_code

Só queria incluir uma referência à paleta do Tableau-10, desenvolvida para obter alta distinção e descrita neste artigo:

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

"A paleta do Tableau-10 fornece a melhor saliência de cores e a mínima sobreposição de nomes".

Brent Berlin e Paul Kay mostraram que o espaço de cores pode ser dividido em apenas algumas cores básicas, mas depende da sua cultura, pois atribuir um nome a uma cor torna-a mais distinguível.

Em inglês, existem 11 cores básicas: branco, preto, vermelho, verde, amarelo, azul, marrom, roxo, rosa, laranja e cinza.

Não gosto da ideia de escolher tons em torno de uma roda pelas mesmas razões que Matt Montag afirmou

Faça mais do que apenas cores - tenha representações visuais que aumentam o conhecimento, o estilo artístico e a representação da cor.

Por exemplo, Legend of the Five Rings usa uma maneira incrível de diferenciar entre "conjunto de cores".

Um dos exemplos mais bonitos para tirar uma lição. Tome nota das centenas de maneiras pelas quais eles diferenciam os Clãs. Não são apenas cores primárias, mas também cores secundárias e até terciárias. As cores estão inclusas no estilo de cabelo, tipo de roupa, tipo de personagem, símbolo anexado, bandeiras, faixas, mini-bandeiras nas costas, personalidades.

A maior coisa que eu tiraria disso é a combinação de várias cores. Não é simples: azul, vermelho, roxo, marrom, amarelo, verde, verde-azulado.

É uma combinação de duas cores, sendo as duas muito pronunciadas. Isso pode permitir uma quantidade significativa de número adicional de jogadores.

Cada clã teria uma cor primária e um conjunto de cores secundárias.

"O caranguejo foi identificado principalmente com cores azul-cinza, além de preto, vermelho e marrom".

É bonito, porque não importa a aparência da pessoa (grande, frágil, samurai, mago, camponês), você sempre pode dizer de que clã é. Não era apenas "Red" para Scorpion, era um Blood Blood Red e BLACK escuro. Enquanto Phoenix tinha cores de raios de sol: vermelho, laranja, amarelo.

Você nunca confundiria um Escorpião com uma Fênix, mesmo que suas cores fossem semelhantes e ambos usassem muito vermelho.

Experimente este misturador de cores: w3schools.com HTML Color Mixer .

Aqui está o que eu faria: selecione uma cor para a primeira opção. Em seguida, selecione uma para a 2ª opção, de modo que a 2ª cor esteja na posição exatamente oposta em relação à primeira. Portanto, a cor na posição: linha 1, célula 1 teria o oposto: última linha, última célula.

Dessa forma, você acaba com duas cores muito diferentes nas extremidades do mix de cada vez. Repita isso 5 vezes, sempre selecionando cores distantes da última seleção.

Esta pergunta tem muitas respostas, mas eu queria falar mais sobre acessibilidade.

Se eu estivesse no seu cenário (precisando escolher cores para uma quantidade de coisas em um jogo que precisam ser percebidas como distintas por todos os jogadores envolvidos), minha principal preocupação seria acomodar não apenas jogadores que são daltônicos, mas também jogadores que possuem baixa visão.

A única solução para esse problema, até onde sei, é VALUE CONTRAST . Algumas pessoas só podem ver em preto e branco (fonte: um amigo das histórias da faculdade de arte sobre ter aulas de teoria das cores e não conseguir perceber nenhuma cor devido a uma falha na cirurgia ocular a laser). Algumas pessoas têm baixa visão ou são parcialmente / legalmente cegas. Você precisa de diferentes tons de cinza como ponto de partida para que as cores que você FAZER escolher são visíveis e distinta para TODOS .

Para conseguir tudo isso e ter cores com boa aparência, considere esta imagem, obtida por camadas de um gradiente de arco-íris horizontal no modo de mesclagem de cores em cima de um gradiente vertical de preto e branco (tente você mesmo, talvez com uma cor personalizada gradiente que não seja arco-íris!):

Do mais escuro ao mais claro: preto, azul, vermelho, magenta, verde, ciano, amarelo, branco.

Você consegue ver o leve ziguezague da "cor pura"? Esse é o valor natural das cores ilustradas. Mesmo ao usar cores puras, o azul é mais escuro e o amarelo é mais claro. Utilize essas informações para escolher cores que atendam aos requisitos de valor para jogadores que possuem daltonismo e / ou baixa visão E são esteticamente agradáveis ​​para pessoas que conseguem perceber toda a majestade de seus tons selecionados.

Espero que isto ajude! : -)

PS: Quero ter certeza de que você também viu esse comentário!

A melhor resposta para o daltonismo é simples, não confie na cor. Idealmente, todo jogador deve ter uma silhueta única para qualquer ator que ele controle. E eu quero dizer silhueta, não algum tipo de símbolo; muitos dos tipos de jogos do Match 3 entendem isso totalmente errado e, mesmo para alguém sem daltonismo, eles são difíceis de jogar e causam muito cansaço visual. - Sean Middleditch 30/12/12 às 5:08

Uma maneira de garantir o conjunto ideal em termos de cores distinguíveis para um número variável de jogadores (sem levar em consideração o daltonismo) seria escolher o modelo de cores HSL (Matiz, Saturação e Luminosidade).

Você escolhe uma leveza e uma saturação constantes, dependendo da sua escolha. Então você muda a tonalidade da cor 360 / playerCount, como no pseudo-código a seguir:

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

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

Quero apresentar um esquema de cores alternativo:

Estas são as cores RGB (mesma ordem) com nomes sugeridos:

#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

Nota: Eu não usei preto e branco puro, pensando que talvez eles sejam usados ​​como plano de fundo ou contornos.

Metodologia: selecionou 12 cores na face saturada do cubo de cores (pensando que eu ficaria feliz com 12), observando sua separação e depois - usando uma ferramenta para simular daltonismo - começou a se mexer. Depois, adicionei um quase branco, um quase preto e esgueirei um cinza, porque eu podia. Isso me deu 15 cores. Eu queria 16 cores porque é uma potência de 2 e, embora isso pudesse facilitar as coisas para os desenvolvedores. Eventualmente, encontrei uma maneira de adicionar uma 16ª cor, tive que mudar as outras para isso. Então ... verifique novamente com a ferramenta de simulação de daltonismo, corrija e repita.

Aqui estão os diferentes casos de daltonismo:

Normal:

Protanopia:

Deuteranopia:

Tritanopia:

Protanomaly:

Deuteranomaly:

Tritanomaly:

Achromatopsia:

Achromatomaly:

Depois de brincar com a ferramenta de simulação de daltonismo por um tempo, devo dizer, o contraste é fundamental.

Considere, por exemplo, as cores 5 (verde claro), 7 (cinza) e 9 (roxo claro). Eles parecem semelhantes em alguns casos, especialmente em tamanho pequeno e separados por outra cor. No entanto, coloque-os lado a lado e você poderá diferenciá-los. Aumente a área coberta pela cor e você poderá diferenciá-los com muito mais facilidade. Então ... projetar para daltonismo não é apenas escolher cores.

Na mesma nota ... se você escolher uma combinação de duas cores em vez de uma para representar uma facção, isso será um longo caminho.

Essas cores foram escolhidas por um método muito empírico. Percebo que um ponto muito importante é garantir que todos tenham brilho diferente. Percebo também que a maioria das "cores" aparece duas vezes (há dois verdes, dois roxos, dois marrons, etc ...). De fato, a quarta cor (azeitona) é a última que adicionei, e decido que seria uma cor amarela, porque não havia nada como amarelo. Suponho que possa ser a base para uma maneira mais sistêmica de escolher cores.

Em retrospectiva, provavelmente devo tornar a segunda cor amarela (azeitona) mais escura e usar esse ponto de brilho para um rosa (consulte a 7ª cor). Por quê? Porque daria a você mais tons para brincar. Ern ... isso é bom o suficiente, e obter todas as fotos é um aborrecimento.

Adendo : Algo que não considerei é como a tela LCD distorce as cores se você olhar fora da faixa de ângulo preferida.