Introduzione al nome del colore in HTML

Il nome del colore in HTML svolge un ruolo molto importante nel processo di progettazione di applicazioni e web. Aiuta a cambiare l'aspetto del nostro sito Web o applicazione. Oltre a rendere la nostra applicazione più attraente e interattiva. Esistono vari modi per definire il nome del colore in HTML nel formato di codifica HTML. si possono usare proprietà CSS aggiuntive per usarlo in modo più efficace. Siamo in grado di utilizzare il nome del colore HTML a livello di pagina includendolo nella parte del corpo in grado di impostare il colore individuale per l'elemento specifico. Il nome del colore in HTML viene utilizzato di proposito per il colore del testo, il colore di sfondo, il colore del bordo, le ombre, i gradienti e molti altri.

Sintassi

  • Esistono vari modi in cui possiamo usare i colori HTML. Vediamo uno per uno.
  • L'uso basilare del colore HTML è applicarlo al testo. usa semplicemente come colore del testo per mostrare il testo in diversi colori HTML.

1. Sintassi del colore del testo

color : color_name;

Vediamo come funzionerà questa sintassi,

Welcome to EDUBCA

Nell'esempio sopra, mostrerà il testo Welcome to EDUBCA in un colore blu come:

  • Con l'aiuto dei colori HTML, è anche possibile aggiungerli come colore di sfondo.

2. Sintassi del colore di sfondo

background-color:color_name;

Vediamo come funzionerà questa sintassi,

La categoria ospita tutte le informazioni di progettazione che si diffondono attraverso numerose sottocategorie nel corso di progettazione.

  • È anche possibile aggiungere un bordo colorato attorno a qualsiasi testo o elemento utilizzando il colore HTML utilizzando la sintassi seguente:

3. Sintassi del colore del bordo: bordo

value color_name;

Vediamo come funzionerà questa sintassi,

EDUCBA free certification course

Tipi di nome colore in HTML

Esistono diversi modi per definire i nomi dei colori in HTML. È difficile ricordare un nome diverso in diversi colori. Quindi si deve decidere di dare alcuni valori a diversi colori. Vediamo uno per uno

1. Valore RGB

  • È uno dei modi per definire i nomi di colore HTML nella combinazione di valori di formato di colore Rosso, Verde e Blu. Quale è usato per definire l'intensità del colore tra il numero da 0 a 255?
  • Supponiamo di voler definire un colore nero usando la combinazione RGB, quindi piacerà RGB (0, 0, 0). Qui tutti i parametri di colore saranno impostati su 0. In questo modo verrà visualizzato un colore nero.
  • Come un altro RGB (0, 0.255) visualizzerà il colore blu, poiché 255 è impostato come il valore più alto sul blu e l'altro è 0.
  • Se stiamo andando a 3 valori uguali di RGB, genererà sfumature di un colore grigio.

Esempio: RGB (0, 0, 0) per il colore più scuro dove RGB (255.255.255) per il colore più chiaro.

2. Valore esadecimale

  • È uno dei formati più comunemente usati di un nome di colore in HTML in cui il nome di colore verrà definito nel formato di un valore esadecimale.
  • Il formato #rrggbb include i valori di RR per il rosso, gg per il verde e bb per il blu sono inseriti tra 00 toff valore esadecimale.
  • Consideriamo un esempio che definisce il colore # 00ff00. quindi questi valori verranno generati di colore verde a causa del verde contenente il valore più alto (ff) in cui l'altro deve essere impostato su 00.

3. Valore HSL

  • Un altro formato per definire il colore HTML in forma di Tonalità, Saturazione, Luminosità.
  • Ora vedremo tutti i termini uno per uno. La tonalità è definita come il grado di colore compreso tra 0 e 360. in cui 0 per il rosso, 120 per il verde e 240 per il blu.
  • La saturazione definisce il valore del colore nella percentuale, in cui lo 0% indica la tonalità di grigio dove il 100% per il colore pieno.
  • La luminosità funziona anche come percentuale che definisce lo 0% per il nero, il 50% non è né chiaro né scuro, mentre il 100% è per il bianco.

4. Valore RGBA

  • Questo tipo di colore HTML definisce l'estensione per il colore RGB incluso il valore alfa. Dove alfa viene utilizzato per definire l'opacità del colore.
  • Il valore alfa è compreso tra 0, 0 (completamente trasparente) e 1, 0 (non trasparente affatto)
  • Esempio è rgba (255, 99, 71, 0)

5. Valore HSLA

  • Funziona allo stesso modo del valore dei colori HSL e del valore alfa con esso per definire l'opacità del colore.
  • hsla (8, 100%, 80%, 0) per colori completamente trasparenti.
  • hsla (8, 100%, 80%, 0, 9) per un colore non molto trasparente.

Esempi di nome colore in HTML

Vediamo come viene usato il nome del colore in HTML con l'aiuto di alcuni esempi menzionati di seguito:

Esempio 1

Consideriamo un esempio generale che mostra come verrà usato il nome del colore di esempio in HTML:

Codice HTML:



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun

Impari di più dal fallimento che dal successo. Non lasciarti fermare. L'errore costruisce il personaggio. Se stai lavorando a qualcosa a cui tieni davvero, non devi essere spinto. La visione ti tira

Produzione:

Esempio n. 2

Ora stiamo prendendo un altro esempio che definirà tutti i tipi di colore HTML come segue:

Codice HTML:



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade

Produzione:

Nell'esempio sopra, siamo in grado di vedere l'uso di diversi tipi di colore HTML e come sono nominati in HTML.

Esempio n. 3

Un altro uso del colore HTML è la definizione di un bordo per l'elemento, che è il seguente:

Nell'esempio, qui siamo in grado di aggiungere un bordo al corpo del codice, modificando anche lo sfondo e il colore del testo.

Codice HTML:

La teoria di auto-attualizzazione parla di ricompense intrinseche inerenti allo svolgimento di compiti come soddisfazione sul lavoro, senso di realizzazione, ecc.

Produzione:

Conclusione

Ci siamo imbattuti nel fatto che i colori HTML sono definiti con nomi diversi, valore percentuale, valore esadecimale, valore alfa e molti altri. Il nome del colore in HTML viene utilizzato per fare il colore per il testo, per lo sfondo, per un bordo, per le gradazioni. Esistono diversi tipi per definire il nome del colore HTML come RGB, hex, hsl, rgba, hsla.

Articoli consigliati

Questa è una guida al nome del colore in HTML. Qui discutiamo l'introduzione, i tipi di nome colore in HTML insieme ad esempi, sintassi e codici HTML. Puoi anche consultare i nostri altri articoli suggeriti per saperne di più -

  1. Attributo di stile HTML
  2. Tag tabella HTML
  3. Link immagine in HTML
  4. Crea tabelle in HTML
  5. Eventi HTML

Categoria:

Strumenti di sviluppo Web