Geração de esquemas de cores - teoria e algoritmos [fechados]

Gerarei gráficos e diagramas e estou procurando alguma teoria sobre esquemas de cores e exemplos de algoritmos.

Exemplos de perguntas:

• Como gerar cores complementares ou análogas?
• Como gerar cores pastel, frias e quentes?
• Como gerar qualquer número de cores aleatórias, mas distintas?
• Como traduzir tudo isso para o trigêmeo hexadecimal (cor da web)?

Minha implementação será no AS3, mas quaisquer exemplos em pseudocódigo são bem-vindos.

Ao procurar mais informações sobre esta questão (é algo com o qual também lutei), encontrei este blog . Stefano Mazzocchi explica sua teoria sobre por que os programadores são péssimos ao escolher cores para o design da interface do usuário e oferece alguns conselhos e links úteis.

O primeiro conselho que ele oferece é esse fato óbvio que estabelece as bases para a escolha de tons e saturações:

Duas informações com o mesmo contraste no contexto serão percebidas no mesmo nível de importância (todas as outras coisas são iguais), enquanto mais contraste identifica mais importância e menos contraste identifica menos importância.

Isso oferece a primeira pista sobre como escolher cores para primeiro plano e plano de fundo - informações menos importantes devem usar menor contraste e informações mais importantes devem usar maior contraste.

O primeiro link é para o Color Scheme Designer , um site semelhante ao Kuler. Como o Kuler, é uma ferramenta interativa útil, mas não oferece nenhuma ideia de como as cores devem ser escolhidas, ou seja, quais amarelos funcionam com quais verdes ou azuis, etc.

O próximo link que ele oferece é o site do Laboratório de pesquisa de uso de cores da NASA, intitulado Usando cores em gráficos de exibição de informações . Este site fornece muito mais informações sobre como escolher cores para um contraste adequado etc., e lista as fórmulas matemáticas para medir coisas como contraste. Ainda não encontrei nenhum código SW ou algoritmo de pseudocódigo nesse site, mas apenas olhei algumas páginas. Stefano também aponta que o Laboratório de Cores da NASA usa o Munsell Color System , um sistema semelhante ao HSV, mas ponderado para refletir com mais precisão a percepção humana da cor, em vez de propriedades mensuráveis ​​da cor.

Um último link mencionado no blog de Stefano é para um site chamado Color Trends + Palettes :: COLOURlovers . Este site não oferece mais ajuda para encontrar um algoritmo para a escolha de cores do que o Color Scheme Designer ou o Kuler, mas enfatiza a qualidade menos mensurável das mudanças atuais em nosso prazer passageiro de determinadas cores e paletas. Vale a pena visitar se você deseja que sua interface do usuário reflita as tendências mais recentes.

Mais uma vez, confira o site da NASA e leia algumas das páginas, especialmente as da Color Science , e você poderá criar um algoritmo viável para escolher cores que funcionem juntas e proporcionem o contraste desejado.

EDIT: adicionarei links úteis adicionais nesta área conforme os encontrar.

1. Algoritmo Genético Interativo para Colors.pdf
2. Um algoritmo de segmentação perceptiva de cores.pdf
3. Um guia para combinar cores e esquemas de cores para um ótimo web design.html

No que diz respeito às ferramentas de geração de cores, eu gosto mais do http://kuler.adobe.com .

Quando você cria uma paleta de cores (5 cores) no site, suas opções são Analógico, Monocromático, Tríade, Complementar, Composto e Tons. É claro que você pode personalizar suas cores em vez de gerá-las automaticamente. Cada bloco de cores mostra os valores numéricos em RGB e Hex (assim como em CMYK / HSV / Lab).

Como gerar cores complementares ou análogas?

Isso envolve um pouco mais de conhecimento da teoria das cores. Você pode conferir uma boa explicação (básica) aqui . Veja as rodas coloridas.

Como gerar cores pastel, frias e quentes?

Em geral, as cores pastel são "cores suaves". Eles são o espectro mais alto e mais baixo de uma tonalidade. Consulte a seção de cores pastel geradas pelo usuário de Kuler .

Como gerar qualquer número de cores aleatórias, mas distintas?

Para sua finalidade de gráficos, não tenho certeza se cores aleatórias funcionariam. Cada escolha de cor deve ser escolhida a dedo.

Como traduzir tudo isso para o trigêmeo hexadecimal (cor da web)?

A maioria dos softwares gráficos exibe valores hexadecimais para cores. Hex é uma string RGB composta por ## (vermelho), ## (verde), ## (azul).

Por exemplo, vermelho puro é FF0000, azul puro é # 0000FF. Roxo (você pode misturar vermelho e azul) é # FF00FF.

Como você criará gráficos, recomendo visitar os seguintes blogs para obter inspirações:

http://infosthetics.com

http://flowingdata.com

Se você tiver tempo, leia Lições na teoria das cores

Uma idéia que tenho em mente há um tempo é gerar cores o mais diferentes possível (dentro dos limites) para tantas cores quantas forem necessárias. O problema extra é que, se eu precisar de mais algumas cores posteriormente para o mesmo gráfico (talvez algumas barras extras sejam adicionadas), elas precisam se encaixar no mesmo esquema, mantendo as cores existentes iguais.

A ideia que me surgiu é um truque complicado. Imagine um círculo de cores (talvez cada um com uma tonalidade diferente com a mesma saturação e brilho, embora você possa definir qualquer círculo em qualquer espaço de cor). Em vez de fornecer um ângulo em graus para esse círculo, tenha um intervalo de zero a 255. Em binário, é 00000000 a 11111111. Adicione um a um bit 8 de 255 e ele transborda de volta a zero, para que atue naturalmente como um "valor circular" (em termos técnicos, adição e subtração é módulo 256).

O truque é quando você seleciona a cor zero, a cor um etc., para reverter esses números. Para fazer isso em C, eu usaria ...

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

Portanto, a sequência 0, 1, 2, 3, 4 é transformada em 0, 128, 64, 192, 32.

O ponto é que você tem 256 cores distintas, e as primeiras são muito espaçadas, com as mais recentes ficando menos espaçadas e preenchendo as lacunas (64 está na metade do caminho entre 0 e 128, 32 na metade do caminho). entre 0 e 64 etc).

Qualquer largura de bit para um "ângulo" específico funcionará se você adaptar o inverso de bit e, é claro, você poderá executar vários ciclos ao mesmo tempo para diferentes parâmetros da cor (talvez o tom gire rapidamente, mas a saturação gire mais lentamente).

Isso deixa apenas a questão de como você mapeia seus "ângulos" para números RGB específicos ou o que quer que seja, no qual eu não sou especialista - ah, e a questão de saber se o ActionScript suporta manipulação de bits.

Há uma pergunta interessante sobre estouro de pilha " Função para criar rodas coloridas " sobre isso. Você também pode ler um dos papéis recomendados (PDF).

Essa pergunta me fascinou, então comecei a pesquisar no Google. :) Não espere uma resposta com base na experiência.

Basicamente, para fazer cálculos com cores, é melhor executar operações em uma roda de cores, representada no formato HSL .

O autor desta postagem teve a gentileza de fornecer algumas informações sobre a conversão de RGB para HSL e um exemplo de código sobre como calcular cores complementares.

Se você tiver sorte, não precisará entender nada disso, se uma das seguintes bibliotecas AS3 de nome estranho funcionar para você.

• Colorjizz
• Mojocolor

Eu usei o seguinte código. Nota: ele não usa teoria sobre como o olho / cérebro funciona, eu só queria criar um paladar de cores como vermelho + verde + azul = 1, e as cores são espaçadas aproximadamente igualmente. O parâmetro "eu" é a cor de um total de um número possível. Ele trabalha para um número aproximado de 91 ish. Note que eu deveria correr de zero a num-1. Outras coisas são possíveis, a restrição dada acima é bastante arbitrária, mas pelo menos gera cores distintas - supondo que você não precise de muitas delas.

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

Novamente, ele não usa teoria de cores; portanto, não há garantia de que o desestímulo seja otimizado em qualquer wat - especialmente se você estiver preocupado com um usuário ocasional com daltonismo parcial.

Você também pode simplesmente definir as variáveis ​​de cores primárias como números aleatórios, mas é menos provável que elas formem um conjunto visualmente distinto.

No passado, eu fiz isso escolhendo apenas 20 cores manualmente, em vez de tentar gerá-las. A menos que seus gráficos sejam muito complexos, geralmente você não precisa de mais. Essa abordagem, embora simples, também permite atribuir a mesma cor aos mesmos fatores em seu gráfico (por exemplo, você sempre pode fazer 'vendas' da mesma cor, facilitando a interpretação dos gráficos).

Eu gosto de provar cores das fotos . Como designer, faço isso manualmente. Como programador, geralmente escolho um pixel aleatório. Se você quiser ter mais controle, poderá criar suas próprias 'fotos' que atendem a um determinado conjunto de regras.

Eu sempre gostei dos utilitários on-line do VisiBone, pois você pode selecionar várias cores e avaliar interativamente o quanto eles se chocam: http://www.visibone.com/colorlab/

Digo o quanto eles se chocam porque eu estou familiarizado com o contraste de cores que se aplica à arte "analógica" e fiquei surpreso com o quanto as cores que eu escolhi colidiram umas com as outras na arte digital. (Claramente eu não sou designer)