CSS
Colori

Sintassi

• colore: #rgb
• colore: #rrggbb
• color: rgb [a] (<rosso>, <verde>, <blu> [, <alpha>])
• colore: hsl [a] (<tonalità>, <saturazione%>, <luminosità%> [, <alpha>])
• colore: colorkeyword / * verde, blu, giallo, arancione, rosso, ..etc * /

Parole chiave di colore

La maggior parte dei browser supporta l'utilizzo di parole chiave a colori per specificare un colore. Ad esempio, per impostare il color di un elemento su blu, utilizzare la parola chiave blue :

.some-class {
    color: blue;
}

Le parole chiave CSS non sono case sensitive- blue , Blue e BLUE saranno tutti risultato #0000FF .

Parole chiave di colore

Nome del colore	Valore esadecimale	Valori RGB	Colore
AliceBlue	# F0F8FF	rgb (240.248.255)
AntiqueWhite	# FAEBD7	rgb (250.235.215)
acqua	# 00FFFF	rgb (0.255.255)
Acquamarina	# 7FFFD4	rgb (127.255.212)
Azzurro	# F0FFFF	rgb (240.255.255)
Beige	# F5F5DC	rgb (245.245.220)
biscotto	# FFE4C4	rgb (255.228.196)
Nero	# 000000	rgb (0,0,0)
BlanchedAlmond	#FFEBCD	rgb (255.235.205)
Blu	# 0000FF	rgb (0,0,255)
Blu viola	# 8A2BE2	rgb (138,43,226)
Marrone	# A52A2A	rgb (165,42,42)
burlywood	# DEB887	rgb (222.184.135)
CadetBlue	# 5F9EA0	rgb (95.158.160)
certosa	# 7FFF00	rgb (127,255,0)
Cioccolato	# D2691E	rgb (210,105,30)
Corallo	# FF7F50	rgb (255,127,80)
cornflowerblue	# 6495ED	rgb (100.149.237)
Cornsilk	# FFF8DC	rgb (255.248.220)
Cremisi	# DC143C	rgb (220,20,60)
Ciano	# 00FFFF	rgb (0.255.255)
Blu scuro	# 00008B	rgb (0,0,139)
DarkCyan	# 008B8B	rgb (0.139.139)
DarkGoldenRod	# B8860B	rgb (184,134,11)
Grigio scuro	# A9A9A9	rgb (169.169.169)
Grigio scuro	# A9A9A9	rgb (169.169.169)
Verde scuro	# 006.400	rgb (0,100,0)
DarkKhaki	# BDB76B	rgb (189.183.107)
DarkMagenta	# 8B008B	rgb (139,0,139)
DarkOliveGreen	# 556B2F	rgb (85,107,47)
Arancione scuro	# FF8C00	rgb (255,140,0)
DarkOrchid	# 9932CC	rgb (153,50,204)
Rosso scuro	# 8B0000	rgb (139,0,0)
DarkSalmon	# E9967A	rgb (233.150.122)
DarkSeaGreen	# 8FBC8F	rgb (143.188.143)
darkslateblue	# 483D8B	rgb (72,61,139)
Darkslategray	# 2F4F4F	rgb (47,79,79)
DarkSlateGrey	# 2F4F4F	rgb (47,79,79)
DarkTurquoise	# 00CED1	rgb (0.206.209)
Darkviolet	# 9400D3	rgb (148,0,211)
Rosa scuro	# FF1493	rgb (255,20,147)
DeepSkyBlue	# 00BFFF	rgb (0.191.255)
dimgray	# 696969	rgb (105.105.105)
DimGrey	# 696969	rgb (105.105.105)
Blu Dodger	# 1E90FF	rgb (30.144.255)
firebrick	# B22222	rgb (178,34,34)
FloralWhite	# FFFAF0	rgb (255.250.240)
Verde foresta	# 228B22	rgb (34,139,34)
Fucsia	# FF00FF	rgb (255,0,255)
Gainsboro	#DCDCDC	rgb (220.220.220)
GhostWhite	# F8F8FF	rgb (248.248.255)
Oro	# FFD700	rgb (255,215,0)
Verga d'oro	# DAA520	rgb (218,165,32)
Grigio	# 808080	rgb (128,128,128)
Grigio	# 808080	rgb (128,128,128)
verde	# 008000	rgb (0,128,0)
Verde giallo	# ADFF2F	rgb (173,255,47)
Melata	# F0FFF0	rgb (240.255.240)
Rosa caldo	# FF69B4	rgb (255.105.180)
IndianRed	# CD5C5C	rgb (205,92,92)
Indaco	# 4B0082	rgb (75,0,130)
Avorio	# FFFFF0	rgb (255.255.240)
Cachi	# F0E68C	rgb (240.230.140)
Lavanda	# E6E6FA	rgb (230.230.250)
LavenderBlush	# FFF0F5	rgb (255.240.245)
Lawngreen	# 7CFC00	rgb (124,252,0)
limone crema	#FFFACD	rgb (255.250.205)
Azzurro	# ADD8E6	rgb (173.216.230)
LightCoral	# F08080	rgb (240.128.128)
lightcyan	# E0FFFF	rgb (224.255.255)
LightGoldenRodYellow	# FAFAD2	rgb (250.250.210)
Grigio chiaro	# D3D3D3	rgb (211.211.211)
Grigio chiaro	# D3D3D3	rgb (211.211.211)
Verde chiaro	# 90EE90	rgb (144.238.144)
Rosa chiaro	# FFB6C1	rgb (255.182.193)
lightsalmon	# FFA07A	rgb (255.160.122)
lightseagreen	# 20B2AA	rgb (32.178.170)
Lightskyblue	# 87CEFA	rgb (135.206.250)
LightSlateGray	# 778.899	rgb (119.136.153)
LightSlateGrey	# 778.899	rgb (119.136.153)
LightSteelBlue	# B0C4DE	rgb (176.196.222)
Giallo chiaro	# FFFFE0	rgb (255.255.224)
Lime	# 00FF00	rgb (0,255,0)
Verde lime	# 32CD32	rgb (50,205,50)
Biancheria	# FAF0E6	rgb (250.240.230)
Magenta	# FF00FF	rgb (255,0,255)
Marrone	# 800000	rgb (128,0,0)
MediumAquaMarine	# 66CDAA	rgb (102.205.170)
mediumblue	# 0000CD	rgb (0,0,205)
MediumOrchid	# BA55D3	rgb (186,85,211)
MediumPurple	# 9370DB	rgb (147.112.219)
MediumSeaGreen	# 3CB371	rgb (60.179.113)
MediumSlateBlue	# 7B68EE	rgb (123.104.238)
MediumSpringGreen	# 00FA9A	rgb (0.250.154)
MediumTurquoise	# 48D1CC	rgb (72.209.204)
MediumVioletRed	# C71585	rgb (199,21,133)
Blu notte	# 191970	rgb (25,25,112)
MintCream	# F5FFFA	rgb (245.255.250)
Mistyrose	# FFE4E1	rgb (255.228.225)
Mocassino	# FFE4B5	rgb (255.228.181)
navajowhite	#FFDEAD	rgb (255.222.173)
Marina Militare	# 000080	rgb (0,0,128)
OldLace	# FDF5E6	rgb (253.245.230)
Oliva	# 808.000	rgb (128,128,0)
Olivedrab	# 6B8E23	rgb (107,142,35)
arancia	# FFA500	rgb (255,165,0)
Rosso-arancio	# FF4500	rgb (255,69,0)
Orchidea	# DA70D6	rgb (218.112.214)
PaleGoldenRod	# EEE8AA	rgb (238.232.170)
Verde pallido	# 98FB98	rgb (152.251.152)
PaleTurquoise	#AFEEEE	rgb (175.238.238)
PaleVioletRed	# DB7093	rgb (219.112.147)
PapayaWhip	# FFEFD5	rgb (255.239.213)
peachpuff	# FFDAB9	rgb (255.218.185)
Perù	# CD853F	rgb (205,133,63)
Rosa	# FFC0CB	rgb (255.192.203)
prugna	# DDA0DD	rgb (221.160.221)
Powderblue	# B0E0E6	rgb (176.224.230)
Viola	# 800080	rgb (128,0,128)
RebeccaPurple	# 663399	rgb (102,51,153)
Rosso	# FF0000	rgb (255,0,0)
RosyBrown	# BC8F8F	rgb (188.143.143)
Blu reale	# 4169E1	rgb (65.105.225)
SaddleBrown	# 8B4513	rgb (139,69,19)
salmone	# FA8072	rgb (250.128.114)
Sandybrown	# F4A460	rgb (244,164,96)
Mare verde	# 2E8B57	rgb (46,139,87)
Conchiglia	# FFF5EE	rgb (255.245.238)
terra di siena	# A0522D	rgb (160,82,45)
Argento	# C0C0C0	rgb (192,192,192)
Cielo blu	# 87CEEB	rgb (135.206.235)
Blu ardesia	# 6A5ACD	rgb (106,90,205)
Slategray	# 708.090	rgb (112.128.144)
Grigio ardesia	# 708.090	rgb (112.128.144)
La neve	#FFFAFA	rgb (255.250.250)
Verde primavera	# 00FF7F	rgb (0.255.127)
Blu acciaio	# 4682B4	rgb (70.130.180)
abbronzatura	# D2B48C	rgb (210.180.140)
Teal	# 008.080	rgb (0.128.128)
Cardo	# D8BFD8	rgb (216.191.216)
Pomodoro	# FF6347	rgb (255,99,71)
Turchese	# 40E0D0	rgb (64.224.208)
Viola	# EE82EE	rgb (238.130.238)
Grano	# F5DEB3	rgb (245.222.179)
bianca	#FFFFFF	rgb (255,255,255)
Fumo bianco	# F5F5F5	rgb (245.245.245)
Giallo	# FFFF00	rgb (255,255,0)
Giallo verde	# 9ACD32	rgb (154,205,50)

Oltre ai colori con nome, c'è anche la parola chiave transparent , che rappresenta un nero completamente trasparente: rgba(0,0,0,0)

Valore esadecimale

sfondo

I colori CSS possono anche essere rappresentati come una tripletta esadecimale, in cui i membri rappresentano i componenti rosso, verde e blu di un colore. Ciascuno di questi valori rappresenta un numero compreso tra 00 e FF o tra 0 e 255 nella notazione decimale. Possono essere usati valori esadecimali maiuscoli e / o minuscoli (es. #3fc = #3FC = #33ffCC ). Il browser interpreta #369 come #336699 . Se questo non è ciò che intendi, ma preferisci #306090 , devi specificarlo esplicitamente.

Il numero totale di colori che possono essere rappresentati con la notazione esadecimale è 256 ^ 3 o 16.777.216.

Sintassi

color: #rrggbb;
color: #rgb

.some-class {
    /* This is equivalent to using the color keyword 'blue' */
    color: #0000FF;
}

.also-blue {
    /* If you want to specify each range value with a single number, you can!
       This is equivalent to '#0000FF' (and 'blue') */
    color: #00F;
}

La notazione esadecimale viene utilizzata per specificare i valori dei colori nel formato colore RGB, in base ai "valori numerici dei colori" del W3C .

Ci sono molti strumenti disponibili su Internet per cercare valori di colore esadecimali (o semplicemente esadecimali).

Cerca " tavolozza colori esadecimali " o " selettore colori esadecimali " con il tuo browser web preferito per trovare un sacco di opzioni!

I valori esadecimali iniziano sempre con un cancelletto (#), hanno un massimo di sei "cifre" e non fanno distinzione tra maiuscole e minuscole: cioè, non si preoccupano delle lettere maiuscole. #FFC125 e #ffc125 sono dello stesso colore.

rgb () Notazione

RGB è un modello di colore additivo che rappresenta i colori come miscele di luce rossa, verde e blu. In sostanza, la rappresentazione RGB è l'equivalente decimale della notazione esadecimale. In esadecimale, ogni numero varia da 00-FF che equivale a 0-255 in decimale e 0% -100% in percentuale.

.some-class {
    /* Scalar RGB, equivalent to 'blue'*/
    color: rgb(0, 0, 255);
}

.also-blue {
    /* Percentile RGB values*/
    color: rgb(0%, 0%, 100%);
}

Sintassi

rgb(<red>, <green>, <blue>)

hsl () Notazione

HSL sta per tonalità ("che colore"), saturazione ("quanto colore") e leggerezza ("quanto bianco").

La tonalità è rappresentata da un angolo compreso tra 0 ° e 360 ​​° (senza unità), mentre la saturazione e la luminosità sono rappresentate come percentuali.

p {
    color: hsl(240, 100%, 50%); /* Blue */
}

Sintassi

color: hsl(<hue>, <saturation>%, <lightness>%);

Gli appunti

• Una saturazione dello 0% produce sempre un colore in scala di grigi; cambiare la tonalità non ha alcun effetto.

• Una luminosità dello 0% produce sempre il nero e il 100% produce sempre il bianco; cambiare la tonalità o la saturazione non ha alcun effetto.

currentColor

currentColor restituisce il valore del colore calcolato dell'elemento corrente.

Utilizzare nello stesso elemento

Qui currentColor viene valutato in rosso poiché la proprietà color è impostata su red :

div {
   color: red;     
   border: 5px solid currentColor;
   box-shadow: 0 0 5px currentColor;
}

In questo caso, specificare currentColor per il bordo è molto probabilmente ridondante perché ometterlo dovrebbe produrre risultati identici. Usa currentColor solo all'interno della proprietà border all'interno dello stesso elemento se verrebbe sovrascritto altrimenti a causa di un selettore più specifico .

Poiché è il colore calcolato, il bordo sarà verde nell'esempio seguente a causa della seconda regola che ignora il primo:

div {
   color: blue;
   border: 3px solid currentColor; 
   color: green;
}

Ereditato dall'elemento padre

Il colore del genitore è ereditato, qui currentColor viene valutato in 'blu', rendendo blu il colore del bordo dell'elemento figlio.

.parent-class {
    color: blue;
}

.parent-class .child-class {
    border-color: currentColor;
}

currentColor può anche essere utilizzato da altre regole che normalmente non ereditano dalla proprietà color, come ad esempio il colore di sfondo. L'esempio seguente mostra i bambini che usano il set di colori nel genitore come sfondo:

.parent-class {
    color: blue;
}

.parent-class .child-class {
    background-color: currentColor;
}

Possibile risultato:

rgba () Notazione

Simile alla notazione rgb () , ma con un valore alfa (opacità) aggiuntivo.

.red {
    /* Opaque red */
    color: rgba(255, 0, 0, 1);
}

.red-50p {
    /* Half-translucent red. */
    color: rgba(255, 0, 0, .5);
}

Sintassi

rgba(<red>, <green>, <blue>, <alpha>);

hsla () Notazione

Simile alla notazione hsl () , ma con un valore alfa (opacità) aggiunto.

hsla(240, 100%, 50%, 0)     /* transparent */
hsla(240, 100%, 50%, 0.5)   /* half-translucent blue */
hsla(240, 100%, 50%, 1)     /* fully opaque blue */

Sintassi

hsla(<hue>, <saturation>%, <lightness>%, <alpha>);