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

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.

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

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

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

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.

Hay una pregunta interesante sobre el desbordamiento de pila " Función para crear ruedas de color " en esto. Es posible que también desee leer uno de los documentos recomendados (PDF).

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.

• Colorjizz
• Mojocolor

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.

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

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.

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)