Generazione di combinazioni di colori - teoria e algoritmi [chiuso]

Genererò grafici e diagrammi e cerco una teoria sugli schemi di colori e sugli esempi di algoritmi.

Domande di esempio:

• Come generare colori complementari o analoghi?
• Come generare colori pastello, freddi e caldi?
• Come generare un numero qualsiasi di colori casuali ma distinti?
• Come tradurre tutto ciò nella tripletta esadecimale (colore web)?

La mia implementazione sarà in AS3 ma qualsiasi esempio in pseudocodice è il benvenuto.

Nel cercare ulteriori informazioni su questa domanda (è qualcosa con cui ho lottato anche io) ho trovato questo blog . Stefano Mazzocchi spiega la sua teoria sul perché i programmatori fanno schifo nella scelta dei colori per la progettazione dell'interfaccia utente e offre alcuni consigli e collegamenti utili.

Il primo consiglio che offre è questo fatto ovvio che pone le basi per scegliere tonalità e saturazione:

Due informazioni con lo stesso contrasto sullo sfondo verranno percepite allo stesso livello di importanza (a parità di tutte le altre cose), mentre più contrasto identifica più importanza e meno contrasto identifica meno importanza.

Questo offre il primo indizio su come scegliere i colori per il primo piano e lo sfondo: le informazioni meno importanti dovrebbero usare un contrasto inferiore e le informazioni più importanti dovrebbero usare un contrasto più elevato.

Il primo collegamento è a Color Scheme Designer , un sito simile a Kuler. Come Kuler, è uno strumento interattivo a portata di mano, ma non offre alcuna idea di come scegliere i colori, ovvero quali gialli lavorare con i verdi o i blu, ecc.

Il prossimo link che offre è un sito Web della NASA Color Usage Research Lab intitolato Using Color in Information Display Graphics . Questo sito fornisce molte più informazioni su come scegliere i colori per un corretto contrasto, ecc. Ed elenca le formule matematiche per misurare cose come il contrasto. Non ho ancora trovato alcun codice SW o algoritmo pseudo-codice su quel sito, ma ho visto solo alcune pagine. Stefano sottolinea inoltre che la NASA Color Lab utilizza il Munsell Color System , un sistema simile a HSV ma ponderato per riflettere più accuratamente la percezione umana del colore piuttosto che le proprietà misurabili del colore.

Un ultimo link menzionato nel blog di Stefano è un sito chiamato Color Trends + Palettes :: COLOURlovers . Questo sito non offre più aiuto nella ricerca di un algoritmo per la scelta dei colori rispetto a Color Scheme Designer o Kuler, ma enfatizza la qualità meno misurabile degli attuali cambiamenti nel nostro godimento fugace di determinati colori e palette. Vale la pena visitare se vuoi che la tua interfaccia utente rifletta le ultime tendenze.

Ancora una volta, controlla il sito Web della NASA e leggi alcune delle pagine lì, in particolare quelle di Color Science , e dovresti essere in grado di elaborare un algoritmo praticabile per scegliere i colori che lavorano insieme e forniscono il contrasto desiderato.

EDIT: aggiungerò ulteriori link utili in questa area appena li trovo.

1. Algoritmo genetico interattivo per Colors.pdf
2. Un algoritmo percettivo di segmentazione del colore.pdf
3. Una guida alla combinazione di colori e combinazioni di colori per Great Web Design.html

Per quanto riguarda gli strumenti di generazione del colore, mi piace il migliore http://kuler.adobe.com .

Quando si crea una tavolozza di colori (5 colori) sul sito, le opzioni disponibili sono Analogica, Monocromatica, Triade, Complementare, Composto e Tonalità. Ovviamente puoi personalizzare i tuoi colori invece di generarli automaticamente. Ogni blocco di colore mostra i valori numerici in RGB e Hex (così come CMYK / HSV / Lab).

Come generare colori complementari o analoghi?

Ciò comporta un po 'più di conoscenza della teoria dei colori. Puoi dare un'occhiata a una bella spiegazione (di base) qui . Vedi le ruote dei colori.

Come generare colori pastello, freddi e caldi?

In generale, i colori pastello sono "colori tenui". Sono lo spettro più alto e più basso di una tinta. Vedi la sezione colori pastello generata dall'utente di Kuler .

Come generare un numero qualsiasi di colori casuali ma distinti?

Per i tuoi scopi grafici, non sono sicuro che i colori casuali funzionerebbero. Ogni scelta di colore deve essere selezionata a mano.

Come tradurre tutto ciò nella tripletta esadecimale (colore web)?

La maggior parte dei software grafici visualizza valori esadecimali per i colori. Hex è una stringa RGB composta da ## (rosso), ## (verde), ## (blu).

Ad esempio, il rosso puro è FF0000, il blu puro è # 0000FF. Il viola (si ottiene mescolando rosso e blu) è # FF00FF.

Dal momento che creerai grafici, ti consiglio di visitare i seguenti blog per ispirazioni:

http://infosthetics.com

http://flowingdata.com

Se hai tempo, leggi le lezioni sulla teoria dei colori

Un'idea che avevo in mente da un po 'è quella di generare colori il più diversi possibile (entro i limiti) per tutti i colori necessari. La seccatura extra è che se avessi bisogno di un paio di colori extra in seguito per lo stesso grafico (forse un paio di barre extra aggiunte), devono adattarsi allo stesso schema, mantenendo gli stessi colori esistenti.

L'idea che mi è venuta in mente è un trucco complicato. Immagina un cerchio di colori (forse ognuno ha una tonalità diversa con la stessa saturazione e luminosità, anche se puoi definire qualsiasi cerchio attraverso qualsiasi spazio colore). Invece di dare un angolo in gradi per quel cerchio, avere un intervallo da zero a 255. In binario, compreso tra 00000000 e 11111111. Aggiungi uno a un 8 bit 255 e torna a zero, quindi agisce naturalmente come un "valore circolare" (in termini tecnici, addizione e sottrazione è modulo 256).

Il trucco è quando selezioni il colore zero, il colore uno ecc. Per invertire i numeri. Per farlo in C, userei ...

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

Quindi la sequenza 0, 1, 2, 3, 4 viene trasformata in 0, 128, 64, 192, 32.

Il punto è che hai 256 colori distinti e i primi sono molto distanziati, con i successivi che sono meno distanziati e riempiono gli spazi vuoti (64 è a metà strada tra 0 e 128, 32 è a metà strada tra 0 e 64 ecc.).

Qualsiasi larghezza di bit per un particolare "angolo" funzionerà se si adatta il bit-reverse e, naturalmente, è possibile eseguire più cicli contemporaneamente per diversi parametri del colore (forse la tonalità gira rapidamente, ma la saturazione gira più lentamente).

Questo lascia solo la domanda su come mappare i tuoi "angoli" su particolari numeri RGB o altro, di cui non sono esperto - oh, e la domanda se ActionScript supporta i bit-fiddling.

C'è un'interessante domanda Stack Overflow " Funzione per la creazione di ruote dei colori " su questo. Potresti anche voler leggere uno dei documenti consigliati (PDF).

Questa domanda mi ha affascinato, così ho iniziato a fare googling. :) Non aspettarti una risposta basata sull'esperienza.

Fondamentalmente, per fare calcoli con i colori, è meglio fare operazioni su una ruota dei colori, che è rappresentata nel formato HSL .

L'autore di questo post è stato così gentile da fornire alcune informazioni sulla conversione di RGB in HSL e un codice di esempio su come calcolare i colori complementari.

Se sei fortunato non avrai bisogno di capirlo, se una delle seguenti librerie AS3 stranamente nominate funziona per te.

• Colorjizz
• Mojocolor

Ho usato il seguente codice. Nota: non utilizza alcuna teoria su come funziona l'occhio / cervello, volevo solo essere in grado di creare un palato di colori tale che rosso + verde + blu = 1, e i colori siano distanziati in modo approssimativamente uniforme. Il parametro "me" è quale colore di un totale di un numero possibile di quelli. Funziona per num circa 91 ish. Nota che dovrei correre da zero a num-1. Altre cose sono possibili, il vincolo di cui sopra è piuttosto arbitrario, ma almeno genera colori distinti, supponendo che non ne occorrano troppi.

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

Ancora una volta, non utilizza alcuna teoria del colore, quindi non esiste alcuna garanzia che la distensione sia ottimizzata in qualsiasi tipo di acqua, specialmente se si è interessati all'utente occasionale con daltonismo parziale.

Puoi anche semplicemente impostare le variabili di colore primario su numeri casuali, ma è ancora meno probabile che formino un insieme visivamente distinto.

In passato, l'ho fatto semplicemente selezionando a mano circa 20 colori, piuttosto che cercare di generarli. A meno che i grafici non siano molto complessi, di solito non è necessario altro. Questo approccio, sebbene semplice, consente anche di assegnare lo stesso colore agli stessi fattori nel grafico (ad esempio, è sempre possibile rendere le vendite dello stesso colore, rendendo più semplice l'interpretazione dei grafici).

Mi piace campionare i colori dalle foto . Come designer lo faccio manualmente. Come programmatore di solito scelgo un pixel casuale. Se desideri un maggiore controllo, puoi creare le tue "foto" che rispettano un determinato set di regole.

Mi sono sempre piaciute le utility online di VisiBone in quanto è possibile selezionare più colori e valutare in modo interattivo quanto si scontrano tra loro: http://www.visibone.com/colorlab/

Dico quanto si scontrano perché ho familiarità con il contrasto di colore in quanto si applica all'arte "analogica" e sono rimasto sorpreso da quanto male il colore che ho scelto si scontrasse tra loro nell'arte digitale. (Chiaramente non sono un designer però)