it-swarm.it

Generazione di combinazioni di colori - teoria e algoritmi

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.

28
daniel.sedlacek

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 più basso e le informazioni più importanti dovrebbero usare un contrasto più elevato.

Il primo link è 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 so del colore nella grafica di visualizzazione delle informazioni . 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 il NASA Color Lab utilizza 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 su 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 quest'area appena li trovo.

  1. Interactive Genetic Algorithm for Colors.pdf
  2. A Perceptual Color Segmentation Algorithm.pdf
  3. na guida alla combinazione di colori e combinazioni di colori per Great Web Design.html
15
oosterwal

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

enter image description here

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 (oltre a 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 spiegazione (di base) di Nizza 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 di colore 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 Lezioni sulla teoria dei colori

9
Jin

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. Aggiungine 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 ovviamente è 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.

4
Steve314

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

3
Gary Rowe

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.

2
Steven Jeuris

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 primarie su numeri casuali, ma è anche meno probabile che formino un insieme visivamente distinto.

1
Omega Centauri

Mi sono sempre piaciute le utility online di VisiBone in quanto è possibile selezionare più colori e valutare in modo interattivo quanto si scontrano l'un l'altro: 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ò)

0
frogstarr78

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, ti consente anche di assegnare lo stesso colore agli stessi fattori nel tuo grafico (ad esempio, puoi sempre rendere "vendite" dello stesso colore, rendendo i grafici più facili da interpretare).

0
GrandmasterB

Mi piacciono i colori di campionamento da 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.

0
Les