Colori in CSS

I colori svolgono un ruolo molto significativo nella progettazione di una pagina web. In CSS i colori sono più frequentemente usati per colorare lo sfondo, il testo e il bordo. Qui il punto è come impostare/definire il colore in CSS?

BENE! In CSS i colori possono essere definiti attraverso vari metodi come l'uso di nomi di colori predefiniti, valori esadecimali, ecc. Questo articolo discuterà i seguenti metodi per impostare il colore di sfondo, il colore del testo e i colori del bordo:

• Nomi di colori predefiniti come rosso, verde, arancione, ecc.
• Valori di colore esadecimale come #RrggBB, #00FF00, ecc.
• Valori di colore RGB come RGB (255, 0, 0); RGB (0, 255, 255), ecc.
• Valori di colore RGBA come RGB (255, 255, 0, 0.7), RGB (255, 0, 0, 0.1), ecc.
• Valori di colore HSL come HSL (0, 100%, 50%), HSL (240, 100%, 50%), ecc
• Valori di colore HSLA come HSL (0, 100%, 50%, 0.5), HSL (240, 100%, 50%, 0.2), ecc

Tutte le convenzioni di colore sopra menzionate saranno discusse con esempi. Quindi, iniziamo questo viaggio con i nomi dei colori predefiniti.

Nomi di colori predefiniti CSS

CSS fornisce numerosi nomi di colori predefiniti, ad esempio rosso, giallo, verde, ecc. Questi nomi di colori possono essere utilizzati per lo styling sullo sfondo, il testo, ecc.

Comprendiamo il concetto dei nomi dei colori predefiniti usando l'esempio di seguito

Esempio

Diciamo che abbiamo un

elemento e vogliamo modellare il colore del testo usando valori di colore predefiniti:

Html

Benvenuti in Linuxhint.com

CSS

P
colore blu;

Basta assegnare il nome del colore alla proprietà del colore e di conseguenza otterrai il seguente output:

CSS Colore esadecimale

I colori esadecimali sono definiti da "#"Simbolo con codice a sei cifre. Prende valori da 0 a 15, tuttavia il 10 sarà rappresentato con A, 11 con B, e così oltre a 15 che verranno specificati con F.

Poiché esadecimale è un codice a sei cifre i.E #e3e3e3, i primi due slot per il colore rosso, i successivi due per il verde e gli ultimi due per il colore blu. La combinazione di queste sei cifre specifica un nuovo colore e.G. #Ffff00 rappresenta il colore giallo.

Esempio

Le linee di seguito donate impostano il colore di sfondo verde su

Elemento usando valori esadecimali:

Html

Benvenuti in Linuxhint.com

CSS

P
Background-color: #00ff00;

Il codice sopra fornisce il seguente output:

CSS RGB Color

Il colore RGB è una combinazione di rosso, verde e blu. La funzione RGB () prende valori da 0 a 255. Specificando valori diversi nella funzione RGB () risulta in varie combinazioni di colori. Ad esempio, RGB (255, 0, 0) genererà il colore rosso.

Esempio

Il seguente pezzo di codice specifica il valore RGB per impostare il colore del testo grigio del paragrafo:

Html

Benvenuti in Linuxhint.com

CSS

P
Background-color: RGB (128, 128, 128);

L'uscita imposta il colore di sfondo grigio:

Colore RGBA CSS

Il fattore di trasparenza può essere aggiunto ai colori RGB aggiungendo il valore alfa in esso. Il parametro Alpha prende i valori tra 0 e 1. Il valore inferiore rende il colore trasparente mentre il valore più alto rende il colore opaco. Ad esempio, aggiungendo 0.0 renderà il colore trasparente, mentre 1.0 renderà il colore completamente opaco.

Esempio

Aggiungiamo il parametro Alpha nell'esempio sopra.

Html

Benvenuti in Linuxhint.com

CSS

P
Background-color: RGBA (128, 128, 128, 0.2);

Nel codice sopra 0.2 viene aggiunto come valore del parametro Alpha che rende il colore di sfondo trasparente:

CSS HSL Color

HSL è un acronimo di tonalità, saturazione e leggerezza.

• Il termine tonalità definisce l'angelo all'interno della ruota dei colori.
• La saturazione definisce l'intensità del colore.
• La leggerezza specifica i livelli di leggerezza.

La leggerezza e la saturazione saranno rappresentate dal segno %.

Esempio

Coloramo lo sfondo di

Elemento usando i valori di colore HSL.

Html

Benvenuti in Linuxhint.com

CSS

P
Background-color: HSL (334, 80%, 56%);

Il codice sopra imposta lo sfondo rosa del

elemento.

CSS HSLA Color

La convention di colore HSL può essere estesa all'HSLA. A A rappresenta il parametro Alpha che viene utilizzato per aggiungere gli effetti di trasparenza sul colore.

Esempio

Estendiamo un po 'l'esempio precedente e aggiungiamo anche il parametro Alpha:

Html

Benvenuti in Linuxhint.com

CSS

P
Background-color: HSL (334, 80%, 56%, 0.3);

Il codice sopra mostrerà il seguente output:

Conclusione

I CSS forniscono più colori e metodi per impostare il colore di un elemento come nomi di colori predefiniti, è possibile utilizzare la combinazione di valori compresi tra 0 e 255 all'interno di RGB () o i valori per tonalità, saturazione e luce. Inoltre, un parametro Alpha può essere utilizzato con RGB e HSL per aggiungere l'effetto di trasparenza sul colore. Questo articolo ha presentato una panoramica completa ed elaborata dei colori CSS e diversi metodi per impostare i colori in CSS.