Aiuto:Colori: differenze tra le versioni
MFHbot (rosica | curriculum) m (Bot: Correzione di una proprietà CSS.) |
MFH (rosica | curriculum) (Ucciderei chi ha fatto questa porcheria...) |
||
Riga 8: | Riga 8: | ||
Volendo potete copiare i colori dagli esempi più sotto, ma se volete imparare ad usarli meglio leggere questa guida. |
Volendo potete copiare i colori dagli esempi più sotto, ma se volete imparare ad usarli meglio leggere questa guida. |
||
==Basi== |
==Basi== |
||
Questo sistema di colori (come avrete capito) è formato da # e da 6 cifre. Queste 6 cifre si dividono in tre parti ('''# |
Questo sistema di colori (come avrete capito) è formato da # e da 6 cifre. Queste 6 cifre si dividono in tre parti ('''#{{Colore|#FF0000|12}}{{Colore|#00FF00|34}}{{Colore|#0000FF|56}}'''): |
||
*La prima coppia controlla la quantità di |
*La prima coppia controlla la quantità di {{Colore|#FF0000|'''rosso'''}}. |
||
*La seconda coppia controlla il |
*La seconda coppia controlla il {{Colore|#00FF00|'''verde'''}}. |
||
*La terza coppia controlla il |
*La terza coppia controlla il {{Colore|#0000FF|'''blu'''}}. |
||
Modificando queste cifre potrai decidere la quantità di rosso, verde o blu da mettere nel colore. |
Modificando queste cifre potrai decidere la quantità di rosso, verde o blu da mettere nel colore. |
||
Sai come funzionano i numeri esadecimali? No? Bene, allora te lo spieghiamo noi. Le cifre vanno da 0 a 9 e poi dalla '' |
Sai come funzionano i numeri esadecimali? No? Bene, allora te lo spieghiamo noi. Le cifre vanno da 0 a 9 e poi dalla ''A'' fino alla ''F''. Se metti 0 vuole dire che la quantità di colore è nulla e se metti ''F'' vuole dire che la quantità è massima. La ''A'' viene subito dopo il 9. |
||
IMPORTANTE: La tavolazza di colori che si usa nei computer NON è la stessa delle tempere che hai usato a scuola. Infatti nei computer |
IMPORTANTE: La tavolazza di colori che si usa nei computer NON è la stessa delle tempere che hai usato a scuola. Infatti nei computer {{Colore|#FF0000|'''rosso'''}}+{{Colore|#00FF00|'''verde'''}}={{Colore|#FFFF00|'''giallo'''}}, {{Colore|#FF0000|'''rosso'''}}+{{Colore|#0000FF|'''blu'''}}={{Colore|#FF00FF|'''rosa'''}}, {{Colore|#00FF00|'''verde'''}}+{{Colore|#0000FF|'''blu'''}}={{Colore|#00FFFF|'''turchese'''}}. |
||
Infatti nei computer si usa la tavolazza [http://it.wikipedia.org/wiki/RGB RGB], mentre a visiva si usa la tavolazza [http://it.wikipedia.org/wiki/CMYK CMYK] (quella con ciano, magenta, giallo e nero, per chi bigiava Educazione Artistica alle medie). |
Infatti nei computer si usa la tavolazza [http://it.wikipedia.org/wiki/RGB RGB], mentre a visiva si usa la tavolazza [http://it.wikipedia.org/wiki/CMYK CMYK] (quella con ciano, magenta, giallo e nero, per chi bigiava Educazione Artistica alle medie). |
||
==Chiaro e scuro== |
==Chiaro e scuro== |
||
Per modificare la luminosità dei colori bisogna ricordarsi un fatto; se i colori del codice esadecimale sono tutti al massimo (# |
Per modificare la luminosità dei colori bisogna ricordarsi un fatto; se i colori del codice esadecimale sono tutti al massimo (#FFFFFF) si ottiene il bianco, mentre se sono nulli (#000000) si ottiene il nero. Quindi (al contrario della tavolazza classica) nei computer il bianco è il colore positivo, mentre il nero è quello negativo. |
||
Quindi, in ogni caso, se la quantità di rosso, di verde e di blu sono le stesse, avrai sempre una |
Quindi, in ogni caso, se la quantità di rosso, di verde e di blu sono le stesse, avrai sempre una gradazione di grigio. |
||
Per cambiare la luminosità di un colore devi quindi fare in modo che le cifre si avvicinano di più al nero (#000000) se vuoi che il colore sia più scuro o al bianco (# |
Per cambiare la luminosità di un colore devi quindi fare in modo che le cifre si avvicinano di più al nero (#000000) se vuoi che il colore sia più scuro o al bianco (#FFFFFF) se vuoi che il colore sia più chiaro. |
||
Quindi se vuoi fare un rosso (# |
Quindi se vuoi fare un rosso (#FF0000) più chiaro (visto che la parte del rosso è al massimo), devi modificare il verde e il blu. Quindi se metti #FF6666 otterrai un colore come {{Colore|#ff6666|'''questo'''}}. Se invece vuoi un rosso più scuro devi togliere un po' di rosso al codice. Quindi se metti #990000 otterrai un colore come {{Colore|#990000|'''questo'''}}. |
||
==Più sfumature== |
==Più sfumature== |
||
Ora voi vi chiederete: ma se è così non è più facile controllare solo tre cifre, una per il rosso, una per il verde, e una per il blu? |
Ora voi vi chiederete: ma se è così non è più facile controllare solo tre cifre, una per il rosso, una per il verde, e una per il blu? |
||
Bella domanda. Infatti puoi anche semplificarti la vita controllando solo tre cifre, quindi se metti # |
Bella domanda. Infatti puoi anche semplificarti la vita controllando solo tre cifre, quindi se metti #FF0000 oppure #F00 non cambia niente. Ma se usi tutte sei puoi avere molte più sfumature. Per fare questo devi cambiare la seconda cifra per ogni coppia (la meno importante). |
||
⚫ | |||
Per fare questo devi cambiare la seconda cifra per ogni coppia (la meno importante) |
|||
⚫ | |||
Tieni presente che se usi la combinazione di tre cifre avrai in tutto 3375 combinazioni di colori. Se usi tutte sei le cifre potrai usare ben 11390625 diverse sfumature. Altro che la solita scatola di pastelli da 36 pezzi... |
Tieni presente che se usi la combinazione di tre cifre avrai in tutto 3375 combinazioni di colori. Se usi tutte sei le cifre potrai usare ben 11390625 diverse sfumature. Altro che la solita scatola di pastelli da 36 pezzi... |
||
Riga 44: | Riga 42: | ||
Qui ci sono diversi esempi di colori che potete usare per capire meglio la guida o per saltarla del tutto. |
Qui ci sono diversi esempi di colori che potete usare per capire meglio la guida o per saltarla del tutto. |
||
==Gradiazioni di grigio== |
==Gradiazioni di grigio== |
||
*< |
*<span style="color: #000000; background color:#000000;">'''Nero'''</span> #000000 |
||
*< |
*<span style="color: #333333; background color:#000000;">'''Grigio molto scuro'''</span> #333333 |
||
*< |
*<span style="color: #666666; background color:#000000;">'''Grigio scuro'''</span> #666666 |
||
*< |
*<span style="color: #999999; background color:#000000;">'''Grigio metallo'''</span> #999999 |
||
*< |
*<span style="color: #BCBCBC; background color:#000000;">'''Grigio finestra di windows'''</span> #BCBCBC |
||
*< |
*<span style="color: #C8C8C8; background color:#000000;">'''Grigio chiaro'''</span> #C8C8C8 |
||
*< |
*<span style="color: #FFFFFF; background color:#000000;">'''Bianco'''</span> #FFFFFF |
||
==Gradiazioni di giallo e arancione== |
==Gradiazioni di giallo e arancione== |
||
*< |
*<span style="color: #ffff00; background color:#000000;">'''Giallo'''</span> #FFFF00 |
||
*< |
*<span style="color: #ffee00; background color:#000000;">'''Giallino'''</span> #FFEE00 |
||
*< |
*<span style="color: #ff9900; background color:#000000;">'''Arancione chiaro'''</span> #FF9900 |
||
*< |
*<span style="color: #ff6600; background color:#000000;">'''Arancione scuro'''</span> #FF6600 |
||
*< |
*<span style="color: #ffff99; background color:#000000;">'''Giallo sbiadito'''</span> #FFFF99 |
||
*< |
*<span style="color: #ffcc99; background color:#000000;">'''Color pelle/color pesca'''</span> #FFCC99 |
||
==Gradiazioni di rosso== |
==Gradiazioni di rosso== |
||
*< |
*<span style="color: #ff0000; background color:#000000;">'''Rosso'''</span> #FF0000 |
||
*< |
*<span style="color: #dd3300; background color:#000000;">'''Color ruggine'''</span> #DD3300 |
||
*< |
*<span style="color: #cc3366; background color:#000000;">'''Rosso lampone'''</span> #CC3366 |
||
*< |
*<span style="color: #ff00ff; background color:#000000;">'''Rosa fuchsia'''</span> #FF00FF |
||
*< |
*<span style="color: #ff99ff; background color:#000000;">'''Rosa chiaro'''</span> #FF99FF |
||
*< |
*<span style="color: #cc00cc; background color:#000000;">'''Violetto'''</span> #CC00CC |
||
*< |
*<span style="color: #990099; background color:#000000;">'''Viola'''</span> #990099 |
||
==Gradiazioni di blu== |
==Gradiazioni di blu== |
||
*< |
*<span style="color: #0000FF; background color:#000000;">'''Blu'''</span> #0000FF |
||
*< |
*<span style="color: #0000CD; background color:#000000;">'''Blu elettrico'''</span> #0000CD |
||
*< |
*<span style="color: #000099; background color:#000000;">'''Blu scuro'''</span> #000099 |
||
*< |
*<span style="color: #000044; background color:#000000;">'''Blu scurissimo'''</span> #000044 |
||
*< |
*<span style="color: #3000D0; background color:#000000;">'''Blu leggermente violaceo'''</span> #3000D0 |
||
*< |
*<span style="color: #660099; background color:#000000;">'''Blu violaceo'''</span> #660099 |
||
*< |
*<span style="color: #009999; background color:#000000;">'''Blu marino'''</span> #009999 |
||
*< |
*<span style="color: #00FFFF; background color:#000000;">'''Turchese'''</span> #00FFFF |
||
*< |
*<span style="color: #99FFFF; background color:#000000;">'''Celeste'''</span> #99FFFF |
||
==Gradiazioni di verde== |
==Gradiazioni di verde== |
||
*< |
*<span style="color: #00cc00; background color:#000000;">'''Verde'''</span> #00CC00 |
||
*< |
*<span style="color: #00ff00; background color:#000000;">'''Verde chiaro'''</span> #00FF00 |
||
*< |
*<span style="color: #009900; background color:#000000;">'''Verde scuro'''</span> #009900 |
||
*< |
*<span style="color: #ccff00; background color:#000000;">'''Verde limone'''</span> #CCFF00 |
||
*< |
*<span style="color: #cccc00; background color:#000000;">'''Verde marcio'''</span> #CCCC00 |
||
*< |
*<span style="color: #999900; background color:#000000;">'''Verde oliva o marcio scuro'''</span> #999900 |
||
*< |
*<span style="color: #99ff99; background color:#000000;">'''Verde pastello'''</span> #99FF99 |
||
==Gradiazioni di marrone== |
==Gradiazioni di marrone== |
||
*< |
*<span style="color: #993300; background color:#000000;">'''Marrone'''</span> #993300 |
||
*< |
*<span style="color: #CC6600; background color:#000000;">'''Marrone chiaro'''</span> #CC6600 |
||
*< |
*<span style="color: #660000; background color:#000000;">'''Marrone scuro'''</span> #660000 |
||
*< |
*<span style="color: #CC3300; background color:#000000;">'''Terra bruciata'''</span> #CC3300 |
||
*< |
*<span style="color: #B68437; background color:#000000;">'''Merda'''</span> #B68437 |
||
=Nomi= |
=Nomi= |
||
Se non capisci niente di grafica, puoi sempre inserire a lettere il nome del colore in inglese al posto del codice esadecimale. Ma bisogna ricordarsi di '''NON mettere il cancelletto #'''. Ecco una tabella con i nomi copiata da wikipedia: |
Se non capisci niente di grafica, puoi sempre inserire a lettere il nome del colore in inglese al posto del codice esadecimale. Ma bisogna ricordarsi di '''NON mettere il cancelletto #'''. Ecco una tabella con i nomi copiata da wikipedia: |
||
{| class="wikitable" style="font-size:90%; width:70%" |
{| class="wikitable" style="font-size:90%; width:70%; text-align: center;" |
||
|- |
|- |
||
!Nome |
!style="width: 8%;"|Nome |
||
!Colore |
!style="width: 17%;"|Colore |
||
!Nome |
!style="width: 8%;"|Nome |
||
!Colore |
!style="width: 17%;"|Colore |
||
!Nome |
!style="width: 8%;"|Nome |
||
!Colore |
!style="width: 17%;"|Colore |
||
!Nome |
!style="width: 8%;"|Nome |
||
!Colore |
!style="width: 17%;"|Colore |
||
|- |
|- |
||
| |
||indianred |
||
| |
| style="background-color:#CD5C5C; color:#FFFFFF; font-family:monospace;"|#CD5C5C |
||
| |
||darksalmon |
||
| |
| style="background-color:#E9967A; color:#FFFFFF; font-family:monospace;"|#E9967A |
||
| |
||lightcoral |
||
| |
| style="background-color:#F08080; color:#FFFFFF; font-family:monospace;"|#F08080 |
||
| |
||salmon |
||
| |
| style="background-color:#FA8072; color:#FFFFFF; font-family:monospace;"|#FA8072 |
||
|- |
|- |
||
| |
||orangered |
||
| |
| style="background-color:#FF4500; color:#FFFFFF; font-family:monospace;"|#FF4500 |
||
||red |
|||
|align="center" width=08%|red |
|||
| |
| style="background-color:#FF0000; color:#FFFFFF; font-family:monospace;"|#FF0000 |
||
| |
||crimson |
||
| |
| style="background-color:#DC143C; color:#FFFFFF; font-family:monospace;"|#DC143C |
||
| |
||firebrick |
||
| |
| style="background-color:#B22222; color:#FFFFFF; font-family:monospace;"|#B22222 |
||
|- |
|- |
||
| |
||darkred |
||
| |
| style="background-color:#8B0000; color:#FFFFFF; font-family:monospace;"|#8B0000 |
||
| |
||mediumvioletred |
||
| |
| style="background-color:#C71585; color:#FFFFFF; font-family:monospace;"|#C71585 |
||
||pink |
|||
|align="center" width=08%|pink |
|||
| |
| style="background-color:#FFC0CB; font-family:monospace;"|#FFC0CB |
||
| |
||lightpink |
||
| |
| style="background-color:#FFB6C1; font-family:monospace;"|#FFB6C1 |
||
|- |
|- |
||
| |
||hotpink |
||
| |
| style="background-color:#FF69B4; font-family:monospace;"|#FF69B4 |
||
| |
||deeppink |
||
| |
| style="background-color:#FF1493; font-family:monospace;"|#FF1493 |
||
| |
||palevioletred |
||
| |
| style="background-color:#DB7093; font-family:monospace;"|#DB7093 |
||
| |
||darkkhaki |
||
| |
| style="background-color:#BDB76B; font-family:monospace;"|#BDB76B |
||
|- |
|- |
||
| |
||khaki |
||
| |
| style="background-color:#F0E68C; font-family:monospace;"|#F0E68C |
||
| |
||palegoldenrod |
||
| |
| style="background-color:#EEE8AA; font-family:monospace;"|#EEE8AA |
||
| |
||lightgoldenrodyellow |
||
| |
| style="background-color:#FAFAD2; font-family:monospace;"|#FAFAD2 |
||
| |
||lightyellow |
||
| |
| style="background-color:#FFFFE0; font-family:monospace;"|#FFFFE0 |
||
|- |
|- |
||
| |
||lemonchiffon |
||
| |
| style="background-color:#FFFACD; font-family:monospace;"|#FFFACD |
||
| |
||yellow |
||
| |
| style="background-color:#FFFF00; font-family:monospace;"|#FFFF00 |
||
||gold |
|||
|align="center" width=08%|gold |
|||
| |
| style="background-color:#FFD700; font-family:monospace;"|#FFD700 |
||
| |
||papayawhip |
||
| |
| style="background-color:#FFEFD5; font-family:monospace;"|#FFEFD5 |
||
|- |
|- |
||
| |
||moccasin |
||
| |
| style="background-color:#FFE4B5; font-family:monospace;"|#FFE4B5 |
||
| |
||peachpuff |
||
| |
| style="background-color:#FFDAB9; font-family:monospace;"|#FFDAB9 |
||
||cyan |
|||
|align="center" width=08%|cyan |
|||
| |
| style="background-color:#00FFFF; font-family:monospace;"|#00FFFF |
||
||aqua |
|||
|align="center" width=08%|aqua |
|||
| |
| style="background-color:#00FFFF; font-family:monospace;"|#00FFFF |
||
|- |
|- |
||
| |
||aquamarine |
||
| |
| style="background-color:#7FFFD4; font-family:monospace;"|#7FFFD4 |
||
| |
||turquoise |
||
| |
| style="background-color:#40E0D0; font-family:monospace;"|#40E0D0 |
||
| |
||mediumturquoise |
||
| |
| style="background-color:#48D1CC; font-family:monospace;"|#48D1CC |
||
| |
||darkturquoise |
||
| |
| style="background-color:#00CED1; font-family:monospace;"|#00CED1 |
||
|- |
|- |
||
| |
||cadetblue |
||
| |
| style="background-color:#5F9EA0; color:#FFFFFF; font-family:monospace;"|#5F9EA0 |
||
| |
||slategray |
||
| |
| style="background-color:#708090; color:#FFFFFF; font-family:monospace;"|#708090 |
||
| |
||lightcyan |
||
| |
| style="background-color:#E0FFFF; font-family:monospace;"|#E0FFFF |
||
| |
||paleturquoise |
||
| |
| style="background-color:#AFEEEE; font-family:monospace;"|#AFEEEE |
||
|- |
|- |
||
| |
||powderblue |
||
| |
| style="background-color:#B0E0E6; font-family:monospace;"|#B0E0E6 |
||
| |
||lightsteelblue |
||
| |
| style="background-color:#B0C4DE; font-family:monospace;"|#B0C4DE |
||
| |
||steelblue |
||
| |
| style="background-color:#4682B4; color:#FFFFFF; font-family:monospace;"|#4682B4 |
||
| |
||lightblue |
||
| |
| style="background-color:#ADD8E6; font-family:monospace;"|#ADD8E6 |
||
|- |
|- |
||
| |
||skyblue |
||
| |
| style="background-color:#87CEEB; font-family:monospace;"|#87CEEB |
||
| |
||lightskyblue |
||
| |
| style="background-color:#87CEFA; font-family:monospace;"|#87CEFA |
||
| |
||deepskyblue |
||
| |
| style="background-color:#00BFFF; font-family:monospace;"|#00BFFF |
||
| |
||cornflowerblue |
||
| |
| style="background-color:#6495ED; font-family:monospace;"|#6495ED |
||
|- |
|- |
||
| |
||royalblue |
||
| |
| style="background-color:#4169E1; font-family:monospace;"|#4169E1 |
||
| |
||mediumslateblue |
||
| |
| style="background-color:#7B68EE; font-family:monospace;"|#7B68EE |
||
| |
||dodgerblue |
||
| |
| style="background-color:#1E90FF; font-family:monospace;"|#1E90FF |
||
||blue |
|||
|align="center" width=08%|blue |
|||
| |
| style="background-color:#0000FF; color:#FFFFFF; font-family:monospace;"|#0000FF |
||
|- |
|- |
||
| |
||mediumblue |
||
| |
| style="background-color:#0000CD; color:#FFFFFF; font-family:monospace;"|#0000CD |
||
| |
||darkblue |
||
| |
| style="background-color:#00008B; color:#FFFFFF; font-family:monospace;"|#00008B |
||
||navy |
|||
|align="center" width=08%|navy |
|||
| |
| style="background-color:#000080; color:#FFFFFF; font-family:monospace;"|#000080 |
||
| |
||midnightblue |
||
| |
| style="background-color:#191970; color:#FFFFFF; font-family:monospace;"|#191970 |
||
|- |
|- |
||
| |
||lightsalmon |
||
| |
| style="background-color:#FFA07A; font-family:monospace;"|#FFA07A |
||
| |
||orange |
||
| |
| style="background-color:#FFA500; font-family:monospace;"|#FFA500 |
||
| |
||darkorange |
||
| |
| style="background-color:#FF8C00; font-family:monospace;"|#FF8C00 |
||
| |
||coral |
||
| |
| style="background-color:#FF7F50; font-family:monospace;"|#FF7F50 |
||
|- |
|- |
||
| |
||tomato |
||
| |
| style="background-color:#FF6347; font-family:monospace;"|#FF6347 |
||
| |
||orangered |
||
| |
| style="background-color:#FF4500; font-family:monospace;"|#FF4500 |
||
| |
||aquamarine |
||
| |
| style="background-color:#7FFFAD4; font-family:monospace;"|#7FFFD4 |
||
| |
||mediumspringgreen |
||
| |
| style="background-color:#00FA9A; font-family:monospace;"|#00FA9A |
||
|- |
|- |
||
| |
||springgreen |
||
| |
| style="background-color:#00FF7F; font-family:monospace;"|#00FF7F |
||
| |
||palegreen |
||
| |
| style="background-color:#98FB98; font-family:monospace;"|#98FB98 |
||
| |
||greenyellow |
||
| |
| style="background-color:#ADFF2F; font-family:monospace;"|#ADFF2F |
||
| |
||chartreuse |
||
| |
| style="background-color:#7FFF00; font-family:monospace;"|#7FFF00 |
||
|- |
|- |
||
| |
||lawngreen |
||
| |
| style="background-color:#7CFC00; font-family:monospace;"|#7CFC00 |
||
||lime |
|||
|align="center" width=08%|lime |
|||
| |
| style="background-color:#00FF00; font-family:monospace;"|#00FF00 |
||
| |
||lightgreen |
||
| |
| style="background-color:#90EE90; font-family:monospace;"|#90EE90 |
||
| |
||yellowgreen |
||
| |
| style="background-color:#9ACD32; font-family:monospace;"|#9ACD32 |
||
|- |
|- |
||
| |
||limegreen |
||
| |
| style="background-color:#32CD32; font-family:monospace;"|#32CD32 |
||
| |
||mediumseagreen |
||
| |
| style="background-color:#3CB371; font-family:monospace;"|#3CB371 |
||
| |
||darkseagreen |
||
| |
| style="background-color:#8FBC8F; font-family:monospace;"|#8FBC8F |
||
| |
||forestgreen |
||
| |
| style="background-color:#228B22; color:#FFFFFF; font-family:monospace;"|#228B22 |
||
|- |
|- |
||
| |
||seagreen |
||
| |
| style="background-color:#2E8B57; color:#FFFFFF; font-family:monospace;"|#2E8B57 |
||
| |
||green |
||
| |
| style="background-color:#008000; color:#FFFFFF; font-family:monospace;"|#008000 |
||
| |
||olivedrab |
||
| |
| style="background-color:#6B8E23; color:#FFFFFF; font-family:monospace;"|#6B8E23 |
||
| |
||olive |
||
| |
| style="background-color:#808000; color:#FFFFFF; font-family:monospace;"|#808000 |
||
|- |
|- |
||
| |
||darkolivegreen |
||
| |
| style="background-color:#556B2F; color:#FFFFFF; font-family:monospace;"|#556B2F |
||
| |
||darkgreen |
||
| |
| style="background-color:#006400; color:#FFFFFF; font-family:monospace;"|#006400 |
||
| |
||mediumaquamarine |
||
| |
| style="background-color:#66CDAA; font-family:monospace;"|#66CDAA |
||
| |
||turquoise |
||
| |
| style="background-color:#40E0D0; font-family:monospace;"|#40E0D0 |
||
|- |
|- |
||
| |
||lightseagreen |
||
| |
| style="background-color:#20B2AA; font-family:monospace;"|#20B2AA |
||
| |
||darkcyan |
||
| |
| style="background-color:#008B8B; color:#FFFFFF; font-family:monospace;"|#008B8B |
||
||teal |
|||
|align="center" width=08%|teal |
|||
| |
| style="background-color:#008080; color:#FFFFFF; font-family:monospace;"|#008080 |
||
| |
||lavender |
||
| |
| style="background-color:#E6E6FA; font-family:monospace;"|#E6E6FA |
||
|- |
|- |
||
| |
||thistle |
||
| |
| style="background-color:#D8BFD8; font-family:monospace;"|#D8BFD8 |
||
||plum |
|||
|align="center" width=08%|plum |
|||
| |
| style="background-color:#DDA0DD; font-family:monospace;"|#DDA0DD |
||
| |
||violet |
||
| |
| style="background-color:#EE82EE; font-family:monospace;"|#EE82EE |
||
| |
||fuchsia |
||
| |
| style="background-color:#FF00FF; font-family:monospace;"|#FF00FF |
||
|- |
|- |
||
| |
||magenta |
||
| |
| style="background-color:#FF00FF; font-family:monospace;"|#FF00FF |
||
| |
||orchid |
||
| |
| style="background-color:#DA70D6; font-family:monospace;"|#DA70D6 |
||
| |
||mediumorchid |
||
| |
| style="background-color:#BA55D3; font-family:monospace;"|#BA55D3 |
||
| |
||darkorchid |
||
| |
| style="background-color:#9932CC; color:#FFFFFF; font-family:monospace;"|#9932CC |
||
|- |
|- |
||
| |
||blueviolet |
||
| |
| style="background-color:#8A2BE2; color:#FFFFFF; font-family:monospace;"|#8A2BE2 |
||
| |
||darkviolet |
||
| |
| style="background-color:#9400D3; color:#FFFFFF; font-family:monospace;"|#9400D3 |
||
| |
||mediumpurple |
||
| |
| style="background-color:#9370DB; color:#FFFFFF; font-family:monospace;"|#9370DB |
||
| |
||slateblue |
||
| |
| style="background-color:#6A5ACD; color:#FFFFFF; font-family:monospace;"|#6A5ACD |
||
|- |
|- |
||
| |
||purple |
||
| |
| style="background-color:#800080; color:#FFFFFF; font-family:monospace;"|#800080 |
||
| |
||darkmagenta |
||
| |
| style="background-color:#8B008B; color:#FFFFFF; font-family:monospace;"|#8B008B |
||
| |
||darkslateblue |
||
| |
| style="background-color:#483D8B; color:#FFFFFF; font-family:monospace;"|#483D8B |
||
| |
||indigo |
||
| |
| style="background-color:#4B0082; color:#FFFFFF; font-family:monospace;"|#4B0082 |
||
|- |
|- |
||
| |
||honeydew |
||
| |
| style="background-color:#F0FFF0; font-family:monospace;"|#F0FFF0 |
||
| |
||mintcream |
||
| |
| style="background-color:#F5FFFA; font-family:monospace;"|#F5FFFA |
||
| |
||azure |
||
| |
| style="background-color:#F0FFFF; font-family:monospace;"|#F0FFFF |
||
| |
||aliceblue |
||
| |
| style="background-color:#F0F8FF; font-family:monospace;"|#F0F8FF |
||
|- |
|- |
||
| |
||ghostwhite |
||
| |
| style="background-color:#F8F8FF; font-family:monospace;"|#F8F8FF |
||
| |
||whitesmoke |
||
| |
| style="background-color:#F5F5F5; font-family:monospace;"|#F5F5F5 |
||
| |
||lavenderblush |
||
| |
| style="background-color:#FFF0F5; font-family:monospace;"|#FFF0F5 |
||
| |
||mistyrose |
||
| |
| style="background-color:#FFE4E1; font-family:monospace;"|#FFE4E1 |
||
|- |
|- |
||
| |
||antiquewhite |
||
| |
| style="background-color:#FAEBD7; font-family:monospace;"|#FAEBD7 |
||
| |
||seashell |
||
| |
| style="background-color:#FFF5EE; font-family:monospace;"|#FFF5EE |
||
||snow |
|||
|align="center" width=08%|snow |
|||
| |
| style="background-color:#FFFAFA; font-family:monospace;"|#FFFAFA |
||
| |
||white |
||
| |
| style="background-color:#FFFFFF; font-family:monospace;"|#FFFFFF |
||
|- |
|- |
||
| |
||beige |
||
| |
| style="background-color:#F5F5DC; font-family:monospace;"|#F5F5DC |
||
| |
||linen |
||
| |
| style="background-color:#FAF0E6; font-family:monospace;"|#FAF0E6 |
||
| |
||oldlace |
||
| |
| style="background-color:#FDF5E6; font-family:monospace;"|#FDF5E6 |
||
| |
||floralwhite |
||
| |
| style="background-color:#FFFAF0; font-family:monospace;"|#FFFAF0 |
||
|- |
|- |
||
| |
||ivory |
||
| |
| style="background-color:#FFFFF0; font-family:monospace;"|#FFFFF0 |
||
| |
||gainsboro |
||
| |
| style="background-color:#DCDCDC; font-family:monospace;"|#DCDCDC |
||
| |
||lightgrey |
||
| |
| style="background-color:#D3D3D3; font-family:monospace;"|#D3D3D3 |
||
| |
||silver |
||
| |
| style="background-color:#C0C0C0; font-family:monospace;"|#C0C0C0 |
||
|- |
|- |
||
| |
||darkgray |
||
| |
| style="background-color:#A9A9A9; font-family:monospace;"|#A9A9A9 |
||
||gray |
|||
|align="center" width=08%|gray |
|||
| |
| style="background-color:#808080; color:#FFFFFF; font-family:monospace;"|#808080 |
||
| |
||dimgray |
||
| |
| style="background-color:#696969; color:#FFFFFF; font-family:monospace;"|#696969 |
||
| |
||darkslategray |
||
| |
| style="background-color:#2F4F4F; color:#FFFFFF; font-family:monospace;"|#2F4F4F |
||
|- |
|- |
||
| |
||lightslategray |
||
| |
| style="background-color:#778899; color:#FFFFFF; font-family:monospace;"|#778899 |
||
| |
||slategray |
||
| |
| style="background-color:#708090; color:#FFFFFF; font-family:monospace;"|#708090 |
||
| |
||cornsilk |
||
| |
| style="background-color:#FFF8DC; font-family:monospace;"|#FFF8DC |
||
| |
||blanchedalmond |
||
| |
| style="background-color:#FFEBCD; font-family:monospace;"|#FFEBCD |
||
|- |
|- |
||
| |
||bisque |
||
| |
| style="background-color:#FFE4C4; font-family:monospace;"|#FFE4C4 |
||
| |
||navajowhite |
||
| |
| style="background-color:#FFDEAD; font-family:monospace;"|#FFDEAD |
||
| |
||wheat |
||
| |
| style="background-color:#F5DEB3; font-family:monospace;"|#F5DEB3 |
||
| |
||sandybrown |
||
| |
| style="background-color:#F4A460; font-family:monospace;"|#F4A460 |
||
|- |
|- |
||
| |
||goldenrod |
||
| |
| style="background-color:#DAA520; font-family:monospace;"|#DAA520 |
||
| |
||darkgoldenrod |
||
| |
| style="background-color:#B8860B; font-family:monospace;"|#B8860B |
||
||peru |
|||
|align="center" width=08%|peru |
|||
| |
| style="background-color:#CD853B; font-family:monospace;"|#ED853F |
||
| |
||chocolate |
||
| |
| style="background-color:#D2691E; font-family:monospace;"|#D2691E |
||
|- |
|- |
||
| |
||maroon |
||
| |
| style="background-color:#800000; color:#FFFFFF; font-family:monospace;"|#800000 |
||
| |
||saddlebrown |
||
| |
| style="background-color:#8B4513; color:#FFFFFF; font-family:monospace;"|#8B4513 |
||
| |
||brown |
||
| |
| style="background-color:#A52A2A; color:#FFFFFF; font-family:monospace;"|#A52A2A |
||
| |
||sienna |
||
| |
| style="background-color:#A0522D; color:#FFFFFF; font-family:monospace;"|#A0522D |
||
|- |
|- |
||
| |
||darkred |
||
| |
| style="background-color:#8B0000; color:#FFFFFF; font-family:monospace;"|#8b0000 |
||
| |
||burlywood |
||
| |
| style="background-color:#DEB887; font-family:monospace;"|#DEB887 |
||
||tan |
|||
|align="center" width=08%|tan |
|||
| |
| style="background-color:#D2B48C; font-family:monospace;"|#D2B48C |
||
| |
||rosybrown |
||
| |
| style="background-color:#BC8F8F; font-family:monospace;"|#BC8F8F |
||
|- |
|- |
||
| |
||black |
||
| |
| style="background-color:#000000; color:#FFFFFF; font-family:monospace;"|#000000 |
||
| |
|| |
||
| |
| style="background-color:#FFFFFF; color:#FFFFFF; font-family:monospace;"| |
||
| |
|| |
||
| |
| style="background-color:#FFFFFF; color:#FFFFFF; font-family:monospace;"| |
||
| |
|| |
||
| |
| style="background-color:#FFFFFF; color:#FFFFFF; font-family:monospace;"| |
||
|- |
|- |
||
|} |
|} |
Versione delle 00:16, 24 apr 2011
Benvenuto nella Guida dei colori esadecimali RGB. Infatti anche per i cerebrolesi come te, che non hanno ancora imparato a leggere e a scrivere, abbiamo riservato uno spazio tutto da colorare. Ricorda però: non uscire dagli spazi!
Come utilizzarli
Per creare una semplice scritta colorata puoi utilizzare il template {{Colore}}
inserendo {{Colore|#codice esadecimale|testo da colorare}}.
Volendo potete copiare i colori dagli esempi più sotto, ma se volete imparare ad usarli meglio leggere questa guida.
Basi
Questo sistema di colori (come avrete capito) è formato da # e da 6 cifre. Queste 6 cifre si dividono in tre parti (#123456):
- La prima coppia controlla la quantità di rosso.
- La seconda coppia controlla il verde.
- La terza coppia controlla il blu.
Modificando queste cifre potrai decidere la quantità di rosso, verde o blu da mettere nel colore.
Sai come funzionano i numeri esadecimali? No? Bene, allora te lo spieghiamo noi. Le cifre vanno da 0 a 9 e poi dalla A fino alla F. Se metti 0 vuole dire che la quantità di colore è nulla e se metti F vuole dire che la quantità è massima. La A viene subito dopo il 9.
IMPORTANTE: La tavolazza di colori che si usa nei computer NON è la stessa delle tempere che hai usato a scuola. Infatti nei computer rosso+verde=giallo, rosso+blu=rosa, verde+blu=turchese.
Infatti nei computer si usa la tavolazza RGB, mentre a visiva si usa la tavolazza CMYK (quella con ciano, magenta, giallo e nero, per chi bigiava Educazione Artistica alle medie).
Chiaro e scuro
Per modificare la luminosità dei colori bisogna ricordarsi un fatto; se i colori del codice esadecimale sono tutti al massimo (#FFFFFF) si ottiene il bianco, mentre se sono nulli (#000000) si ottiene il nero. Quindi (al contrario della tavolazza classica) nei computer il bianco è il colore positivo, mentre il nero è quello negativo.
Quindi, in ogni caso, se la quantità di rosso, di verde e di blu sono le stesse, avrai sempre una gradazione di grigio.
Per cambiare la luminosità di un colore devi quindi fare in modo che le cifre si avvicinano di più al nero (#000000) se vuoi che il colore sia più scuro o al bianco (#FFFFFF) se vuoi che il colore sia più chiaro.
Quindi se vuoi fare un rosso (#FF0000) più chiaro (visto che la parte del rosso è al massimo), devi modificare il verde e il blu. Quindi se metti #FF6666 otterrai un colore come questo. Se invece vuoi un rosso più scuro devi togliere un po' di rosso al codice. Quindi se metti #990000 otterrai un colore come questo.
Più sfumature
Ora voi vi chiederete: ma se è così non è più facile controllare solo tre cifre, una per il rosso, una per il verde, e una per il blu?
Bella domanda. Infatti puoi anche semplificarti la vita controllando solo tre cifre, quindi se metti #FF0000 oppure #F00 non cambia niente. Ma se usi tutte sei puoi avere molte più sfumature. Per fare questo devi cambiare la seconda cifra per ogni coppia (la meno importante).
Facciamo ancora l'esempio con il rosso, se fai #FF0000 avrai il rosso puro. ma se fai #F00000 avrai un rosso un pelo più scuro.
Tieni presente che se usi la combinazione di tre cifre avrai in tutto 3375 combinazioni di colori. Se usi tutte sei le cifre potrai usare ben 11390625 diverse sfumature. Altro che la solita scatola di pastelli da 36 pezzi...
Esempi
Qui ci sono diversi esempi di colori che potete usare per capire meglio la guida o per saltarla del tutto.
Gradiazioni di grigio
- Nero #000000
- Grigio molto scuro #333333
- Grigio scuro #666666
- Grigio metallo #999999
- Grigio finestra di windows #BCBCBC
- Grigio chiaro #C8C8C8
- Bianco #FFFFFF
Gradiazioni di giallo e arancione
- Giallo #FFFF00
- Giallino #FFEE00
- Arancione chiaro #FF9900
- Arancione scuro #FF6600
- Giallo sbiadito #FFFF99
- Color pelle/color pesca #FFCC99
Gradiazioni di rosso
- Rosso #FF0000
- Color ruggine #DD3300
- Rosso lampone #CC3366
- Rosa fuchsia #FF00FF
- Rosa chiaro #FF99FF
- Violetto #CC00CC
- Viola #990099
Gradiazioni di blu
- Blu #0000FF
- Blu elettrico #0000CD
- Blu scuro #000099
- Blu scurissimo #000044
- Blu leggermente violaceo #3000D0
- Blu violaceo #660099
- Blu marino #009999
- Turchese #00FFFF
- Celeste #99FFFF
Gradiazioni di verde
- Verde #00CC00
- Verde chiaro #00FF00
- Verde scuro #009900
- Verde limone #CCFF00
- Verde marcio #CCCC00
- Verde oliva o marcio scuro #999900
- Verde pastello #99FF99
Gradiazioni di marrone
- Marrone #993300
- Marrone chiaro #CC6600
- Marrone scuro #660000
- Terra bruciata #CC3300
- Merda #B68437
Nomi
Se non capisci niente di grafica, puoi sempre inserire a lettere il nome del colore in inglese al posto del codice esadecimale. Ma bisogna ricordarsi di NON mettere il cancelletto #. Ecco una tabella con i nomi copiata da wikipedia:
Nome | Colore | Nome | Colore | Nome | Colore | Nome | Colore |
---|---|---|---|---|---|---|---|
indianred | #CD5C5C | darksalmon | #E9967A | lightcoral | #F08080 | salmon | #FA8072 |
orangered | #FF4500 | red | #FF0000 | crimson | #DC143C | firebrick | #B22222 |
darkred | #8B0000 | mediumvioletred | #C71585 | pink | #FFC0CB | lightpink | #FFB6C1 |
hotpink | #FF69B4 | deeppink | #FF1493 | palevioletred | #DB7093 | darkkhaki | #BDB76B |
khaki | #F0E68C | palegoldenrod | #EEE8AA | lightgoldenrodyellow | #FAFAD2 | lightyellow | #FFFFE0 |
lemonchiffon | #FFFACD | yellow | #FFFF00 | gold | #FFD700 | papayawhip | #FFEFD5 |
moccasin | #FFE4B5 | peachpuff | #FFDAB9 | cyan | #00FFFF | aqua | #00FFFF |
aquamarine | #7FFFD4 | turquoise | #40E0D0 | mediumturquoise | #48D1CC | darkturquoise | #00CED1 |
cadetblue | #5F9EA0 | slategray | #708090 | lightcyan | #E0FFFF | paleturquoise | #AFEEEE |
powderblue | #B0E0E6 | lightsteelblue | #B0C4DE | steelblue | #4682B4 | lightblue | #ADD8E6 |
skyblue | #87CEEB | lightskyblue | #87CEFA | deepskyblue | #00BFFF | cornflowerblue | #6495ED |
royalblue | #4169E1 | mediumslateblue | #7B68EE | dodgerblue | #1E90FF | blue | #0000FF |
mediumblue | #0000CD | darkblue | #00008B | navy | #000080 | midnightblue | #191970 |
lightsalmon | #FFA07A | orange | #FFA500 | darkorange | #FF8C00 | coral | #FF7F50 |
tomato | #FF6347 | orangered | #FF4500 | aquamarine | #7FFFD4 | mediumspringgreen | #00FA9A |
springgreen | #00FF7F | palegreen | #98FB98 | greenyellow | #ADFF2F | chartreuse | #7FFF00 |
lawngreen | #7CFC00 | lime | #00FF00 | lightgreen | #90EE90 | yellowgreen | #9ACD32 |
limegreen | #32CD32 | mediumseagreen | #3CB371 | darkseagreen | #8FBC8F | forestgreen | #228B22 |
seagreen | #2E8B57 | green | #008000 | olivedrab | #6B8E23 | olive | #808000 |
darkolivegreen | #556B2F | darkgreen | #006400 | mediumaquamarine | #66CDAA | turquoise | #40E0D0 |
lightseagreen | #20B2AA | darkcyan | #008B8B | teal | #008080 | lavender | #E6E6FA |
thistle | #D8BFD8 | plum | #DDA0DD | violet | #EE82EE | fuchsia | #FF00FF |
magenta | #FF00FF | orchid | #DA70D6 | mediumorchid | #BA55D3 | darkorchid | #9932CC |
blueviolet | #8A2BE2 | darkviolet | #9400D3 | mediumpurple | #9370DB | slateblue | #6A5ACD |
purple | #800080 | darkmagenta | #8B008B | darkslateblue | #483D8B | indigo | #4B0082 |
honeydew | #F0FFF0 | mintcream | #F5FFFA | azure | #F0FFFF | aliceblue | #F0F8FF |
ghostwhite | #F8F8FF | whitesmoke | #F5F5F5 | lavenderblush | #FFF0F5 | mistyrose | #FFE4E1 |
antiquewhite | #FAEBD7 | seashell | #FFF5EE | snow | #FFFAFA | white | #FFFFFF |
beige | #F5F5DC | linen | #FAF0E6 | oldlace | #FDF5E6 | floralwhite | #FFFAF0 |
ivory | #FFFFF0 | gainsboro | #DCDCDC | lightgrey | #D3D3D3 | silver | #C0C0C0 |
darkgray | #A9A9A9 | gray | #808080 | dimgray | #696969 | darkslategray | #2F4F4F |
lightslategray | #778899 | slategray | #708090 | cornsilk | #FFF8DC | blanchedalmond | #FFEBCD |
bisque | #FFE4C4 | navajowhite | #FFDEAD | wheat | #F5DEB3 | sandybrown | #F4A460 |
goldenrod | #DAA520 | darkgoldenrod | #B8860B | peru | #ED853F | chocolate | #D2691E |
maroon | #800000 | saddlebrown | #8B4513 | brown | #A52A2A | sienna | #A0522D |
darkred | #8b0000 | burlywood | #DEB887 | tan | #D2B48C | rosybrown | #BC8F8F |
black | #000000 |
Link utili
- Provenienza della tabella
- Qui trovi ben 4913 tipi diversi di sfumature, per i masochisti
- Qui invece trovi meno sfumature, ma sono messe in un agevole ordine alfabetico, per persone ancora di più masochiste.
- Template:Colore, per colorare i caratteri.
Introduzione · Registrazione · Linee guida · Modificare una pagina · Formattazione · Gestione dei link · Immagini · Discussioni · Namespace · Template · Portali · Spostare una pagina · Spostare un file · Vandalizzare · Conclusione
Disclaimer · Politica di cancellazione e ban · Glossario