12.1 – Colori HTML

I colori HTML vengono specificati con nomi di colori predefiniti o con valori RGB, HEX, HSL, RGBA o HSLA.
In HTML, un colore può essere specificato utilizzando un nome di colore:
In questa pagina la tabella contenente la lista completa dei nomi colore.


Colore Sfondo

Puoi impostare il colore di sfondo per gli elementi HTML:

Hello World

Lorem ipsum…

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p> 

Colore Testo

Puoi impostare il colore del testo:

Hello World

Lorem ipsum…

Ut wisi enim…

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p> 

Colore Bordo

Puoi impostare il colore dei bordi:

Esempio

Hello World

Hello World

Hello World

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Valore Colore

In HTML, i colori possono anche essere specificati utilizzando valori RGB, valori HEX, valori HSL, valori RGBA e valori HSLA.
I seguenti tre elementi hanno il colore di sfondo impostato con valori RGB, HEX e HSL:

I seguenti due elementi hanno il loro colore di sfondo impostato con valori RGBA e HSLA, che aggiungono un canale Alpha al colore (qui abbiamo il 50% di trasparenza):

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1> 

Colori HTML RGB e RGBA

Un valore di colore RGB rappresenta le sorgenti luminose ROSSO, VERDE e BLU.

Un valore di colore RGBA è un’estensione di RGB con un canale alfa (opacità).


Valori colore RGB

In HTML, un colore può essere specificato come valore RGB, usando questa formula: rgb ( rosso, verde , blu )
Ogni parametro (rosso, verde e blu) definisce l’intensità del colore con un valore compreso tra 0 e 255.
Ciò significa che ci sono 256 x 256 x 256 = 16777216 colori possibili!
Ad esempio, rgb(255, 0, 0) viene visualizzato come rosso, perché il rosso è impostato sul valore più alto (255) e gli altri due (verde e blu) sono impostati su 0.
Un altro esempio, rgb(0, 255, 0) viene visualizzato come verde, perché il verde è impostato sul valore più alto (255) e gli altri due (rosso e blu) sono impostati su 0.
Per visualizzare il nero, imposta tutti i parametri del colore su 0, in questo modo: rgb(0, 0, 0).
Per visualizzare il bianco, impostare tutti i parametri del colore su 255, in questo modo: rgb(255, 255, 255).

Sperimenta mescolando i seguenti valori RGB:


Sfumature di grigio

Le sfumature di grigio sono spesso definite utilizzando valori uguali per tutti e tre i parametri:


Valori di colore RGBA

I valori di colore RGBA sono un’estensione dei valori di colore RGB con un canale alfa, che specifica l’opacità di un colore.
Un valore di colore RGBA è specificato con: rgba ( rosso, verde , blu, alfa )
Il parametro alpha è un numero compreso tra 0.0 (completamente trasparente) e 1.0 (per niente trasparente):
Sperimenta mescolando i seguenti valori RGBA:


Colori HTML HEX

Un colore esadecimale è specificato con: #RRGGBB, dove i numeri interi esadecimali RR (rosso), GG (verde) e BB (blu) specificano i componenti del colore.

HEX valori di colore

In HTML, un colore può essere specificato utilizzando un valore esadecimale nella forma:

#rrggbb _

Dove rr (rosso), gg (verde) e bb (blu) sono valori esadecimali compresi tra 00 e ff (come decimale 0-255).
Ad esempio, #ff0000 viene visualizzato come rosso, perché il rosso è impostato sul valore più alto (ff) e gli altri due (verde e blu) sono impostati su 00.
Un altro esempio, #00ff00 viene visualizzato come verde, perché il verde è impostato sul valore più alto (ff) e gli altri due (rosso e blu) sono impostati su 00.
Per visualizzare il nero, impostare tutti i parametri del colore su 00, in questo modo: #000000.
Per visualizzare il bianco, impostare tutti i parametri del colore su ff, in questo modo: #ffffff.
Sperimenta mescolando i seguenti valori HEX:


Sfumature di grigio

Le sfumature di grigio sono spesso definite utilizzando valori uguali per tutti e tre i parametri:


Colori HTML HSL e HSLA

HSL sta per tonalità, saturazione e luminosità.
I valori di colore HSLA sono un’estensione di HSL con un canale alfa (opacità).


Valori di colore HSL

In HTML, un colore può essere specificato utilizzando tonalità, saturazione e luminosità (HSL) nella forma: hsl ( tonalità , saturazione , luminosità )
La tonalità è un grado sulla ruota dei colori da 0 a 360. 0 è rosso, 120 è verde e 240 è blu.
La saturazione è un valore percentuale. 0% indica una sfumatura di grigio e 100% è il colore pieno.
La leggerezza è anche un valore percentuale. 0% è nero e 100% è bianco.
Sperimenta mescolando i seguenti valori HSL:


Saturazione

La saturazione può essere descritta come l‘intensità di un colore.
Il 100% è colore puro, senza sfumature di grigio.
Il 50% è grigio al 50%, ma puoi ancora vedere il colore.
0% è completamente grigio; non puoi più vedere il colore.


Leggerezza

La luminosità di un colore può essere descritta come quanta luce vuoi dare al colore, dove 0% significa assenza di luce (nero), 50% significa 50% di luce (né scuro né chiaro) e 100% significa piena luminosità (bianco ).


Sfumature di grigio

Le sfumature di grigio sono spesso definite impostando la tonalità e la saturazione su 0 e regolando la luminosità da 0% a 100% per ottenere sfumature più scure/più chiare:


Valori di colore HSLA

I valori di colore HSLA sono un’estensione dei valori di colore HSL, con un canale alfa, che specifica l’opacità di un colore.
Un valore di colore HSLA è specificato con: hsla ( tonalità, saturazione , luminosità, alfa )
Il parametro alpha è un numero compreso tra 0.0 (completamente trasparente) e 1.0 (per niente trasparente):
Sperimenta mescolando i seguenti valori HSLA:

Pubblicato da Luca Bocaletto

Sviluppatore, Creatore, Musicista, Artista, Radiantista, Scacchista.