Tutti i browser Web moderni supportano colori diversi per mantenere un display colorato. In CSS, i colori possono essere rappresentati in diversi modi anche usando un nome di colore come "colore blu". Tuttavia, questo metodo supporta solo nomi di colori specifici. Pertanto, in CSS, altri metodi avanzati vengono utilizzati per visualizzare colori come RGB, HSL, esagonale, ecc.

In questo articolo, sono discussi tre metodi di rappresentazione del colore: RGB, RGBA ed HEX. In CSS, RGB () è una funzione integrata, RGBA è anche un formato di colori del display con l'estensione di alfa. Inoltre, fornire valori di colore in numeri esadecimali è anche ampiamente utilizzato in CSS.

funzione rgb () in CSS

RGB è una combinazione di tre colori (rosso, verde e blu) che viene utilizzato in tutti i sistemi informatici per il display colorato. Come sappiamo, questi sono i colori di base e combinandoli possiamo ottenere qualsiasi colore visibile nello spettro dei colori.

In CSS, questi colori sono definiti sotto forma di una funzione rgb (): (rosso, verde, blu). La gamma di tutti questi colori è definita da 0 a 255 definisce l'intensità di un colore e possiamo cambiare i colori cambiando questi valori. L'intensità di questi colori è ben definita nell'esempio dato.

Esempio

RGB (0, 255, 0)

Questa combinazione restituisce il colore verde perché ha la massima intensità e gli altri due colori hanno 0 intensità.

Cambiando le intensità di tutti e tre i colori otteniamo i diversi colori come

• RGB (255, 255, 255) visualizza il colore bianco
• e RGB (0, 0, 0) dà il colore nero.

Ulteriori esempi di colore sono mostrati nell'esempio dato

Esempio

RGB (0, 255, 0)

RGB (60, 60, 60)

RGB (138, 238, 130)

RGB (255, 255, 255)

Colori RGBA

In CSS RGBA è anche un formato per visualizzare i colori con l'estensione di alfa. La struttura di questa funzione di colore è riportata di seguito.

RGBA (rosso, verde, blu, alfa)

In questa funzione, un alfa viene utilizzato per esprimere l'opacità di un colore. Nella proprietà Opacity CSS viene utilizzata per impostare la trasparenza di un colore e la sua gamma si trova tra 0.0 a 1.0, dove 0.0 rappresenta il completamente trasparente e 1.0 rappresenta il completamente opaco. Comprerai meglio dall'esempio dato.

Esempio

Verde

Verde

Verde

Verde

Verde

Nell'esempio sopra indicato, impostiamo il valore di alfa da 0.0 (completamente trasparente) a 1.0 (completamente opaco) e puoi vedere la differenza di intensità della trasparenza.

Colori esagonali CSS

In CSS i colori possono anche essere specificati con valori esadecimali, è solo un altro modo per rappresentare i colori. In CSS, è il modo più comune per specificare un colore usando valori esadecimali con un segno " #" come #RrggBB. Mentre, r, g, b sono i codici per rosso, verde e blu, rispettivamente.

I numeri esadecimali con la combinazione di 0-9 e A-F sono usati per rappresentare un colore in CSS. Di seguito sono riportati alcuni esempi di colori esagonali di base:

• #ffffff: rappresenta il colore bianco e
• #000000: rappresenta il colore nero.

Per una migliore comprensione dai un'occhiata al seguente esempio.

Esempio

Specificare i colori usando i valori esadecenti

#0f4bff

#3CB371

EE652E

#FFA500

#6a5acd

Nell'esempio sopra, diversi colori vengono visualizzati usando i valori esadecimali. Tutti questi valori esadecimali sono la combinazione di numeri esadecimali, che sono 16 valori alfa-numerici distinti che si trovano tra 0-9 e A-F.

Conclusione

RGB, RGBA e Hex sono i diversi tipi per visualizzare i colori in CSS. Mentre RGB è una combinazione di tre colori (rosso, verde e blu), RGBA è uguale a RGB con l'estensione di alfa (alfa = trasparazione) e esadecimale usa i valori esadecimali per rappresentare i colori. La gamma di colori RGB ed esagonali si trova rispettivamente tra 0 e 255 interi e 00 a FF. Tutti e tre questi tipi sono ben definiti con esempi.