HTML consente agli sviluppatori Web di utilizzare diversi colori sulle pagine Web per renderli attraenti. I colori sono uno strumento essenziale per creare un aspetto migliore per la nostra applicazione. Le pagine Web con colori interattivi sono le più probabili e attirano facilmente l'attenzione dell'utente. Aiuta anche gli utenti a comunicare con l'applicazione e comprendere l'azione. Inoltre, HTML offre vari metodi per applicare il colore al contenuto.

Questa guida dimostrerà:

• Quali sono i codici a colori HTML?
• Come applicare i colori in HTML?
• Metodo 1: applicare i colori in HTML utilizzando i valori del codice esadecimale
• Metodo 2: applicare i colori in HTML usando RGB
• Metodo 3: applicare i colori in HTML usando HSL

Iniziamo!

Quali sono i codici a colori HTML?

I codici a colori HTML sono gli identificatori per applicare i colori nella pagina Web. I codici a colori HTML comuni sono i nomi della tastiera, "Codice esadecimale","RGB (rosso, verde, blu)", E "HSL (tonalità, saturazione, leggerezza)".

Come applicare i colori in HTML?

In HTML, ci sono tre metodi per applicare i colori a una pagina Web usando:

• Valori del codice esadecimale
• RGB
• HSL

Discuteremo ciascuno di essi con l'aiuto dell'attuazione. In primo luogo, è necessario creare un file HTML.

Esempio: applicare i colori in HTML usando i nomi dei colori
Nel file HTML, aggiungi un div all'interno del tag del corpo. Imposta il nome della classe Div come "contenitore". Crea due elementi per l'intestazione e il paragrafo all'interno del Div:

CIAO MONDO!

Il paragrafo inizia da qui ..

Gli elementi HTML aggiunti sembreranno così:

Rendiamo la pagina web più attraente applicando alcuni stili. Per fare ciò, includi il tag nella sezione Head File HTML. All'interno del tag di stile, applicare gli stili CSS per il div in questo modo:

Il codice sopra fornito contiene le proprietà CSS per la classe Div, che sono elencate di seguito:

• ".contenitore"Rappresenta la classe di div.
• "colore di sfondo"La proprietà viene utilizzata per applicare il colore di sfondo di Div.
• "Margine: Auto"Applica il margine da tutti i lati del div.
• "allineamento del testo: centro"Allinea il testo al centro del div.
• "altezza" E "larghezza"Può essere assegnato in base alle preferenze dell'utente.

Produzione

Come possiamo vedere, il "colore di sfondo"La proprietà del div è ora cambiata in"cardo"Da White. Ecco come applichiamo i colori alle nostre pagine web semplicemente usando i nomi dei colori. Tuttavia, per sfruttare diverse tonalità di colore, ci sono tre metodi per applicare i colori usando i codici a colori.

Metodo 1: applicare i colori in HTML utilizzando i valori del codice esadecimale

"Valori del codice esadecimale"Sono i valori esadecimali che possono essere utilizzati per l'applicazione del colore in HTML.

Sintassi
Puoi scrivere il codice colore in questo formato:

#rrggbb

Nella sintassi sopra offerta, "rr"È per il rosso,"Gg"È per il verde e"BB"È per il blu.

Dai un'occhiata alla tabella seguente che rappresenta il colore e i loro valori esadecimali:

Colore	Valore del codice esadecimale
Rosso	#FF0000
Blu	#0000ff
Verde	#00ff00
Bianco	#ffffff
Nero	#000000

Esempio
Continuiamo lo stesso esempio e cambiamo il colore del div in rosso usando un valore di codice esadecimale. Per fare ciò, modificare il valore di fondo-colore da "cardo" A "#FF0000" come segue:

Background-color: #FF0000;

Si può osservare che il colore di sfondo del div viene cambiato con successo in rosso:

Metodo 2: applicare i colori in HTML usando il codice RGB

"RGB"È la combinazione di colori o il modello che utilizza colori primari rosso, verde e blu di luce. Valori diversi di questi colori possono essere aggiunti per generare più colori.

Sintassi
Lo schema RGB funziona secondo la formula data:

RGB (rosso, blu, verde)

Diamo un'occhiata ad alcuni colori con i loro valori RGB:

Colori	Codice colore RGB
Rosso	RGB (255,0,0)
Verde	RGB (0,255,0)
Blu	RGB (0,0,255)
Bianco	RGB (255.255.255)
Blu	RGB (0,0,0)

Esempio
Ecco la dimostrazione di cambiare il colore di sfondo del nostro div in "giallo"Applicando il codice RGB. IL "colore di sfondo"È impostato come"RGB (0,0,255)"Che è il codice colore RGB giallo:

Background-color: RGB (255, 255, 0);

Dopo aver assegnato il valore RGB (255.255,0) alla proprietà in background, controlla i risultati seguenti:

Metodo 3: applicare i colori in HTML usando HSL

In HTML, i colori possono anche essere definiti usando "HSL" Hue, SATURATION, e Lfigura. A tale scopo, è necessario utilizzare il metodo del codice colore HSL.

Sintassi
Il formato del metodo a colori HSL () è citato di seguito:

HSL (tonalità, saturazione, leggerezza)

Nella ruota dei colori RGB, ogni colore indica un angolo e un valore percentuale per i fattori sotto l'elenco:

• Tinta: È usato per rappresentare il grado, da 0 a 360 sulla ruota dei colori RGB.
• Saturazione: È il valore percentuale, in cui lo 0% significa una tonalità di grigio e il 100% è il colore pieno.
• Leggerezza: È il valore percentuale, in cui lo 0% indica il nero e il 100% è per il bianco.

Esempio
Cambiamo il sopra menzionato "div"Colore a una tonalità di verde che ha una tonalità"di 106"Gradi, saturazione" di 73%"E leggerezza" di 58%":

Background-color: HSL (106, 73%, 58%);

Il risultato è mostrato di seguito:

Ecco qui! Hai imparato i tre metodi per applicare i colori in HTML.

Conclusione

I codici a colori HTML sono identificatori per applicare colori diversi. Oltre a usare solo il nome del colore, HTML ci consente di utilizzare tre metodi: valori del codice esadecimale, colori RGB e HSL. È possibile utilizzare questi colori su qualsiasi elemento HTML impostando i valori di questi codici. Questo articolo ha dimostrato i metodi per applicare i colori in HTML.