In CSS i colori sono definiti utilizzando nomi di colore, valori RGB, valori HSL o valori HEX. È anche possibile definire la trasparenza di un colore utilizzando le funzione RGBA o HSLA. Questa pagina ha una texture come background per mostrare come i colori con trasparenza appaiono sopra un'immagine di sfondo.

Nomi dei colori in CSS

CSS supporta una serie di 147 nomi di colori predefiniti più transparent, che possono essere utilizzati direttamente nelle regole di stile. Eccoli elencati in ordine alfabetico:

aliceblue

antiquewhite

aqua

aquamarine

azure

beige

bisque

black

blanchedalmond

blue

blueviolet

brown

burlywood

cadetblue

chartreuse

chocolate

coral

cornflowerblue

cornsilk

crimson

cyan

darkblue

darkcyan

darkgoldenrod

darkgray

darkgreen

darkkhaki

darkmagenta

darkolivegreen

darkorange

darkorchid

darkred

darksalmon

darkseagreen

darkslateblue

darkslategray

darkturquoise

darkviolet

deeppink

deepskyblue

dimgray

dodgerblue

firebrick

floralwhite

forestgreen

fuchsia

gainsboro

ghostwhite

gold

goldenrod

gray

green

greenyellow

honeydew

hotpink

indianred

indigo

ivory

khaki

lavender

lavenderblush

lawngreen

lemonchiffon

lightblue

lightcoral

lightcyan

lightgoldenrodyellow

lightgray

lightgreen

lightpink

lightsalmon

lightseagreen

lightskyblue

lightslategray

lightsteelblue

lightyellow

lime

limegreen

linen

magenta

maroon

mediumaquamarine

mediumblue

mediumorchid

mediumpurple

mediumseagreen

mediumslateblue

mediumspringgreen

mediumturquoise

mediumvioletred

midnightblue

mintcream

mistyrose

moccasin

navajowhite

navy

oldlace

olive

olivedrab

orange

orangered

orchid

palegoldenrod

palegreen

paleturquoise

palevioletred

papayawhip

peachpuff

peru

pink

plum

powderblue

purple

rebeccapurple

red

rosybrown

royalblue

saddlebrown

salmon

sandybrown

seagreen

seashell

sienna

silver

skyblue

slateblue

slategray

snow

springgreen

steelblue

tan

teal

thistle

tomato

transparent

turquoise

violet

wheat

white

whitesmoke

yellow

yellowgreen

Colori esadecimali

Altri colori che possono essere utilizzati in CSS includono quelli definiti tramite codici esadecimali. I colori esadecimali sono composti da un simbolo # seguito da una o due cifre per ogni canale (rosso, verde, blu e opzionalmente alpha). I valori esadecimali non sono case-sensitive, quindi si può usare #F80 o #f80 indifferentemente. Ecco alcuni esempi:

#f80

#f804

#8010ff

#8010ff30

Colori RGB e RGBA

I colori RGB e RGBA sono definiti tramite funzioni CSS che specificano i valori per i canali rosso, verde, blu e opzionalmente opacità (alpha). Il valore per i canali è espresso in numeri interi compresi tra 0 e 255. Il valore per l'opacità, se presente, è espresso in numeri reali compresi tra 0 e 1, dove 0 è completamente trasparente e 1 è completamente opaco. Ecco alcuni esempi:

rgb(35, 200, 200)

rgba(35, 200, 200, 0.3)

rgb(170, 15, 255)

rgba(170, 15, 255, 0.2)

Colori HSL e HSLA

I colori HSL e HSLA sono definiti tramite funzioni CSS che specificano i valori per la tonalità (Hue), saturazione (Saturation) e luminosità (Lightness) e opzionalmente opacità (alpha). Il valore per la tonalità è espresso in gradi compresi tra 0 e 360. Il valore per la saturazione è espresso in percentuale compresa tra 0% e 100%. Il valore per la luminosità è espresso in percentuale compresa tra 0% e 100%. Il valore per l'opacità, se presente, espresso in numeri reali compresi tra 0 e 1, dove 0 è completamente trasparente e 1 è completamente opaco. Ecco alcuni esempi:

hsl(300, 80%, 60%)

hsla(175, 100%, 40%, 0.3)

hsl(80, 70%, 50%)

hsla(250, 70%, 50%, 0.2)