Como encontro um conjunto ideal de cores para 10 jogadores?


293

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.


2
Vermelho, Azul, Verde, Roxo, Marrom, Laranja, Amarelo, Preto, Branco e Cinza.
Luis Estrada

12
qual a cor do fundo? ou que outras cores você tem na cena (por exemplo, para objetos neutros)?
Ali1S232

Isso pode ser um pouco mais ambicioso do que o que você planejou, mas que tal dar aos jogadores todo o tipo de opções para personalizar a aparência de seus personagens, para que cada um pareça único devido à grande quantidade de combinações possíveis?
Philipp

Em retrospectiva, acho que teria perguntado exatamente o que você está colorindo? Zonas em um mapa? Marcadores? Modelos de jogadores em um jogo em 3D?
Tim Holt

4
Eu meio que não esperava que essa pergunta tivesse boas respostas, uau.
Jhocking 31/12/12

Respostas:


337

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

tente 1

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

tente 2

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

tente 3

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 :

curva de correção de matiz

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

tente 4

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

tente 5 tente 6

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


11
Ótima resposta! Mudar os valores de saturação também pode ajudar, você não tem marrom aqui. Dependendo dos estilos do mapa, branco ou preto também podem ser cores possíveis.
bobobobo

21
Isso não leva em consideração o daltonismo, presumo? Uma resposta muito interessante, no entanto.
AlexanderBrevig

7
@AlexanderBrevig não, infelizmente não; também não considera o fato de que não se acredita que os seres humanos percebam os contrastes de matiz uniformemente. Estou pensando no último e posso atualizar minha resposta mais tarde. Receio que a questão do daltonismo seja muito mais complexa.
3051212

25
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

13
Por favor, veja o gráfico de percepção de cores humanas . Você deve plotar pontos equidistantes neste espaço 2D. traçar equidistante pela tonalidade é deixar de acomodar a percepção humana, mesmo que um pouco!
ErikE

172

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:

insira a descrição da imagem aqui

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.


3
Se eu pudesse selecionar 2 respostas, também selecionaria a sua. Obrigado
David Thielen

11
Ser um tetracromat ajuda a distinguir cores no mundo real, porque objetos normais têm espectros complexos. No entanto, ser um tetracromat não ajudaria em jogos de computador, porque os monitores têm apenas três cores (vermelho verde azul). Para beneficiar as pessoas com a mutação no artigo, seria necessário um novo monitor com quatro cores (vermelho verde azul laranja). O espaço limitado de cores RGB também significa que todas as fotos / vídeos devem parecer bastante irrealistas para um tetracromat.
31412 Joe

3
Pessoas com daltonismo parcial é outro problema - na captura de tela do W3 acima, o rosa e o cinza me parecem praticamente iguais até eu ler qual é qual e olhar de novo com muita atenção.
F055

20
grandes programadores roubam! A primeira coisa que eu teria ido também a qualquer jogo multiplayer moderno da Blizzard.
Jeff Atwood

4
Na verdade, eu sou cego parcialmente cor para as seguintes cores são mais difíceis de distinguir: Laranja vs Verde, Rosa vs Gray, verde escuro vs Brown
Archimedes Trajano

75

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


2
Isso faz muito sentido, de fato; enquanto escrevia minha resposta, pesquisei mais informações sobre a percepção relativa do contraste em humanos, mas não encontrei números. Você tem algum link, talvez?
Sam Hocevar

Aqui está um programa interessante sobre a relação entre idioma e cor: dailymotion.com/video/…
Matt M.

Você conhece um mapa não linear do valor da tonalidade que leva isso em consideração?
Anony-Mousse

1
Olá @MattMontag, apenas um pensamento: em vez de se referir à "resposta mais votada", que pode mudar (embora, novamente, tenha uma grande vantagem ...), vale a pena vincular diretamente à resposta em questão. Boa resposta, +1
Platinum Azure

3
@ Anony-Mousse: O espaço de cores do laboratório é projetado para aproximar a visão humana. Aspira à uniformidade perceptiva. Pegue as cores equidistantes do laboratório e mapeie-as no HSV e você verá a correspondência. Não seria apenas não-linear em relação à tonalidade.
Janus Troelsen

29

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.

insira a descrição da imagem aqui

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

segunda-feira japonesa

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

insira a descrição da imagem aqui

mas estes são pouco visíveis no jogo

insira a descrição da imagem aqui

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: bandeira da suíça
  • Somolia: bandeira da Somolia
  • Coreia do Sul: bandeira da 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)

insira a descrição da imagem aqui

 


Separar isso em duas respostas quebrou algumas das imagens.
Marcks Thomas

Brasões parecem legais, mas imho na jogabilidade real, são muito complexas para se entender. Pelo menos sem uma cor de fundo principal.
David C. Bishop

3
Você sabe, é "Somália", não "Somolia".
Panda Pyjama

21

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

insira a descrição da imagem aqui

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.


2
realmente considerando pessoas daltônicas, isso é muito perto de cortinas de cor amigável se você eliminar algumas das cores
Archimedes Trajano

20

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


4
+1 por mencionar padrões e daltonismo! Os desenvolvedores de jogos insuficientes pensam sobre esse problema.
Trevor Powell

7

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


Falando de característica, eu sugiro que você tentar olhar para o jogo Bomberman 10 jogadores para a Sega Saturn em 1993 i.imgur.com/mCVmk.png
Archimedes Trajano

Solte 'I', pois geralmente é difícil distinguir entre B <- I e I -> V. Você ainda tem 12 IDs de cores.
Ocode 31/12

Provavelmente é verdade que 'eu' é difícil de distinguir. No entanto, eu suspeito que alguém seria capaz de encontrar um 'B' mais claro e um 'I' mais escuro, para fazê-lo funcionar com 7 (14 com listras). O ponto principal sobre a adição de listras ou outro recurso distintivo, permanece.
Christopher


3

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


+1 Isso é verdade. Existe um viés cultural. Mas também existe a ciência da cor, e as harmônicas das ondas não podem ser negadas a menos que o equipamento sensorial esteja com defeito (por exemplo, daltonismo).
Engineer

A partir do papel, há um link para um aplicativo puro on-line: kuler.adobe.com
bobobobo

3

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.


3

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.


2
Eu tentei. Achei que era mais fácil selecionar as cores espaçadas uma da outra dessa maneira . Funciona bem.
MichaelHouse

1

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!):

processo para recriar esta imagem descrita acima

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


0

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

0

Quero apresentar um esquema de cores alternativo:

16 cores

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: 16 cores

Protanopia: Protanopia

Deuteranopia: Deuteranopia

Tritanopia: Tritanopia

Protanomaly: Protanomaly

Deuteranomaly: Deuteranomaly

Tritanomaly: Tritanomaly

Achromatopsia: Achromatopsia

Achromatomaly: 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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.