Aiuto:Colori: differenze tra le versioni

Vai alla navigazione Vai alla ricerca
Naviga nella cronologia in modo interattivo
Contenuto aggiunto Contenuto cancellato
VisualeWikitesto
(sostituisco {{cat}} con Categoria)
 
(35 versioni intermedie di 19 utenti non mostrate)
Riga 4: Riga 4:


==Come utilizzarli==
==Come utilizzarli==
Per creare una semplice scritta colorata puoi utilizzare il template {{Template|Colore}} inserendo <nowiki>{{Colore|#codice esadecimale|testo da colorare}}</nowiki>.

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 ('''#<font style="color: #ff0000">12</font><font style="color: #00ff00">34</font><font style="color: #0000ff">56</font>'''):
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 <font style="color: #ff0000">'''rosso'''</font>.
*La prima coppia controlla la quantità di {{Colore|#FF0000|'''rosso'''}}.
*La seconda coppia controlla il <font style="color: #00ff00">'''verde'''</font>.
*La seconda coppia controlla il {{Colore|#00FF00|'''verde'''}}.
*La terza coppia controlla il <font style="color: #0000ff">'''blu'''</font>.
*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 ''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.
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 <font style="color: #ff0000">'''rosso'''</font>+<font style="color: #00ff00">'''verde'''</font>=<font style="color: #ffff00">'''giallo'''</font>, <font style="color: #ff0000">'''rosso'''</font>+<font style="color: #0000ff">'''blu'''</font>=<font style="color: #ff00ff">'''rosa'''</font>, <font style="color: #00ff00">'''verde'''</font>+<font style="color: #0000ff">'''blu'''</font>=<font style="color: #00ffff">'''turchese'''</font>.
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 (#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.
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 gradiazione di grigio.
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.
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 <font style="color: #ff6666">'''questo'''</font>. Se invece vuoi un rosso più scuro devi togliere un po' di rosso al codice. Quindi se metti #990000 otterrai un colore come <font style="color: #990000">'''questo'''</font>
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 #ff0000 oppure #f00 non cambia niente. Ma se usi tutte sei puoi avere molte più sfumature.
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 {{Colore|#ff0000|'''rosso puro'''}}. ma se fai #F00000 avrai un {{Colore|#F00000|'''rosso un pelo più scuro'''}}.
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 <font style="color: #ff0000">'''rosso puro'''</font>. ma se fai #f00000 avrai un <font style="color: #f00000">'''rosso un pelo più scuro'''</font>.


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 41: Riga 41:
=Esempi=
=Esempi=
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==
==Gradazioni di grigio==
*<font style="color: #000000; background color:#000000;">'''Nero'''</font> #000000
*<span style="color: #000000; background color:#000000;">'''Nero'''</span> #000000
*<font style="color: #666666; background color:#000000;">'''Grigio scuro'''</font> #666666
*<span style="color: #333333; background color:#000000;">'''Grigio molto scuro'''</span> #333333
*<font style="color: #bcbcbc; background color:#000000;">'''Grigio finestra di windows'''</font> #bcbcbc
*<span style="color: #666666; background color:#000000;">'''Grigio scuro'''</span> #666666
*<font style="color: #cccccc; background color:#000000;">'''Grigio chiaro'''</font> #cccccc
*<span style="color: #999999; background color:#000000;">'''Grigio metallo'''</span> #999999
*<font style="color: #ffffff; background color:#000000;">'''Bianco'''</font> #ffffff
*<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

==Gradazioni 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

==Gradazioni 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 fucsia'''</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

==Gradazioni 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 giallo e arancione==
==Gradazioni di verde==
*<font style="color: #ffff00; background color:#000000;">'''Giallo'''</font> #ffff00
*<span style="color: #00cc00; background color:#000000;">'''Verde'''</span> #00CC00
*<font style="color: #ffee00; background color:#000000;">'''Giallino'''</font> #ffee00
*<span style="color: #00ff00; background color:#000000;">'''Verde chiaro'''</span> #00FF00
*<font style="color: #ff9900; background color:#000000;">'''Arancione chiaro'''</font> #ff9900
*<span style="color: #009900; background color:#000000;">'''Verde scuro'''</span> #009900
*<font style="color: #ff6600; background color:#000000;">'''Arancione scuro'''</font> #ff6600
*<span style="color: #ccff00; background color:#000000;">'''Verde limone'''</span> #CCFF00
*<font style="color: #ffff99; background color:#000000;">'''Giallo sbiadito'''</font> #ffff99
*<span style="color: #cccc00; background color:#000000;">'''Verde marcio'''</span> #CCCC00
*<font style="color: #ffcc99; background color:#000000;">'''Color pelle/color pesca'''</font> #ffcc99
*<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 rosso==
*<font style="color: #ff0000; background color:#000000;">'''Rosso'''</font> #ff0000
*<font style="color: #dd3300; background color:#000000;">'''Color ruggine'''</font> #dd3300
*<font style="color: #cc3366; background color:#000000;">'''Rosso lampone'''</font> #cc3366
*<font style="color: #ff00ff; background color:#000000;">'''Rosa fuchsia'''</font> #ff00ff
*<font style="color: #ff99ff; background color:#000000;">'''Rosa chiaro'''</font> #ff99ff
*<font style="color: #cc00cc; background color:#000000;">'''Violetto'''</font> #cc00cc
*<font style="color: #990099; background color:#000000;">'''Viola'''</font> #990099


==Gradiazioni di blu==
==Gradazioni di marrone==
*<font style="color: #0000ff; background color:#000000;">'''Blu'''</font> #0000ff
*<span style="color: #993300; background color:#000000;">'''Marrone'''</span> #993300
*<font style="color: #0000cd; background color:#000000;">'''Blu elettrico'''</font> #0000cd
*<span style="color: #CC6600; background color:#000000;">'''Marrone chiaro'''</span> #CC6600
*<font style="color: #000099; background color:#000000;">'''Blu scuro'''</font> #000099
*<span style="color: #660000; background color:#000000;">'''Marrone scuro'''</span> #660000
*<font style="color: #000044; background color:#000000;">'''Blu scurissimo'''</font> #000044
*<span style="color: #CC3300; background color:#000000;">'''Terra bruciata'''</span> #CC3300
*<font style="color: #660099; background color:#000000;">'''Blu violaceo'''</font> #660099
*<span style="color: #B68437; background color:#000000;">'''Merda'''</span> #B68437
*<font style="color: #009999; background color:#000000;">'''Blu marino'''</font> #009999
*<font style="color: #00ffff; background color:#000000;">'''Turchese'''</font> #00ffff
*<font style="color: #99ffff; background color:#000000;">'''Celeste'''</font> #99ffff
==Gradiazioni di verde==
*<font style="color: #00cc00; background color:#000000;">'''Verde'''</font> #00cc00
*<font style="color: #00ff00; background color:#000000;">'''Verde chiaro'''</font> #00ff00
*<font style="color: #009900; background color:#000000;">'''Verde scuro'''</font> #009900
*<font style="color: #ccff00; background color:#000000;">'''Verde limone'''</font> #ccff00
*<font style="color: #cccc00; background color:#000000;">'''Verde marcio'''</font> #cccc00
*<font style="color: #999900; background color:#000000;">'''Verde oliva o marcio scuro'''</font> #999900
*<font style="color: #99ff99; background color:#000000;">'''Verde pastello'''</font> #99ff99


=Nomi=
==Gradiazioni di marrone==
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:
*<font style="color: #993300; background color:#000000;">'''Marrone'''</font> #993300
{| class="wikitable" style="font-size:90%; width:70%; text-align: center;"
*<font style="color: #cc6600; background color:#000000;">'''Marrone chiaro'''</font> #cc6600
|-
*<font style="color: #660000; background color:#000000;">'''Marrone scuro'''</font> #660000
!style="width: 8%;"|Nome
*<font style="color: #cc3300; background color:#000000;">'''Terra bruciata'''</font> #cc3300
!style="width: 17%;"|Colore
*<font style="color: #b68437; background color:#000000;">'''Merda'''</font> #b68437
!style="width: 8%;"|Nome
!style="width: 17%;"|Colore
!style="width: 8%;"|Nome
!style="width: 17%;"|Colore
!style="width: 8%;"|Nome
!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
| 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
| 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
| 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
| style="background-color:#00FFFF; font-family:monospace;"|#00FFFF
||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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
||&nbsp;
| style="background-color:#FFFFFF; color:#FFFFFF; font-family:monospace;"|&nbsp;
||&nbsp;
| style="background-color:#FFFFFF; color:#FFFFFF; font-family:monospace;"|&nbsp;
||&nbsp;
| style="background-color:#FFFFFF; color:#FFFFFF; font-family:monospace;"|&nbsp;
|-
|}


=Link utili=
=Link utili=
*'''[http://it.wikipedia.org/wiki/Aiuto:Tavolozza_dei_colori Per cambiare i colori usando i nomi, per i niubbi]'''
*'''[http://it.wikipedia.org/wiki/Aiuto:Tavolozza_dei_colori Provenienza della tabella]'''
*'''[http://it.wikipedia.org/wiki/Aiuto:Colori Qui trovi ben 4913 tipi diversi di sfumature, per i masochisti]'''
*'''[http://it.wikipedia.org/wiki/Aiuto:Colori Qui trovi ben 4913 tipi diversi di sfumature, per i masochisti]'''
*'''[http://it.wikipedia.org/wiki/Lista_dei_colori Qui invece trovi meno sfumature, ma sono messe in un agevole ordine alfabetico, per persone ancora di più masochiste.]'''
*'''[http://it.wikipedia.org/wiki/Lista_dei_colori Qui invece trovi meno sfumature, ma sono messe in un agevole ordine alfabetico, per persone ancora di più masochiste.]'''

Versione attuale delle 06:05, 14 nov 2020

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.

Gradazioni di grigio

  • Nero #000000
  • Grigio molto scuro #333333
  • Grigio scuro #666666
  • Grigio metallo #999999
  • Grigio finestra di windows #BCBCBC
  • Grigio chiaro #C8C8C8
  • Bianco #FFFFFF

Gradazioni di giallo e arancione

  • Giallo #FFFF00
  • Giallino #FFEE00
  • Arancione chiaro #FF9900
  • Arancione scuro #FF6600
  • Giallo sbiadito #FFFF99
  • Color pelle/color pesca #FFCC99

Gradazioni di rosso

  • Rosso #FF0000
  • Color ruggine #DD3300
  • Rosso lampone #CC3366
  • Rosa fucsia #FF00FF
  • Rosa chiaro #FF99FF
  • Violetto #CC00CC
  • Viola #990099

Gradazioni 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

Gradazioni 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

Gradazioni 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

⇐ Torna a Aiuto
Manuale di Nonciclopedia

Introduzione · Registrazione · Linee guida · Modificare una pagina · Formattazione · Gestione dei link · Immagini · Discussioni · Namespace · Template · Portali · Spostare una pagina · Spostare un file · Vandalizzare · Conclusione

Leggiti i manuali!
Leggiti i manuali!
Leggiti i manuali!
Leggiti i manuali!
Disclaimer · Politica di cancellazione e ban · Glossario
Estratto da "https://nonciclopedia.org/wiki/Aiuto:Colori?oldid=2261846"