Valori di colore validi in CSS

Colore CSS

I colori in CSS possono essere specificati in modo seguente:

  • Il colore esadecimale
  • Il colore HEX con trasparenza
  • Il colore RGB
  • Colori RGBA
  • Colori HSL
  • Colore HSLA
  • Nomi di colore predefiniti/interbrowser
  • Utilizzare currentcolor Parola chiave

Il colore esadecimale

Specificare il colore esadecimale con #RRGGBB, dove RR (rosso), GG (verde) e BB (blu) sono interi esadecimali che specificano i componenti (componenti) del colore. Tutti i valori devono essere tra 00 e FF.

Ad esempio, il valore #0000ff viene visualizzato come blu, poiché la componente blu è impostata al valore massimo (ff), mentre le altre componenti sono impostate a 00.

Esempio

Definire diversi colori HEX:

#p1 {background-color: #ff0000;}   /* Rosso */
#p2 {background-color: #00ff00;}   /* Verde */
#p3 {background-color: #0000ff;}   /* Blu */

Prova personalmente

Il colore HEX con trasparenza

Specificare il colore esadecimale con #RRGGBB. Per aumentare la trasparenza, aggiungere due numeri extra tra 00 e FF.

Esempio

Definire il colore HEX con trasparenza:

#p1a {background-color: #ff000080;}   /* Rosso con trasparenza */
#p2a {background-color: #00ff0080;}   /* Verde con trasparenza */
#p3a {background-color: #0000ff80;}   /* Blu con trasparenza */

Prova personalmente

Il colore RGB

Il valore del colore RGB è composto da La funzione rgb()Specificare, la sintassi è la seguente:

rgb(red, green, blue)

Ogni parametro (red, green, blueDefinisce l'intensità del colore, può essere un numero intero o un valore percentuale tra 0 e 255 (da 0% a 100%).

Ad esempio, il valore rgb(0,0,255) viene visualizzato come blu, poiché il parametro blue è impostato al valore massimo (255), mentre gli altri parametri sono impostati a 0.

Inoltre, i seguenti valori definiscono lo stesso colore: rgb(0,0,255) e rgb(0%,0%,100%).

Esempio

Definire diversi colori RGB:

#p1 {background-color: rgb(255, 0, 0);}   /* Rosso */
#p2 {background-color: rgb(0, 255, 0);}   /* Verde */
#p3 {background-color: rgb(0, 0, 255);}   /* Blu */

Prova personalmente

Colori RGBA

Il valore del colore RGBA è un'estensione del valore del colore RGB, che include un canale Alpha - specifica l'opacità dell'oggetto.

I colori RGBA attraverso Funzione rgba()Specificare, la sintassi è la seguente:

rgba(red, green, blue, alpha)

alpha I parametri sono numeri tra 0.0 (completamente trasparente) e 1.0 (completamente opaco).

Esempio

Definire diversi colori RGB con opacità:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* Rosso con opacità */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* Verde con opacità */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* Blu con opacità */

Prova personalmente

Colori HSL

HSL sta per tono di colore (hue), saturazione (saturation) e luminosità (lightness) - rappresentazione cilindrica delle coordinate del colore.

Utilizzare Funzione hsl()Specificare il valore del colore HSL, la sintassi della funzione è la seguente:

hsl(tonalità, saturatione, luminosità)

Il tono di colore è il grado sul cerchio dei colori (da 0 a 360) - 0 (o 360) è rosso, 120 è verde, 240 è blu.

La saturazione è una percentuale; 0％ rappresenta un ombreggiatura grigia, mentre 100％ è a piena cromia.

La luminosità è anche una percentuale; 0％ è nero, 100％ è bianco.

Esempio

Definire diversi colori HSL:

#p1 {background-color: hsl(120, 100%, 50%);}   /* 绿色 */
#p2 {background-color: hsl(120, 100%, 75%);}   /* 浅绿色 */
#p3 {background-color: hsl(120, 100%, 25%);}   /* 深绿色 */
#p4 {background-color: hsl(120, 60%, 70%);}    /* Verde pallido */

Prova personalmente

Colore HSLA

Colore HSLA

Il valore del colore HSLA è estensione del valore del colore HSL, che ha un canale alpha - specifica l'opacità dell'oggetto. Funzione hsla()Specificare, la sintassi della funzione è la seguente:

hsla(tonalità, saturatione, luminosità, alpha)

alpha I parametri sono numeri tra 0.0 (completamente trasparente) e 1.0 (completamente opaco).

Esempio

Definire diversi colori HSL con opacità:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* Verde con opacità */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* Verde chiaro con opacità */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* Verde scuro con opacità */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* Tono verde pallido con opacità */

Prova personalmente

Nomi di colore predefiniti/interbrowser

La specifica dei colori HTML e CSS predefinisce 140 nomi di colore.

Ad esempio:blue、red、coral、brown e:

Esempio

Definire diversi nomi di colore:

#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}

Prova personalmente

L'elenco di tutti i nomi predefiniti può essere trovato nel nostro manuale di riferimento dei nomi dei colori.

Chiave currentcolor

currentcolor Citazione dell'attributo color dell'elemento chiave.

Esempio

Il bordo del <div> elemento sarà blu, perché il colore del testo del <div> elemento è blu:

#myDIV {
  color: blue; /* 蓝色文本色 */
  border: 10px solid currentcolor; /* 蓝色边框色 */
}

Prova personalmente