Ricerca…


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

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
Valore Descrizione
rr 00 - FF per la quantità di rosso
gg 00 - FF per la quantità di verde
bb 00 - FF per la quantità di blu
.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>)
Valore Descrizione
<red> un numero intero compreso tra 0 e 255 o percentuale compreso tra 0 e 100%
<green> un numero intero compreso tra 0 e 255 o percentuale compreso tra 0 e 100%
<blue> un numero intero compreso tra 0 e 255 o percentuale compreso tra 0 e 100%

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 */
}

La ruota dei colori HSL

Sintassi

color: hsl(<hue>, <saturation>%, <lightness>%);
Valore Descrizione
<hue> specificato in gradi attorno alla ruota dei colori (senza unità), dove 0 ° è rosso, 60 ° è giallo, 120 ° è verde, 180 ° è ciano, 240 ° è blu, 300 ° è magenta e 360 ​​° è rosso
<saturation> specificato in percentuale dove lo 0% è completamente desaturato (scala di grigi) e il 100% è completamente saturo (colori vividi)
<lightness> specificato in percentuale dove 0% è completamente nero e 100% è completamente bianco

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:

inserisci la descrizione dell'immagine qui

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>);
Valore Descrizione
<red> un numero intero compreso tra 0 e 255 o percentuale compreso tra 0 e 100%
<green> un numero intero compreso tra 0 e 255 o percentuale compreso tra 0 e 100%
<blue> un numero intero compreso tra 0 e 255 o percentuale compreso tra 0 e 100%
<alpha> un numero compreso tra 0 e 1, dove 0.0 è completamente trasparente e 1.0 è completamente opaco

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>);
Valore Descrizione
<hue> specificato in gradi attorno alla ruota dei colori (senza unità), dove 0 ° è rosso, 60 ° è giallo, 120 ° è verde, 180 ° è ciano, 240 ° è blu, 300 ° è magenta e 360 ​​° è rosso
<saturation> percentuale in cui lo 0% è completamente desaturato (scala di grigi) e il 100% è completamente saturo (colori vividi)
<lightness> percentuale dove 0% è completamente nero e 100% è completamente bianco
<alpha> un numero da 0 a 1 dove 0 è completamente trasparente e 1 è completamente opaco


Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow