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!

12 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"

Fangyaya ha detto...

fangyanting20150926
louis vuitton, http://www.borselouisvuittonoutlet.it/
jordan shoes, http://www.jordanshoes.us.com/
michael kors outlet, http://www.michaelkorsoutletcanada.in.net/
longchamp handbags, http://www.longchamphandbag.us.com/
nfl jerseys wholesale, http://www.nfljerseys-wholesale.us.com/
hermes bags, http://www.hermesbags.co.uk/
oakley sunglasses wholesale, http://www.oakleysunglasseswholesale.us.com/
michael kors handbags, http://www.michaelkorshandbags.in.net/
ugg boots, http://www.uggboot.com.co/
nike air max shoes, http://www.nikeairmaxshoess.co.uk/
mulberry outlet, http://mulberryoutlet.outlet-store.co.uk/
michael kors outlet, http://michaelkors.outletonlinestores.us.com/
nike trainers, http://www.niketrainers.me.uk/
coach outlet store, http://www.coach-outlet-store.us.com/
hermes belt, http://www.hermesbelts.us/
cheap nba jerseys, http://www.nbajerseys.net/
replica handbags, http://www.replicahandbag.us.com/
tory burch outlet, http://www.toryburchoutletonline.in.net/
air max 2015, http://www.airmax2015.in.net/
air jordan 11, http://www.airjordan11.net/
ray ban sunglasses, http://www.ray-bansunglasses.eu.com/
stuart weitzman boots, http://www.stuartweitzmanoutlet.us/
michael kors outlet, http://www.michaelkorsusa.us/
air max 90, http://www.airmax90.us.com/
ugg boots, http://www.uggbootscheap.eu.com/
ray ban sunglasses, http://www.raybansunglass.us.com/
the north face uk, http://www.thenorthfaces.org.uk/
swarovski jewelry, http://www.swarovski.in.net/
nike free, http://www.nikefreerunning.org/
ray ban sunglasses, http://www.raybansunglass.com.au/

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

Unknown ha detto...

coach outlet
coach factory outlet
nike air huarache
tory burch flats
louis vuitton handbags
oakley sunglasses
tiffany outlet
ray ban sunglasses
michael kors outlet
michael kors handbags
louis vuitton outlet
louis vuitton outlet
tory burch sale
tory burch outlet
nike uk
asics shoes
nike blazers
ray ban sunglasses
adidas originals shoes
kate spade handbags
adidas shoes
louis vuitton outlet
louis vuitton bags
louis vuitton outlet
michael kors outlet
cheap jordan shoes
ray ban sunglasses
louboutin pas cher
nike free run 2
coach outlet
ray ban sunglasses discount
true religion outlet
louis vuitton outlet
pandora jewelry
hollister clothing
oakley vault
coach outlet
coach outlet store online clearances
coach factory outlet
oakley vault
20165.4wengdongdong

chenzhen ha detto...

ray ban outlet store
tiffany and co outlet
nike free 5.0
birkenstocks
cartier love ring
ghd hair dryer
lacoste shoes
nike free flyknit 3.0
louis vuitton purse
cheap jordan shoes
adidas trainers
burberry outlet
michael kors outlet online
ghd
coach outlet online
longchamp outlet
cheap oakley sunglasses
christian louboutin uk
black timberland boots
michael kors outlet clearance
rolex replica watches
louis vuitton handbags
polo ralph lauren outlet
yeezy boost 350 white
louis vuitton handbags
adidas nmd runner
louboutin shoes
michael kors handbags
yeezy boost 350
jordan pas cher
michael kors uk
fake oakleys
louis vuitton pas cher
pandora jewelry
adidas gazelle
louis vuitton outlet
christian louboutin outlet
mont blanc pens outlet
christian louboutin outlet
fitflops
chenzhen201662


Prima di lasciare un commento, leggete qui

Posta un commento

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