La codifica RGB dei colori


E' comunemente accettato che qualsiasi tonalità di colore possa essere ottenuta mescolando insieme rosso, giallo e blu. Giallo e blu danno il verde, il rosso e il giallo l'arancione, e così via. Questi tre colori vengono chiamati "primari" perchè da essi derivano tutti gli altri. Anche in un computer i colori vengono gestiti tramite la combinazione di tre diversi colori, anche se in questo caso il giallo viene sostituito dal verde: in informatica i colori primari sono rosso, verde e blu. Dalla miscelazione delle loro diverse tonalità vengono rappresentati tutti i colori che vediamo su schermo:

image

La rappresentazione RGB (Red, Green, Blue) di un colore è quindi un codice che identifica le tre diverse tonalità, e viene indicato con una stringa di sei caratteri, dove i primi due indicano la tonalità di rosso, i due al centro indicano quella di verde, e gli ultimi due rappresentano il blu. Ogni singolo carattere indica un numero esadecimale.

La numerazione esadecimale

Nel sistema decimale, i numeri vanno da 0 a 9, combinandoli assieme generiamo tutti gli altri. In un sistema esadecimale, i numeri vanno da 0 a 15, con le cifre maggiori di 9 indicate da una lettera:

  • A = 10
  • B = 11
  • C = 12
  • D = 13
  • E = 14
  • F = 15

Ad esempio, A0 in decimale è 160, mentre FF è 255.

La codifica RGB nell'HTML

Mi è capitato spesso di parlare di codifica RGB per i colori del testo o dello sfondo nel codice HTML. In una pagina web, infatti, i colori vengono rappresentati nel modo in cui "li capisce" il computer, usando sei caratteri esadecimali accoppiati a due a due, formando una combinazione di 16 milioni di colori che vanno dal 000000 (bianco) al FFFFFF (nero).

Non è necessario comprendere appieno questo meccanismo, ma ho voluto dare comunque l'infarinatura per afferrare i concetti di base. Quello che è più importante, è come fare a scegliere la giusta codifica RGB quando vogliamo usare un colore. Aumentando la prima coppia di caratteri aumentiamo il valore di rosso, con la seconda aumentiamo il verde, e con la terza il blu, tenendo presente che FF è il massimo. Quindi se vogliamo usare il blu per il colore di un elemento HTML, useremo:

0000FF

cioè azzeriamo rosso e verde e massimizziamo il blu per avere solo quello. In base all'immagine in alto, il giallo si ottiene miscelando rosso e verde, quindi:

FFFF00

cioè escludiamo il blu e massimizziamo gli altri. Possiamo scurire la tonalità usando valori meno alti, per esempio:

999900

ci darà un giallo più scuro del precedente.

Proviamo le combinazioni con Color Scheme Online

Per provare le combinazioni di colori, possiamo usare Color Scheme Online:

image

Basta inserire il valore esadecimale nella casella di testo con # davanti e cliccare su Set HEX per vedere in alto il colore generato:

image

In questo caso ho creato il giallo usando il codice indicato prima. E' possibile inserire anche i valori decimali delle tonalità di colore (da 0 a 255) se ci viene difficile ragionare in esadecimale. Cliccando su Set RGB i tre valori generano il colore finale e vengono convertiti nella codifica esadecimale che potremo usare nelle nostre pagine HTML.

Per aiutarci, lo strumento ha sotto uno spettro di colori, cliccandoci sopra ci viene data la codifica esadecimale, pronta per essere copiata e incollata nel nostro codice o per essere cambiata quel tanto che ci serve. Se vi cimentate spesso in modifiche del vostro template, Color Scheme Online va sicuramente messo nei vostri siti preferiti.

Sapere la codifica RGB di un colore su schermo

Potreste trovarvi davanti una pagina web o una foto e voler sapere la codifica RGB di un particolare colore. Un buon strumento è ColorPic, che potete scaricare gratuitamente (vi verrà richiesto di registrarvi alla mailling list, ma potete evitarlo cliccando su "Skip Joining and Download Now"). Una volta scaricato ed eseguito il programma, vi basterà avviarlo, selezionare una casella vuota e muovere il mouse sullo schermo:

image

Quando siete sopra il colore che vi interessa, usate la combinazione di tasti CTRL+ G per memorizzarla.

Per concludere

Per qualsiasi perplessità, o per maggiori chiarimenti, lasciatemi un commento.

L'immagine all'inizio del post è stata prelevata da Wikipedia.

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

9 commenti:

Anonimo ha detto...

Per catturare un colore sullo schermo io uso RUN PIXIE, è più piccolo ed essenziale di quello che hai citato.
Ciao

Iole ha detto...

Io utilizzo FastStone Capture sia per catturare un colore sullo schermo che per fare screenshot.

Tenebrae ha detto...

@gimbola: puoi linkare la pagina ufficiale del programma? potrebbe interessare anche altri

@Iole: ottimo strumento che non conoscevo, grazie per la segnalazione!

Iole ha detto...

Io a volte utilizzo anche Absolute Color Picker, perché a differenza di FastStone Capture ti consente anche l'operazione contraria... cioè se conosci il codice esadecimale puoi vedere a quale colore corrisponde.

Den ha detto...

Io, quando mi serviva conoscere le combinazioni di colori, andavo in layout->caratteri e colori; cliccavo sul colore che mi interessava e guardavo qual'era il codice corrispondente. Ora che ho conosciuto tutti questi programmi non ce ne sarà più bisogno! :-)

bi ha detto...

Meraviglioso e utilissimo il tuo blog, grazie, ti ho linkato nel mio baxart bazar e ti seguo fedelmente!Mi trovi qui:

http://baxart-bazar.blogspot.com/

Baxart

Teodoro Di Stasi ha detto...

Ciao, sapresti indicarmi se c'è una risorsa su internet che abbia una tabella dei colori con valore decimale?
E' due giorni che mi sbatto e non sono riuscito.
Purtroppo ho a che fare con un tema da modificare ed al suo interno ci sono sia valori decimali che esadecimali.
Ora, per cambiare il colore esadecimale non ho problemi, ma per quanto riguarda i riferimenti a quelli decimali sto faticando. Un esempio...quale diamine è il valore decimale del rosso?

Daccordo per il bianco che è fff
ci sono arrivato con il nero che è 000

e poi?
Help :-))

Tenebrae ha detto...

@teodoro: per prima cosa puoi convertire i valori decimali in esadecimali, e per questo ti basta la calcolatrice di windows. fai la visualizzazione scientifica, inserisci un valore, selezioni "hex" e te lo converte in esadecimale... per tornare al decimale clicchi di nuovo su "Dec"

Unknown ha detto...

cheap jordans
michael kors outlet online,michael kors,kors outlet,michael kors outlet,michael kors handbags,michael kors outlet online sale,michael kors handbags clearance,michael kors purses,michaelkors.com,michael kors bags,michael kors shoes,michaelkors,cheap michael kors
mulberry handbags
tory burch outlet online
swarovski crystal
canada goose coats
toms outlet
michael kors factory sale
giuseppe zanotti sale
nba jerseys wholesale
fitflops shoes
hollister pas cher
longchamp outlet online
cheap mlb jerseys
swarovski outlet
swarovski outlet


Prima di lasciare un commento, leggete qui

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.