Valori CSS di colore legali

CSS Colori

Colori in CSS possono essere specificati con i seguenti metodi:

colori esadecimali
colori RGB
colori RGBA
colori HSL
colori HSLA
i nomi dei colori predefiniti / Cross-browser

colori esadecimali

valori di colore esadecimali sono supportati in tutti i principali browser.

Un colore esadecimale è specificato con: #RRGGBB, dove il RR (red) , GG (green) e BB (blue) numeri interi esadecimali specificare i componenti del colore. Tutti i valori devono essere compresi tra 00 e FF.

Ad esempio, il valore # 0000FF è reso come blu, perché la componente blu è impostata il suo valore massimo (ff) e gli altri sono impostati su 00.

Esempio

Definire diversi colori HEX:

#p1 {background-color: #ff0000;}   /* red */
#p2 {background-color: #00ff00;}   /* green */
#p3 {background-color: #0000ff;}   /* blue */

Prova tu stesso "

colori RGB

valori di colore RGB sono supportati in tutti i principali browser.

Un valore di colore RGB viene specificato con: rgb(red, green, blue) . Ogni parametro (rosso, verde e blu) definisce l'intensità del colore e può essere un numero intero compreso tra 0 e 255 o un valore percentuale (from 0% to 100%) .

Ad esempio, il rgb(0,0,255) valore è reso come blu, perché il parametro blu è impostato al suo valore più alto (255) e gli altri sono impostati a 0.

Inoltre, i seguenti valori definiscono uguale color: rgb(0,0,255) e rgb(0%,0%,100%) .

Esempio

Definire diversi colori RGB:

#p1 {background-color: rgb(255, 0, 0);}   /* red */
#p2 {background-color: rgb(0, 255, 0);}   /* green */
#p3 {background-color: rgb(0, 0, 255);}   /* blue */

Prova tu stesso "

RGBA Colori

valori di colore RGBA sono supportati in IE9 +, Firefox 3+, Chrome, Safari, Opera e 10+.

valori di colore RGBA sono un'estensione dei valori di colore RGB con un canale alfa - che specifica l'opacità dell'oggetto.

Un valore di colore RGBA viene specificato con: rgba(red, green, blue, alpha) . Il parametro alfa è un numero compreso tra 0.0 (fully transparent) e 1,0 (fully opaque) .

Esempio

Definire diversi colori RGB con l'opacità:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* blue with opacity */

Prova tu stesso "

HSL Colori

valori di colore HSL sono supportati in IE9 +, Firefox, Chrome, Safari, Opera e 10+.

HSL è sinonimo di tonalità, saturazione e luminosità - e rappresenta una rappresentazione cilindrica coordinata dei colori.

Un valore di colore HSL viene specificato con: hsl(hue, saturation, lightness) .

Hue è un grado sulla ruota dei colori (from 0 to 360) - 0 (or 360) è di colore rosso, 120 è verde, 240 è blu. La saturazione è un valore percentuale; 0% significa una tonalità di grigio e 100% è il colore pieno. La leggerezza è anche una percentuale; 0% è nero, il 100% è bianco.

Esempio

Definire diversi colori HSL:

#p1 {background-color: hsl(120, 100%, 50%);}   /* green */
#p2 {background-color: hsl(120, 100%, 75%);}   /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}   /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}    /* pastel green */

Prova tu stesso "

HSLA Colori

valori di colore HSLA sono supportati in IE9 +, Firefox 3+, Chrome, Safari, Opera e 10+.

valori di colore HSLA sono un'estensione dei valori di colore HSL con un canale alfa - che specifica l'opacità dell'oggetto.

Un valore di colore HSLA viene specificato con: hsla(hue, saturation, lightness, alpha) , dove il parametro alfa definisce l'opacità. Il parametro alfa è un numero compreso tra 0.0 (fully transparent) e 1,0 (fully opaque) .

Esempio

Definire diversi colori HSL con opacità:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* pastel green with opacity */

Prova tu stesso "