Colori HTML | RGB, hex, HSL ha spiegato
Questo articolo dimostrerà come aggiungere colori a un elemento/documento HTML. Fornirà una panoramica generale delle convenzioni di colore di base come "nomi di colori", "valori RGB", "valori esadecimali" ecc. Quindi iniziamo!
Nomi di colori HTML
Il primo modo di implementare i colori HTML è semplicemente usare il nome del colore i.e. Parole inglesi per il colore come verde, giallo, rosso, ecc. HTML supporta più di cento nomi di colori standard.
Esempio
Supponiamo di avere un paragrafo nel nostro HTML:
Un paragrafo
Per dargli un colore diciamo verde, possiamo farlo:
Un paragrafo
Colore esadecimale HTML
HTML supporta un altro modo per aggiungere colori i.e. i valori esadecimali. I valori esadecimali possono essere scritti usando sedici cifre 0-9 e A-F. È determinato da un "#"Simbolo seguito da tre o sei cifre. Per esempio: #Rrggbb. Qui i primi due slot rappresentano il rosso, le due slot adiacenti mostrano Green e gli ultimi due mostrano valore blu.
Esempio
Supponiamo di avere un paragrafo nel nostro HTML:
Un paragrafo
Questa volta proveremo a impostare il colore di sfondo di
Tag su grigio usando i valori esadecimali e possiamo farlo usando il codice HTML di riga seguente:
Un paragrafo
Nel codice sopra, "#e3e3e3" è il codice esadecimale del colore grigio.
I valori esadecimali possono essere scritti usando solo tre cifre anziché sei cifre. Ad esempio, il valore esadecimale #f00 produrrà lo stesso colore di #FF0000.
Colori HTML RGB
Un altro metodo più frequentemente usato per i colori sono i valori RGB. Ci vogliono tre valori i.e. rosso, verde e blu. Invece di usare gli strani numeri esadecimali, la proprietà RGB utilizza numeri da 0 a 255. Questi numeri determinano l'intensità di ciascun parametro di colore, ad esempio, per utilizzare il set di colori nero tutti i parametri su 0 i.e. RGB (0, 0, 0). RGB (0, 0, 255) visualizzerà il colore blu e così via.
Esempio
Consideriamo lo stesso paragrafo:
Un paragrafo
Ora, proveremo a impostare il colore di sfondo su Orange usando i valori RGB e possiamo farlo usando il codice HTML di riga seguente:
Un paragrafo
Nel codice sopra, "RGB (255, 165, 0)" sono i valori RGB per il colore arancione.
Colori HTML RGBA
I valori RGBA sono un'estensione dei valori di colore RGB in cui "UN"Rappresenta il canale Alpha che specifica l'opacità per un colore. Un parametro Alpha è un numero tra 0 (trasparente) e 1 (opaco).
Esempio
Questo esempio mostra come il parametro Alpha "UN"Sarà specificato:
Un paragrafo
Il codice sopra dato implementato il parametro Alpha
elemento. Ora il risultato sarà in base alla quantità di trasparenza come mostrato nella seguente uscita:
Colori HTML HSL
HTML fornisce un'altra convention di colore i.E HSL determina un colore con la sua tonalità, la saturazione e la luce. Facoltativamente può avere anche un parametro alfa.
- Il termine tonalità determina un angelo all'interno della ruota dei colori e.G. 0 o 360 gradi rappresentano il colore rosso, allo stesso modo, i colori rimanenti sono separati intorno al cerchio. Ad esempio, il verde è uguale a 120 gradi, il ciano è uguale a 180 gradi e così via.
- Mentre il secondo valore in HSL è la saturazione che determina l'intensità del colore ed è rappresentata da un segno %.
- Il terzo valore è la leggerezza che determina i livelli di leggerezza rappresentati dal segno %.
Ad esempio, il cento per cento significa piena luce i.e. bianco mentre zero per cento significa nessuna luce i.e. nero, e così via.
Esempio
Lo script di seguito implementerà la Convenzione del colore HSL su diversi elementi HTML:
Un paragrafo
Otterremo il seguente output per il codice sopra:
Conclusione
HTML fornisce più convenzioni di colore per impostare il colore del testo, il colore di sfondo, ecc. Esistono quattro modi per colorare un elemento HTML: nome del colore, valori RGB, valori esadecimali e valori HSL. Per impostare il colore usando "Nome colore" Specificare il nome del colore i.e. rosso verde. Per RGB, combinare valori di colore rosso, verde e blu tra 0 e 255. Per il colore esadecimale scrivi il codice colore a tre o sei cifre. Per HSL, imposta i valori di tonalità, saturazione e luce.