Generación de esquemas de color: teoría y algoritmos [cerrado]

28

Generaré cuadros y diagramas y estoy buscando alguna teoría sobre esquemas de color y ejemplos de algoritmos.

Preguntas de ejemplo:

  • ¿Cómo generar colores complementarios o análogos?
  • ¿Cómo generar colores pastel, fríos y cálidos?
  • ¿Cómo generar cualquier número de colores aleatorios pero distintos?
  • ¿Cómo traducir todo eso al triplete hexadecimal (color web)?

Mi implementación será en AS3 pero cualquier ejemplo en pseudocódigo es bienvenido.

daniel.sedlacek
fuente
Hice más investigaciones y experimentos solo para confirmar que lo que realmente importa es la percepción subjetiva de un color, no alguna propiedad física de la luz reflejada. El sistema de color Munsell es la clave. Sin embargo, es una pena que no pueda dividir la recompensa porque @Steven Jeuris me ayudó muchísimo con los enlaces a las bibliotecas Colorjizz y Mojocolor. Gracias a todos por vuestra ayuda.
daniel.sedlacek
Pregunta de Stack Overflow muy relevante con respuestas interesantes: " ¿Cómo generar automáticamente N colores" distintos "? "
Alexey Popkov
Otra pregunta relevante de gamedev, también con respuestas interesantes: ¿Hay un conjunto óptimo de colores para 10 jugadores?
Frepa

Respuestas:

15

Al buscar más información sobre esta pregunta (es algo con lo que también he luchado) encontré este blog . Stefano Mazzocchi explica su teoría sobre por qué los programadores apestan al elegir colores para el diseño de la interfaz de usuario y ofrece algunos consejos y enlaces útiles.

El primer consejo que ofrece es este hecho obvio que sienta las bases para elegir matices y saturaciones:

Dos piezas de información con el mismo contraste en su contexto se percibirán con el mismo nivel de importancia (todas las demás cosas son iguales), mientras que más contraste identifica más importancia y menos contraste identifica menos importancia.

Esto ofrece la primera pista sobre cómo elegir colores para el primer plano y el fondo: la información menos importante debería usar un contraste más bajo y la información más importante debería usar un contraste más alto.

El primer enlace es a Color Scheme Designer , un sitio similar a Kuler. Al igual que Kuler, es una práctica herramienta interactiva, pero no ofrece ninguna idea de cómo se deben elegir los colores, es decir, qué amarillos funcionan con qué verdes o azules, etc.

El siguiente enlace que ofrece es un sitio web del Laboratorio de Investigación del Uso del Color de la NASA titulado Uso del color en gráficos de visualización de información . Este sitio proporciona mucha más información sobre cómo elegir colores para un contraste adecuado, etc., y enumera las fórmulas matemáticas para medir cosas como el contraste. Todavía no he encontrado ningún código SW o algoritmo de pseudocódigo en ese sitio, pero solo he visto algunas páginas. Stefano también señala que el Laboratorio de color de la NASA utiliza el Sistema de color Munsell , un sistema similar al HSV pero con el peso de reflejar con mayor precisión la percepción humana del color en lugar de las propiedades medibles del color.

Un último enlace mencionado en el blog de Stefano es un sitio llamado Color Trends + Palettes :: COLOURlovers . Este sitio no ofrece más ayuda para encontrar un algoritmo para elegir colores que Color Scheme Designer o Kuler, pero enfatiza la calidad menos mensurable de los cambios actuales en nuestro disfrute fugaz de ciertos colores y paletas. Vale la pena una visita si desea que su interfaz de usuario refleje las últimas tendencias.

Una vez más, visite el sitio web de la NASA y lea algunas de las páginas allí, especialmente las de Color Science , y debería ser capaz de encontrar un algoritmo viable para elegir colores que funcionen juntos y proporcionen el contraste deseado.

EDITAR: agregaré enlaces útiles adicionales en esta área a medida que los encuentre.

  1. Algoritmo genético interactivo para colores.pdf
  2. Un algoritmo de segmentación de color perceptual.pdf
  3. Una guía para combinar colores y esquemas de color para Great Web Design.html
oosterwal
fuente
Hice más investigaciones y experimentos solo para confirmar que lo que realmente importa es la percepción subjetiva de un color, no alguna propiedad física de la luz reflejada. El sistema de color Munsell es la clave. Sin embargo, es una pena que no pueda dividir la recompensa porque @Steven Jeuris me ayudó muchísimo con los enlaces a las bibliotecas Colorjizz y Mojocolor. Gracias a todos por vuestra ayuda.
daniel.sedlacek
9

En cuanto a las herramientas de generación de color, me gusta http://kuler.adobe.com lo mejor.

ingrese la descripción de la imagen aquí

Cuando crea una paleta de colores (5 colores) en el sitio, sus opciones son Análoga, Monocromática, Tríada, Complementaria, Compuesta y Tonos. Por supuesto, puede personalizar sus colores en lugar de generarlos automáticamente. Cada bloque de color muestra los valores numéricos en RGB y Hex (así como CMYK / HSV / Lab).

¿Cómo generar colores complementarios o análogos?

Esto implica un poco más de conocimiento de la teoría del color. Puede consultar una buena explicación (básica) aquí . Ver las ruedas de colores.

¿Cómo generar colores pastel, fríos y cálidos?

En general, los colores pastel son "colores suaves". Son el espectro más alto y más bajo de un tinte. Vea la sección de colores pastel generada por el usuario de Kuler .

¿Cómo generar cualquier número de colores aleatorios pero distintos?

Para su propósito de gráficos, no estoy seguro de que los colores aleatorios funcionen. Cada elección de color debe seleccionarse a mano.

¿Cómo traducir todo eso al triplete hexadecimal (color web)?

La mayoría del software gráfico muestra valores hexadecimales para los colores. Hex es una cadena RGB compuesta por ## (rojo), ## (verde), ## (azul).

Por ejemplo, el rojo puro es FF0000, el azul puro es # 0000FF. El púrpura (que se obtiene al mezclar rojo y azul) es # FF00FF.

Como creará gráficos, le recomiendo que visite los siguientes blogs para inspirarse:

http://infosthetics.com

http://flowingdata.com

Si tiene tiempo, lea las Lecciones de teoría del color

Jin
fuente
Gracias por el largo comentario pero no responde ninguna de mis preguntas. Realmente necesito generar colores aleatorios, kuler es genial pero inútil para mí y sindicar esos blogs :).
daniel.sedlacek
Ese enlace "conocimiento de la teoría del color" define los colores primarios como rojo, amarillo y azul. La última vez que revisé, los primarios aditivos son rojos, verdes y azules, y los primarios sustractivos son cian, magenta y amarillo. Entonces, ¿de dónde viene el conjunto rojo, amarillo y azul?
Steve314
@ steve314, el modelo RYB se utiliza para el arte. Ver: en.wikipedia.org/wiki/RYB_color_model
Jin
Gracias. Me alegra haberlo formulado como una pregunta: puedo fingir que no estaba siendo un idiota ahora.
Steve314
4

Una idea que he tenido en mente por un tiempo es generar colores tan diferentes como sea posible (dentro de los límites) para tantos colores como sea necesario. La molestia adicional es que si necesito un par de colores adicionales más adelante para el mismo gráfico (tal vez se agreguen un par de barras adicionales), deben encajar en el mismo esquema, manteniendo los colores existentes iguales.

La idea que se me ocurrió es un truco poco complicado. Imagine un círculo de colores (quizás cada uno con un tono diferente con la misma saturación y brillo, aunque podría definir cualquier círculo a través de cualquier espacio de color). En lugar de dar un ángulo en grados para ese círculo, tenga un rango de cero a 255. En binario, eso es 00000000 a 11111111. Agregue uno a un bit de 255 y se desborda a cero, por lo que actúa naturalmente como un "valor circular" (en términos técnicos, la suma y la resta es el módulo 256).

El truco es cuando selecciona el color cero, el color uno, etc., para invertir esos números. Para hacer eso en C, usaría ...

value = ((value & 0x0F) << 4) | ((value & 0xF0) >> 4);
value = ((value & 0x33) << 2) | ((value & 0xCC) >> 2);
value = ((value & 0x55) << 1) | ((value & 0xAA) >> 1);

Entonces la secuencia 0, 1, 2, 3, 4 se transforma a 0, 128, 64, 192, 32.

El punto es que tiene 256 colores distintos, y los primeros están muy espaciados, mientras que los últimos se espacian menos y llenan los espacios (64 está a medio camino entre 0 y 128, 32 está a medio camino). entre 0 y 64 etc.)

Cualquier ancho de bits para un "ángulo" particular funcionará si adapta el retroceso de bits y, por supuesto, podría ejecutar varios ciclos a la vez para diferentes parámetros del color (tal vez el tono gira rápidamente, pero la saturación gira más lentamente).

Eso solo deja la pregunta de cómo mapeas tus "ángulos" a números RGB particulares o lo que sea, en lo que no soy un experto, oh, y la pregunta de si ActionScript admite juegos de bits.

Steve314
fuente
Truco fascinante! +1. Pero una advertencia de preguntas similares e interesantes sobre gamedev.stackexchange y stackoverflow : la percepción del tono no es lineal, por lo que el mismo cambio de ángulo puede parecer un gran cambio para algunos colores y un cambio muy pequeño para otros.
Frepa
@Frepa - cierto, a menos que tenga cuidado de cómo mapear a RGB al menos - un mapeo trivial a RGB probablemente no daría buenos resultados para la mayoría de los propósitos. Soy consciente del problema, pero como dije, no soy un experto en eso; probablemente debería haber dicho al menos que el problema involucra diferentes espacios de color y la conversión entre ellos.
Steve314
2

Esta pregunta me fascinó, así que comencé a buscar en Google. :) No esperes una respuesta basada en la experiencia.

Básicamente, para hacer cálculos con colores, es mejor realizar operaciones en una rueda de colores, que se representa en el formato HSL .

El autor de esta publicación tuvo la amabilidad de proporcionar cierta información sobre la conversión de RGB a HSL y un código de muestra sobre cómo calcular colores complementarios.

Si tiene suerte, no necesitará comprender nada de eso, si una de las siguientes bibliotecas AS3 torpemente trabajadas funciona para usted.

Steven Jeuris
fuente
Mientras tanto, también investigué más y llegué a la misma conclusión. (Excepto que prefiero HSV sobre HSL). Gracias por los enlaces, ¡Colorjizz se ve increíble! ps: +1
daniel.sedlacek
1

He usado el siguiente código. Nota: no utiliza ninguna teoría sobre cómo funciona el ojo / cerebro, solo quería poder crear una paleta de colores como rojo + verde + azul = 1, y los colores están aproximadamente espaciados de manera uniforme. El parámetro "yo" es el color de un total de números posibles. Funciona para numerar aproximadamente 91 ish. Tenga en cuenta que debería correr de cero a num-1. Son posibles otras cosas, la restricción dada anteriormente es bastante arbitraria, pero al menos genera colores distintos, suponiendo que no necesite demasiados.

void select_color(int me,int num){
  int s[14]={0,1,3,6,10,15,21,28,36,45,55,66,78,91};
  int j,nrows=0,irow=0,jcol=0;
  float del,red,grn,blu;
// we build a red/green triangle with an area>=num
  for(j=0;j<14;j++)if(me>=s[j])irow=j;
  for(j=13;j>0;j--)if(num<=s[j])nrows=j;
  jcol=me-s[irow];
  del=1./(nrows-.9);
  red=1.-del*irow;
  grn=del*jcol;
  blu=1.-red-grn;
  glColor3f(red,grn,blu);
}

Nuevamente, no utiliza la teoría del color, por lo que no hay garantía de que la discreción se optimice en ningún wat, especialmente si le preocupa el usuario ocasional con ceguera parcial del color.

También puede simplemente establecer las variables de color primario en números aleatorios, pero es menos probable que formen un conjunto visualmente distinto.

Omega Centauri
fuente
0

En el pasado, lo hice simplemente seleccionando a mano unos 20 colores, en lugar de tratar de generarlos. A menos que sus gráficos sean muy complejos, generalmente no necesita más. Este enfoque, aunque simple, también le permite asignar el mismo color a los mismos factores en su gráfico (por ejemplo, siempre puede hacer que las 'ventas' sean del mismo color, haciendo que los gráficos sean más fáciles de interpretar).

Gran maestro B
fuente
0

Me gusta probar colores de fotos . Como diseñador, hago esto manualmente. Como programador, generalmente elijo un píxel aleatorio. Si desea más control, puede crear sus propias "fotos" que cumplan con un determinado conjunto de reglas.

Les
fuente
0

Siempre me han gustado las utilidades en línea de VisiBone, ya que puede seleccionar varios colores y evaluar de forma interactiva cuán mal se enfrentan entre sí: http://www.visibone.com/colorlab/

Digo lo mucho que chocan porque estoy familiarizado con el contraste de color que se aplica al arte "analógico" y me sorprendió lo mal que el color que elegí chocó entre sí en el arte digital. (Claramente, no soy diseñador)

frogstarr78
fuente