Guida ai colori nell'HTML, e nel BB code

« Older   Newer »
  Share  
view post Posted on 7/10/2006, 01:23
Avatar

Staff

Group:
ForumFree Staff
Posts:
109,436
Location:
Slayer's Flag

Status:


I colori nell'HTML



Nelle pagine web, così come nei forum di forumfree / forumcommunity, si fa un ampio uso dei colori, si colorano paragrafi di testo o singole parole, si aggiungono colori di sfondo o si usa il colore per evidenziare i links dal testo in cui sono inserti, e i modi per rappresentare il colore nell'HTML sono due:

1) Utilizzare un nome di colore supportato dai browser, esempio:
HTML
<span style="background-color: black; color: yellow">Questo è un testo di colore giallo su fondo nero</span>

Questo è un testo di colore giallo su fondo nero

I browser più diffusi supportano attualmente 147 nomi di colore, anche se soltanto 16 di essi sono considerati colori fondamentali, potete vederli in questa tabella

blackgreensilverlime
grayolivewhiteyellow
maroonnavyredblue
purpletealfuchsiaaqua


trovate un elenco completo dei nomi di colore nella seconda parte di questa guida, I nomi dei colori nell'HTML

2) Esprimere i vari colori come una combinazione di tre colori (chiamati anche luci) fondamentali, il rosso (Red), il verde (Green) e il blu (Blue), ognuno presente in quantità che possono variare da 0 a 255, i colori ottenibili in questo modo (il sistema RGB) sono 256 x 256 x 256 = 16777216 e vengono espressi utilizzando la notazione esadecimale, cioè con un sistema numerico a base 16

DEC0123456789101112131415
ESA0123456789 A B C D E F


il che permette si esprimere tutti i valori delle tre componenti con una coppia di cifre, andando da un valore minimo di 00 (0) ad un valore massimo di FF (255) facendoli precedere da un simbolo # che indica il colore, questo è un esempio:
HTML
<span style="background-color: #000000; color: #FFFF00">Questo è un testo di colore giallo su fondo nero</span>

Questo è un testo di colore giallo su fondo nero

trovate una trattazione più dettagliata dell sistema RGB nella terza parte di questa guida I valori dei colori nell'HTML

**************************************************


La quarta e ultima parte, invece, tratterà della Colorazione del testo col BB code

Edited by kostaki - 15/2/2007, 04:19
 
Web  Top
view post Posted on 21/11/2006, 03:24
Avatar

Staff

Group:
ForumFree Staff
Posts:
109,436
Location:
Slayer's Flag

Status:


I nomi dei colori nell'HTML



In questa sezione della guida trovate una tabella che elenca 147 nomi di colore supportati dai browsers più utilizzati, nella colonna di sinistra della tabella c'è l'elenco dei nomi, in quella centrale l'equivalente valore esadecimale, a destra trovate un esempio del colore, vi ricordo che, anche se l'uso di questi nomi è possibile, solo i 16 colori fondamentali: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, e yellow fanno parte ufficialmente degli standard html e possono essere usati anche nei fogli di stile, se desiderate realizzare pagine web da validare con un validatore HTML o CSS dovete utilizzare i valori esadecimali, osservando la tabella potrete notare come, in realtà, il numero di colori ottenibili con questi sistema sia inferiore a 147, alcuni di questi colori vengono indicati con più nomi (per esempio Aqua e Cyan indicano sempre il colore #00FFFF, Fuchsia e Magenta sono il colore #FF00FF) e le varie sfumature di grigio si possono scrivere come Gray o Grey (LightSlateGray e LightSlateGrey sono due grafie diverse per lo stesso colore #778899).



Nome del coloreValore esadecimaleColore
AliceBlue#F0F8FF 
AntiqueWhite#FAEBD7 
Aqua#00FFFF 
Aquamarine#7FFFD4 
Azure#F0FFFF 
Beige#F5F5DC 
Bisque#FFE4C4 
Black#000000 
BlanchedAlmond#FFEBCD 
Blue#0000FF 
BlueViolet#8A2BE2 
Brown#A52A2A 
BurlyWood#DEB887 
CadetBlue#5F9EA0 
Chartreuse#7FFF00 
Chocolate#D2691E 
Coral#FF7F50 
CornflowerBlue#6495ED 
Cornsilk#FFF8DC 
Crimson#DC143C 
Cyan#00FFFF 
DarkBlue#00008B 
DarkCyan#008B8B 
DarkGoldenRod#B8860B 
DarkGray#A9A9A9 
DarkGrey#A9A9A9 
DarkGreen#006400 
DarkKhaki#BDB76B 
DarkMagenta#8B008B 
DarkOliveGreen#556B2F 
Darkorange#FF8C00 
DarkOrchid#9932CC 
DarkRed#8B0000 
DarkSalmon#E9967A 
DarkSeaGreen#8FBC8F 
DarkSlateBlue#483D8B 
DarkSlateGray#2F4F4F 
DarkSlateGrey#2F4F4F 
DarkTurquoise#00CED1 
DarkViolet#9400D3 
DeepPink#FF1493 
DeepSkyBlue#00BFFF 
DimGray#696969 
DimGrey#696969 
DodgerBlue#1E90FF 
FireBrick#B22222 
FloralWhite#FFFAF0 
ForestGreen#228B22 
Fuchsia#FF00FF 
Gainsboro#DCDCDC 
GhostWhite#F8F8FF 
Gold#FFD700 
GoldenRod#DAA520 
Gray#808080 
Grey#808080 
Green#008000 
GreenYellow#ADFF2F 
HoneyDew#F0FFF0 
HotPink#FF69B4 
IndianRed#CD5C5C 
Indigo#4B0082 
Ivory#FFFFF0 
Khaki#F0E68C 
Lavender#E6E6FA 
LavenderBlush#FFF0F5 
LawnGreen#7CFC00 
LemonChiffon#FFFACD 
LightBlue#ADD8E6 
LightCoral#F08080 
LightCyan#E0FFFF 
LightGoldenRodYellow#FAFAD2 
LightGray#D3D3D3 
LightGrey#D3D3D3 
LightGreen#90EE90 
LightPink#FFB6C1 
LightSalmon#FFA07A 
LightSeaGreen#20B2AA 
LightSkyBlue#87CEFA 
LightSlateGray#778899 
LightSlateGrey#778899 
LightSteelBlue#B0C4DE 
LightYellow#FFFFE0 
Lime#00FF00 
LimeGreen#32CD32 
Linen#FAF0E6 
Magenta#FF00FF 
Maroon#800000 
MediumAquaMarine#66CDAA 
MediumBlue#0000CD 
MediumOrchid#BA55D3 
MediumPurple#9370D8 
MediumSeaGreen#3CB371 
MediumSlateBlue#7B68EE 
MediumSpringGreen#00FA9A 
MediumTurquoise#48D1CC 
MediumVioletRed#C71585 
MidnightBlue#191970 
MintCream#F5FFFA 
MistyRose#FFE4E1 
Moccasin#FFE4B5 
NavajoWhite#FFDEAD 
Navy#000080 
OldLace#FDF5E6 
Olive#808000 
OliveDrab#6B8E23 
Orange#FFA500 
OrangeRed#FF4500 
Orchid#DA70D6 
PaleGoldenRod#EEE8AA 
PaleGreen#98FB98 
PaleTurquoise#AFEEEE 
PaleVioletRed#D87093 
PapayaWhip#FFEFD5 
PeachPuff#FFDAB9 
Peru#CD853F 
Pink#FFC0CB 
Plum#DDA0DD 
PowderBlue#B0E0E6 
Purple#800080 
Red#FF0000 
RosyBrown#BC8F8F 
RoyalBlue#4169E1 
SaddleBrown#8B4513 
Salmon#FA8072 
SandyBrown#F4A460 
SeaGreen#2E8B57 
SeaShell#FFF5EE 
Sienna#A0522D 
Silver#C0C0C0 
SkyBlue#87CEEB 
SlateBlue#6A5ACD 
SlateGray#708090 
SlateGrey#708090 
Snow#FFFAFA 
SpringGreen#00FF7F 
SteelBlue#4682B4 
Tan#D2B48C 
Teal#008080 
Thistle#D8BFD8 
Tomato#FF6347 
Turquoise#40E0D0 
Violet#EE82EE 
Wheat#F5DEB3 
White#FFFFFF 
WhiteSmoke#F5F5F5 
Yellow#FFFF00 
YellowGreen#9ACD32 


Edited by kostaki - 12/2/2007, 05:58
 
Web  Top
view post Posted on 27/11/2006, 03:53
Avatar

Staff

Group:
ForumFree Staff
Posts:
109,436
Location:
Slayer's Flag

Status:


I valori dei colori nell'HTML



Nel sistema RGB i colori vengono ottenuti con la combinazione di tre colori fondamentali, il rosso, il verde e il blu (Red, Green, Blue), che possono essere presenti con intensità variabili da 0 a 255, i colori ottenibili con questo sistema sono a 256 x 256 x 256 = 16777216.
I colori vengono però espressi utilizzando la notazione esadecimale, utilizzando cioè un sistema numerico a base 16

DEC0123456789101112131415
ESA0123456789 A B C D E F


il che ci permette di esprimere tutte le combinazioni possibili utilizzando, per tutti i colori, sei caratteri preceduti dal simbolo # (che è, nell'HTML, il simbolo che indica il colore).

I 256 valori possibili per i tre colori fondamentali vengono quindi espressi in una scala che ha, come valore più basso 00 (0) e, come valore più elevato FF (255), il colore nero, ad esempio, che è dato dalla minima intensità dei tre colori fondamentali, sarà indicato da questo codice: #000000, mentre il colore bianco, che è dato dalla massima intensità dei tre colori fondamentali, sarà indicato da questo: #FFFFFF .
Potrebbe esservi necessario, per svariati motivi, convertire i valori esadecimali in valori decimali o viceversa, ad esempio non tutti i programmi utilizzati nella grafica esprimono i colori utilizzando i valori esadecimali oppure entrambi i sistemi esadecimale / decimale, alcuni utilizzano esclusivamente i valori decimali, in questo caso convertire i tre valori decimali in esadecimali potrebbe rivelarsi una necessità (nel caso dobbiate inserire un'immagine in una pagina web in HTML), per effettuare questa conversione in modo automatico esistono diversi programmi gratuiti facilmente reperibili in rete, oppure, se utilizzate windows come sistema operativo, potete effettuare facilmente la conversione utilizzando la calcolatrice incorporata (in modalità scientifica), in alternativa potete utilizare la tabella sottostante, dove trovate tutti i valori decimali da 0 a 255 (nelle colonne gialle) affiancati dai corrispondenti valori esadecimali (nelle colonne rosse)

Tabella di conversione valori decimali / esadecimali
DECHEXDECHEXDECHEXDECHEXDECHEXDECHEXDECHEXDECHEX
00032206440966012880160A0192C0224E0
10133216541976112981161A1193C1225E1
20234226642986213082162A2194C2226E2
30335236743996313183163A3195C3227E3
404362468441006413284164A4196C4228E4
505372569451016513385165A5197C5229E5
606382670461026613486166A6198C6230E6
707392771471036713587167A7199C7231E7
808402872481046813688168A8200C8232E8
909412973491056913789169A9201C9233E9
100A422A744A1066A1388A170AA202CA234EA
110B432B754B1076B1398B171AB203CB235EB
120C442C764C1086C1408C172AC204CC236EC
130D452D774D1096D1418D173AD205CD237ED
140E462E784E1106E1428E174AE206CE238EE
150F472F794F1116F1438F175AF207CF239EF
1610483080501127014490176B0208D0240F0
1711493181511137114591177B1209D1241F1
1812503282521147214692178B2210D2242F2
1913513383531157314793179B3211D3243F3
2014523484541167414894180B4212D4244F4
2115533585551177514995181B5213D5245F5
2216543686561187615096182B6214D6246F6
2317553787571197715197183B7215D7247F7
2418563888581207815298184B8216D8248F8
2519573989591217915399185B9217D9249F9
261A583A905A1227A1549A186BA218DA250FA
271B593B915B1237B1559B187BB219DB251FB
281C603C925C1247C1569C188BC220DC252FC
291D613D935D1257D1579D189BD221DD253FD
301E623E945E1267E1589E190BE222DE254FE
311F633F955F1277F1599F191BF223DF255FF


da notare che, quando i valori dei tre componenti sono costituiti da coppie di caratteri, è possibile scrivere il colore in forma abbreviata, esempio
HTML
<span style="background-color: #000; color: #FF0">Questo è un testo di colore giallo su fondo nero</span>

Questo è un testo di colore giallo su fondo nero

Anni fa computer, sistemi operativi e browsers supportavano solo una quantità limitata di colori e si dovette affrontare il problema della diversa interpretazione dello stesso codice di colore da parte di browsers installati sui diversi sistemi operativi, problema che fu risolto selezionando una serie di colori che sarebbero stati interpretati allo stesso modo da tutti i browsers / sistemi operativi.
Questo problema non si presenta più con i browser attuali e non è più necessario limitarsi ai 216 colori sicuri (safe colors), la tabella che trovate qui sotto può essere comunque una buona base di partenza per chi non abbia familiarità con l'uso dei colori nelle pagine web.

0000000000330000660000990000CC0000FF
0033000033330033660033990033CC0033FF
0066000066330066660066990066CC0066FF
0099000099330099660099990099CC0099FF
00CC0000CC3300CC6600CC9900CCCC00CCFF
00FF0000FF3300FF6600FF9900FFCC00FFFF
3300003300333300663300993300CC3300FF
3333003333333333663333993333CC3333FF
3366003366333366663366993366CC3366FF
3399003399333399663399993399CC3399FF
33CC0033CC3333CC6633CC9933CCCC33CCFF
33FF0033FF3333FF6633FF9933FFCC33FFFF
6600006600336600666600996600CC6600FF
6633006633336633666633996633CC6633FF
6666006666336666666666996666CC6666FF
6699006699336699666699996699CC6699FF
66CC0066CC3366CC6666CC9966CCCC66CCFF
66FF0066FF3366FF6666FF9966FFCC66FFFF
9900009900339900669900999900CC9900FF
9933009933339933669933999933CC9933FF
9966009966339966669966999966CC9966FF
9999009999339999669999999999CC9999FF
99CC0099CC3399CC6699CC9999CCCC99CCFF
99FF0099FF3399FF6699FF9999FFCC99FFFF
CC0000CC0033CC0066CC0099CC00CCCC00FF
CC3300CC3333CC3366CC3399CC33CCCC33FF
CC6600CC6633CC6666CC6699CC66CCCC66FF
CC9900CC9933CC9966CC9999CC99CCCC99FF
CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
FF0000FF0033FF0066FF0099FF00CCFF00FF
FF3300FF3333FF3366FF3399FF33CCFF33FF
FF6600FF6633FF6666FF6699FF66CCFF66FF
FF9900FF9933FF9966FF9999FF99CCFF99FF
FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF


in questa guida Tabella colori HTML trovate una tabella con più di 1500 colori

Un discorso a pare può essere fatto per i grigi, col sistema RGB si ottiene una sfumatura di grigio tutte le volte che le tre componenti, rossa, verde e blu sono presenti nella stessa quantità, dato che i valori possibili sono 256 (da 0 a 255) le sfumature di grigio ottenibili con questo sistema, dal nero al bianco, sono 256, nella tabella che segue trovate una scala con 33 sfumature di grigio fondamentali

 rgb(0,0,0)#000000
 rgb(8,8,8)#080808
 rgb(16,16,16)#101010
 rgb(24,24,24)#181818
 rgb(32,32,32)#202020
 rgb(40,40,40)#282828
 rgb(48,48,48)#303030
 rgb(56,56,56)#383838
 rgb(64,64,64)#404040
 rgb(72,72,72)#484848
 rgb(80,80,80)#505050
 rgb(88,88,88)#585858
 rgb(96,96,96)#606060
 rgb(104,104,104)#686868
 rgb(112,112,112)#707070
 rgb(120,120,120)#787878
 rgb(128,128,128)#808080
 rgb(136,136,136)#888888
 rgb(144,144,144)#909090
 rgb(152,152,152)#989898
 rgb(160,160,160)#A0A0A0
 rgb(168,168,168)#A8A8A8
 rgb(176,176,176)#B0B0B0
 rgb(184,184,184)#B8B8B8
 rgb(192,192,192)#C0C0C0
 rgb(200,200,200)#C8C8C8
 rgb(208,208,208)#D0D0D0
 rgb(216,216,216)#D8D8D8
 rgb(224,224,224)#E0E0E0
 rgb(232,232,232)#E8E8E8
 rgb(240,240,240)#F0F0F0
 rgb(248,248,248)#F8F8F8
 rgb(255,255,255)#FFFFFF


in questa guida Tabella colori HTML trovate la scala completa dei 256 grigi

Nota
Nei fogli di stile e nell'HTML, se si usano gli stili in linea, si possono rappresentare i colori utilizzando la notazione funzionale, esprimendo le intensità dei tre componenti con i valori decimali o con percentuali, i tre valori devono essere racchiusi fra parentesi tonde, separati da virgole e preceduti dalla sigla rgb, come negli esempi che seguono:
HTML
<span style="background-color: rgb(0,0,0); color: rgb(255,255,0)">Questo è un testo di colore giallo su fondo nero</span>

Questo è un testo di colore giallo su fondo nero
HTML
<span style="background-color: rgb(0%,0%,0%); color: rgb(100%,100%,0%)">Questo è un testo di colore giallo su fondo nero</span>

Questo è un testo di colore giallo su fondo nero


Edited by kostaki - 24/2/2007, 02:11
 
Web  Top
view post Posted on 7/12/2006, 03:47
Avatar

Staff

Group:
ForumFree Staff
Posts:
109,436
Location:
Slayer's Flag

Status:


Colorazione del testo col BB code



Il tag per colorare il testo col BBcode è il seguente

CODICE
[color=nome_del_colore]testo colorato[/color]


può essere utilizzato per colorare il testo (ed esclusivamente il testo) nei messaggi, nelle firma e in tagboard, in tutte e tre le possibilità trovate un menù a tendina dove poter selezionare sette colori preinstallati (Blu, Rosso, Porpora, Arancione, Giallo, Grigio, Verde), ovviamente nel codice, esattamente come nell'html, il nome del colore sarà in inglese (blue, red, purple, orange, yellow, gray, green) ma nel BBcode è possibile utilizzare tutti i nomi di colore impiegati nell'html, scrivendo il tag color o modificandolo manualmente prima dell'inserimento
CODICE
[color=fuchsia]Questo testo è color fuchsia[/color]

Questo testo è color fuchsia

nel Bbcode il colore può essere espresso utilizzando anche i valori esadecimali dei colori, nello stesso modo già visto per l'html

CODICE
[color=#FF00FF]Questo testo è color fuchsia[/color]

Questo testo è color fuchsia
 
Web  Top
3 replies since 7/10/2006, 01:23   16970 views
  Share