¿Cómo puedo encontrar un conjunto óptimo de colores para 10 jugadores?

293

Quiero dar a cada uno de los 10 jugadores un color de identificación único. ¿Existe un conjunto óptimo de colores para esto? ¿Cómo creo uno?

Cada conjunto que he creado contiene colores que son muy similares.

Actualización: Me preguntaron a continuación para qué sirve (pregunta justa). Ahora puedo decirte: Windwardopolis y los colores funcionaron muy bien.

David Thielen
fuente
2
Rojo, azul, verde, morado, marrón, naranja, amarillo, negro, blanco y gris.
Luis Estrada
12
¿De qué color es el fondo? o qué otros colores tienes en la escena (por ejemplo, para objetos neutros)?
Ali1S232
Esto podría ser un poco más ambicioso de lo que planeaste, pero ¿qué tal si le das a los jugadores todo tipo de opciones para personalizar el aspecto de sus personajes, para que cada uno se vea único debido a la gran cantidad de combinaciones posibles?
Philipp
A simple vista, supongo que habría preguntado exactamente qué es lo que estás coloreando. Zonas en un mapa? Marcadores? ¿Modelos de jugadores en un juego en 3D?
Tim Holt
44
No esperaba que esta pregunta tuviera buenas respuestas, wow.
jhocking

Respuestas:

337

Puede generar valores de tono equidistantes en el espacio HSV:

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

prueba 1

Sin embargo, es posible que no siempre tengas 10 jugadores. En ese caso, la paleta no sería muy eficiente a menos que volviera a generar una paleta diferente para otro número de jugadores. En cambio, algunos autores recomiendan generar una paleta usando la proporción áurea, aprovechando una propiedad resultante del teorema de equidistribución :

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

prueba 2

De esa manera, incluso si te detienes en 3 o 4 o 7 jugadores, obtienes una muy buena distribución del tono.

Muchos números irracionales funcionarán, pero la proporción áurea funcionará mejor (se ha demostrado ).

Finalmente, puede usar dos secuencias generadoras diferentes para ajustar So Vtambién. Por ejemplo ( editar : agregué la sqrtllamada para una mejor equidistribución ):

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

prueba 3

Actualización : los resultados anteriores se pueden mejorar mediante el uso de una curva de corrección para H(similar a la curva gamma para componentes RGB) que tiene en cuenta el sistema visual humano. Esta es la curva de corrección de tono que calculé usando la métrica CIEDE2000 :

curva de corrección de tono

Los resultados para valores de tono equidistantes son los siguientes:

prueba 4

Y para las secuencias de generación de la proporción áurea (con y sin ajustes V):

prueba 5 prueba 6

Publicaré una aproximación de la fórmula de la curva para su uso en programas tan pronto como encuentre una razonablemente buena.

sam hocevar
fuente
11
¡Gran respuesta! Cambiar los valores de saturación también puede ayudar, no tienes marrón aquí. Dependiendo de los estilos del mapa, el blanco o el negro también pueden ser colores posibles.
bobobobo
21
Esto no tiene en cuenta el daltonismo, supongo. Una respuesta muy interesante, no obstante.
AlexanderBrevig
77
@AlexanderBrevig no, desafortunadamente no; Tampoco considera el hecho de que no se cree que los humanos perciban los contrastes de tono de manera uniforme. Estoy pensando en esto último y puedo actualizar mi respuesta más tarde. El tema del daltonismo es un asunto mucho más complejo, me temo.
sam hocevar
25
La mejor respuesta para el daltonismo es que no dependa del color. Idealmente, cada jugador debe tener una silueta única para cualquier actor que controle. Y quiero decir silueta, no algún tipo de símbolo; demasiados juegos de Match 3 se equivocan totalmente, e incluso para alguien sin daltonismo, son difíciles de jugar y causan demasiada fatiga visual.
Sean Middleditch
13
Por favor vea el gráfico de percepción del color humano . Debe trazar puntos equidistantes en este espacio 2D. ¡trazar equidistante por tonalidad es dejar de acomodar la percepción humana incluso en lo más mínimo!
ErikE
172

Los 8 colores de StarCraft son :

Rojo, azul, verde azulado, púrpura, naranja, marrón (verde en los mapas del desierto), blanco (verde en los mapas de hielo), amarillo

Obv. Blizzard son genios de la IU y han estudiado el problema.

Dejaron a Green como un intercambio para Brown en los mapas del desierto, por lo que técnicamente hay 9 listados allí.

Los 12 colores de Warcraft 3 son:

Rojo, azul, verde azulado, púrpura, amarillo, naranja, verde, rosa, gris, azul claro, verde oscuro, marrón

Así es como se ve esto:

ingrese la descripción de la imagen aquí

Como puede ver, son bastante distintos y fácilmente distinguibles. El verde oscuro es realmente fácil de distinguir del verde azulado, posiblemente porque el ojo humano puede distinguir más fácilmente los tonos de verde. Sin embargo, si estás seguro de que tus jugadores serán tetracromáticos femeninos , probablemente puedas elegir cualquier color.

bobobobo
fuente
3
Si pudiera seleccionar 2 respuestas, seleccionaría la suya también. Gracias
David Thielen
11
Ser un tetracromático ayuda a distinguir los colores en el mundo real, porque los objetos normales tienen espectros complejos. Sin embargo, ser un tetracromático no ayudaría a los juegos de computadora, porque los monitores solo tienen tres colores (rojo, verde, azul). Para beneficiar a las personas con la mutación en el artículo, se necesitaría un nuevo monitor con cuatro colores (rojo, verde, azul, naranja). El espacio de color RGB limitado también significa que todas las fotos / videos deben verse bastante poco realistas para un tetracromático.
Joe
3
Las personas con daltonismo parcial son otro problema: en la captura de pantalla W3 anterior, el rosa y el gris me parecen prácticamente iguales hasta que leo cuál es cuál y vuelvo a mirar de cerca.
f055
20
¡los grandes programadores roban! Lo primero a lo que habría ido es a cualquier juego moderno multijugador de Blizzard, también.
Jeff Atwood
44
En realidad, soy parcialmente daltónico, por lo que los siguientes colores son más difíciles de distinguir: naranja vs verde, rosa vs gris, verde oscuro vs marrón
Archimedes Trajano
75

Algunas personas aquí recomiendan dividir el espacio de color HSV en 10 posiciones equidistantes en el tono. En mi opinión, esta no es una buena solución. El ojo humano no percibe diferencias de color por igual en todo el espectro HSV. Por ejemplo, lo que llamaríamos naranja ocupa una pequeña porción de la banda, mientras que un buen 25% podría calificarse como verde. Entonces comienza con una mala premisa. Mire la primera fila de colores en esta respuesta . Los dos verdes son casi indistinguibles.

Recuerde que sus usuarios deberán comunicarse y referirse a los colores. A la luz de esto, el tema de Starcraft / Warcraft es una gran pista a seguir. Elegir en base a una lista de colores simples de Crayola en inglés no es una mala idea en absoluto, porque terminarás con colores con nombres familiares. Luego simplemente modifique esos colores para que sean audaces, apagados, lo que coincida con su estética, siempre que sean reconocibles como rojo, naranja, amarillo, verde, azul, púrpura, marrón, gris, blanco, negro.

Editar: la conexión entre el lenguaje y la percepción del color es tan interesante, solo quería compartir este increíble enlace:

La crayola ficación del mundo: cómo le dimos nombres a los colores, y se metió con nuestros cerebros en Empirical Zeal

Matt M.
fuente
2
Eso tiene mucho sentido; Mientras escribía mi respuesta, he investigado más información sobre la percepción de contraste relativo de los humanos, pero no he encontrado ninguna cifra. ¿Tienes algún enlace tal vez?
sam hocevar
Aquí hay un programa interesante sobre la relación entre el lenguaje y el color: dailymotion.com/video/…
Matt M.
¿Conoces un mapa no lineal del valor de tono que tenga esto en cuenta?
Anony-Mousse
1
Hola @MattMontag, solo un pensamiento: en lugar de referirse a la "respuesta más votada", que podría cambiar (aunque, de nuevo, tiene una amplia ventaja ...), vale la pena vincular directamente a la respuesta en cuestión. Buena respuesta, +1
Platinum Azure
3
@ Anony-Mousse: el espacio de color de laboratorio está diseñado para aproximarse a la visión humana. Aspira a la uniformidad perceptiva. Tome colores de laboratorio equidistantes y mapeelos en HSV y verá la correspondencia. No solo sería no lineal con respecto al tono.
Janus Troelsen
29

Pensé que necesitaba dividir este enfoque de "símbolos" en una respuesta separada.

En el pasado, supongo que las personas necesitaban banderas y otras cosas para identificar fácilmente a un ejército a lo lejos, para que sepa si atacar o defender (en caso de enemigos), o sentirse aliviado (en el caso de los aliados).

Entonces, incidentalmente, eso es exactamente lo que estás tratando de hacer. Identifica fácilmente algo en la distancia.

Puede hacerlo con solo color, pero posiblemente una mejor manera de hacerlo es con color y símbolos . El uso de una combinación de colores y símbolos ayudará a las personas daltónicas a identificar cosas, como muchas personas mencionaron anteriormente.

Si las unidades son lo suficientemente grandes, también puedes usar 2-4 escudos de colores.

ingrese la descripción de la imagen aquí

El patrón es fácilmente reconocible, no solo un color. Una buena textura podría marcar el escudo de armas bastante grande en el pecho o la parte superior del brazo de cada unidad.

En la imagen de arriba, los cascos para diferentes unidades tienen geometría diferente , así como la insignia del escudo.

También puede encontrar interesante la idea de Mon japonés , que son "logotipos" de aspecto muy simple.

mon japonés

Ahora básicamente está marcando sus unidades con "marcas" modernas. StarCraft II hizo esto un poco con "calcomanías",

ingrese la descripción de la imagen aquí

pero estos son apenas visibles en el juego

ingrese la descripción de la imagen aquí

y no se usan para identificar unidades tanto como los colores.

También buscaría inspiración en las banderas, especialmente las que no usan un patrón de marca de 3 rayas (se vuelven un poco confusas). Considerar:

  • Suiza: bandera de suiza
  • Somolia bandera de somolia
  • Corea del Sur: bandera de corea del sur

Todos estos tienen algunas banderas muy simples, pero distintivas.

También revise los símbolos que usa el gobierno estadounidense para identificar al personal de defensa. Estas son imágenes monocromas (se pueden hacer completamente en blanco y negro), por lo que en realidad podría ser una gran solución que no excluirá a las personas daltónicas (básicamente use símbolos para identificar equipos, en lugar de colores)

ingrese la descripción de la imagen aquí

 

bobobobo
fuente
Separar esto en dos respuestas ha roto algunas de las imágenes.
Marca Thomas el
Los escudos de armas se ven geniales pero, en mi opinión, en el juego real son demasiado complejos para distinguirlos. Al menos sin un color de fondo primario.
David C. Bishop
3
Ya sabes, es "Somalia", no "Somolia".
Panda Pyjama
21

¿Por qué reinventar la rueda? Incluso hay un estándar para un conjunto de dieciséis colores, de los cuales puede elegir diez. Este es el conjunto ANSI http://en.wikipedia.org/wiki/ANSI_escape_code#Colors

ingrese la descripción de la imagen aquí

El color ANSI se distribuye por igual en el cubo RGB, que creo que es más adecuado para este problema que el espacio HSV.

Al tomar los extremos del cubo RGB, obtienes colores familiares, como rojo, azul, cian, etc. Después de los ocho puntos de esquina, obtienes todos los puntos intermedios, en los bordes.

RobAu
fuente
2
en realidad teniendo en cuenta las personas daltónicas, esto es bastante cerca de las persianas de color agradable si se eliminan algunos de los colores
Arquímedes Trajano
20

Hacer 10 colores que se puedan distinguir será realmente difícil. Este es un problema bastante común en la creación de gráficos o tablas para muchos valores, por lo que a menudo usan color y forma o combinaciones de colores y patrones hash.

Si necesita mostrar marcadores, puede usar 4 colores básicos (rojo, azul, naranja, negro, por ejemplo) y cuatro formas básicas (cuadrado, círculo, triángulo, diamante) y obtener 16 marcadores muy fáciles de distinguir.

Si está coloreando áreas, use la misma idea pero combine colores con patrones de sombreado en líneas negras o blancas en lugar de formas.

Otra cosa a considerar es no usar el color como la única forma de distinguir el lado. Al pasar el mouse sobre un área podría resaltarlo y dar una sugerencia de herramienta con el nombre del jugador explícitamente indicado. O tal vez se pueda pasar el mouse por una lista de los 10 jugadores, y cuando uno se desplaza sobre el nombre de un jugador, se muestran todas las áreas en el mapa para ese jugador.

Además, al elegir colores, tenga en cuenta el daltonismo. El verde y el rojo, por ejemplo, pueden no ser distinguibles. Eche un vistazo a http://jfly.iam.u-tokyo.ac.jp/color/#select para ver un conjunto de colores sugeridos que no serán un problema para las personas daltónicas. Un recurso adicional es http://www.usability.gov/articles/newsletter/pubs/022010new.html#ColorsthatWorktheBest

Tim Holt
fuente
44
¡+1 por mencionar patrones y daltonismo! No hay suficientes desarrolladores de juegos que piensen en este problema.
Trevor Powell
7

Incluso si puede obtener 10 colores únicos que pueden distinguirse fácilmente por una persona, a otra persona aún le puede resultar más difícil distinguir este conjunto.

Considere limitarse a un conjunto de colores más pequeño y agregar una característica distinguible , como una franja negra . Para el conjunto de colores, probablemente sea mejor no alejarse demasiado de lo que la mayoría de la gente puede distinguir fácilmente: ROYGBIV . Una simple raya / sin raya en ROYGBIV te da 14 piezas de juego de identificación.

Tampoco tiene que limitarse a una franja negra. Considere la siguiente solución para conectar 25 pares (que podrían ser fácilmente rayas en lugar de pares): http://en.wikipedia.org/wiki/25-pair_color_code

Christopher
fuente
Hablando de una característica distintiva, sugiero que intentes mirar el juego de 10 jugadores de Bomberman para Sega Saturn en 1993 i.imgur.com/mCVmk.png
Archimedes Trajano
Suelte 'I', ya que a menudo es difícil distinguir entre B <- I y I -> V. Todavía tiene 12 identificadores de color.
ocodo
Probablemente cierto que "yo" es difícil de distinguir. Sin embargo, sospecho que uno podría encontrar una 'B' más clara y una 'I' más oscura para que funcione con 7 (14 con rayas). Sin embargo, el punto principal sobre agregar franjas u otra característica distintiva son los soportes.
Christopher
4

Solo quería agregar una referencia a la paleta Tableau-10 que se desarrolló para un alto carácter distintivo y que se describe en este documento:

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

"La paleta Tableau-10 proporciona la mejor notoriedad de color y una superposición mínima de nombres".

Elijah
fuente
3

Brent Berlin y Paul Kay demostraron que el espacio de color se puede dividir en unos pocos colores básicos, pero depende de su cultura, ya que dar un nombre a un color lo hace más distinguible.

En inglés, hay 11 colores básicos: blanco, negro, rojo, verde, amarillo, azul, marrón, morado, rosa, naranja y gris.

No me gusta la idea de elegir tonos alrededor de una rueda por las mismas razones que Matt Montag declaró


fuente
+1 Esto es cierto. Hay un sesgo cultural. Pero también existe la ciencia del color, y no se pueden negar los armónicos de onda a menos que el equipo sensorial sea defectuoso (por ejemplo, daltonismo).
Ingeniero
Del documento, hay un enlace a una aplicación en línea ordenada: kuler.adobe.com
bobobobo
3

Haga más que solo colores: tenga representaciones visuales que se sumen a la tradición, el estilo artístico y la representación del color.

Por ejemplo, Legend of the Five Rings utiliza una forma increíble de diferenciar entre "conjunto de colores".

Uno de los ejemplos más bellos para tomar una lección. Tome nota de las cientos de formas en que diferencian entre los clanes. No se trata solo de colores primarios, sino también de colores secundarios e incluso terciarios. Los colores incluso se incluyen en el peinado, el tipo de ropa, el tipo de personaje, un símbolo adjunto, banderas, pancartas, mini-banderas en la parte posterior, personalidades.

Lo más importante que tomaría de esto es la combinación de múltiples colores. No es simple: azul, rojo, morado, marrón, amarillo, verde, verde azulado.

Es una combinación de dos colores, siendo ambos muy pronunciados. Esto puede permitir una cantidad significativa de número adicional de jugadores.

Cada clan tendría un color primario y un conjunto de colores secundarios.

"El Cangrejo se identificó principalmente con los colores azul grisáceo, más negro, rojo y marrón".

Es hermoso, porque sin importar el aspecto de la persona (grande, frágil, samurai, mago, campesino) siempre se podía saber de qué clan eran. No era solo "Rojo" para Scorpion, era un rojo sangre oscuro y NEGRO. Mientras que Phoenix tenía colores de rayos de sol: rojo, naranja, amarillo.

Nunca confundirías un Escorpión con un Fénix, incluso si sus colores fueran similares y ambos usaran mucho rojo.


fuente
3

Pruebe este mezclador de colores: w3schools.com HTML Color Mixer .

Esto es lo que haría: seleccionar un color para la primera opción. Luego, seleccione uno para la segunda opción, de modo que el segundo color esté exactamente en la posición opuesta con respecto al primero. Entonces, el color en la posición: Fila 1, Celda 1 tendría lo contrario: Última fila, Última celda.

De esa manera, terminas con 2 colores muy diferentes en las extremidades de la mezcla cada vez. Repita esto 5 veces, siempre seleccionando colores que estén muy separados de la última selección.

Robar
fuente
2
Lo probé Descubrí que era más fácil seleccionar los colores separados entre sí de esta manera . Funciona bien.
MichaelHouse
1

Esta pregunta tiene muchas respuestas, pero quería tocar más sobre accesibilidad.

Si estuviera en su escenario (necesitando elegir colores para una cantidad de cosas en un juego que deben ser percibidas como distintas por todos los jugadores involucrados), mi principal preocupación sería acomodar no solo a los jugadores daltónicos, sino también a los jugadores que tienen visión baja.

La única solución a este problema, que yo sepa, es el CONTRASTE DE VALOR . Algunas personas solo pueden ver en blanco y negro (fuente: un amigo de las historias de la universidad de arte sobre tomar una clase de teoría del color sin poder percibir ningún color debido a una cirugía ocular con láser fallida). Algunas personas tienen baja visión o ceguera parcial / legal. Es necesario distintos tonos de gris como punto de partida para que los colores que HACES elegir son visibles y distinta para TODOS .

Para lograr todo esto y tener colores que se vean bien, considere esta imagen, obtenida colocando un degradado horizontal del arco iris en modo de fusión de color encima de un degradado vertical de negro a blanco (pruébelo usted mismo, tal vez con un color personalizado gradiente que no sea arcoiris!):

proceso para recrear esta imagen descrita anteriormente

Del más oscuro al más claro: negro, azul, rojo, magenta, verde, cian, amarillo, blanco.

¿Puedes ver el débil zigzag de "color puro"? ESO es el valor natural de los colores ilustrados. Incluso cuando se usan colores puros, el azul es más oscuro y el amarillo es más claro. Utilice esta información para elegir colores que se ajusten a los requisitos de valor para los jugadores con daltonismo y / o baja visión Y que sean estéticamente agradables para las personas que pueden percibir la majestuosidad de sus tonos seleccionados.

¡Espero que esto ayude! : -)



PD: ¡Quiero asegurarme de que también hayas visto este comentario!

La mejor respuesta para el daltonismo es que simplemente no confíe en el color. Idealmente, cada jugador debe tener una silueta única para cualquier actor que controle. Y quiero decir silueta, no algún tipo de símbolo; demasiados juegos de Match 3 se equivocan totalmente, e incluso para alguien sin daltonismo, son difíciles de jugar y causan demasiada fatiga visual. - Sean Middleditch 30 de diciembre de 12 a 5:08

jodediah holems
fuente
0

Una forma de garantizar el conjunto óptimo en términos de colores distinguibles para un número variable de jugadores (sin tener en cuenta el daltonismo) sería elegir entre el modelo de color HSL (Hue, Saturation and Lightness).

Elige una ligereza y saturación constantes, dependiendo de su elección. Luego, cambia el tono del color 360 / playerCount, como en el siguiente pseudocódigo:

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
fuente
0

Quiero presentar un esquema de color alternativo:

16 colores

Estos son los colores RGB (mismo orden) con nombres 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: No utilicé blanco y negro puro, pensando que tal vez se usan como fondo o contornos.

Metodología: seleccionó 12 colores en la cara saturada del cubo de colores (pensando que estaría contento con 12), analizó su separación y luego, usando una herramienta para simular el daltonismo, comenzó a modificar. Después, agregué un casi blanco, casi negro, y escabullí un gris, porque pude. Eso me dio 15 colores. Quería 16 colores porque es una potencia de 2, y pensé que podría facilitar las cosas para los desarrolladores. Eventualmente encontré una manera de agregar un color 16, tuve que mover a los demás para eso. Luego ... verifique nuevamente con la herramienta de simulación de daltonismo, corrija y repita.

Estos son los diferentes casos de daltonismo:

Normal: 16 colores

Protanopia Protanopia

Deuteranopia Deuteranopia

Tritanopia: Tritanopia

Protanomalía Protanomalía

Deuteranomalía: Deuteranomalia

Tritanomalía: Tritanomalía

Acromatopsia: Acromatopsia

Acromatomalía: Acromatomalía


Después de jugar con la herramienta de simulación de daltonismo por un tiempo, debo decir que el contraste es primordial.

Considere, por ejemplo, los colores quinto (verde claro), séptimo (gris) y noveno (púrpura claro). Se ven similares en algunos casos, en particular en tamaño pequeño y separados por otro color. Sin embargo, colóquelos uno al lado del otro y podrá distinguirlos. Aumente el área cubierta en el color y podrá distinguirlos mucho más fácilmente. Entonces ... diseñar para daltonismo no es solo elegir colores.

En esa nota ... si eliges una combinación de dos colores en lugar de uno para representar una facción, esto es muy útil.

Estos colores fueron seleccionados por un método muy empírico. Noté que un punto muy importante es asegurarse de que todos tengan un brillo diferente. También noto que la mayoría de los "colores" aparecen dos veces (hay dos verdes, dos púrpuras, dos marrones, etc.). De hecho, el cuarto color (oliva) es el último que agregué, y decido que sería un color amarillo, porque no había nada como el amarillo. Supongo que puede ser la base de una forma más sistemática de elegir colores.

En retrospectiva, probablemente debería oscurecer el segundo color amarillo (oliva) y usar ese punto de brillo para un rosa (ver séptimo color). ¿Por qué? Porque te daría más sombras para jugar. Ern ... esto es lo suficientemente bueno, y obtener todas las fotos es una molestia.

Anexo : Algo que no consideré es cómo los colores de la pantalla LCD alteran los colores si se mira fuera del rango de ángulo preferido.

Theraot
fuente