Capire il modello di colore RGB

Introduzione

Nel mondo digitale, il colore è ovunque. Dalle foto che visualizzi su Instagram al testo che stai leggendo ora, il colore gioca un ruolo vitale nella nostra esperienza digitale. Ma ti sei mai chiesto come il tuo schermo visualizzi questi milioni di colori? La risposta sta nel modello di colore RGB.

Cos'è l'RGB?

RGB sta per Red (Rosso), Green (Verde) e Blue (Blu). È un modello di colore additivo, il che significa che crea colori sommando luce. Questo è diverso dal modo in cui mescoliamo la vernice, che è un processo sottrattivo.

Nel modello RGB:

• Rosso
• Verde
• Blu

sono i colori primari della luce. Combinando questi tre colori in varie intensità, possiamo riprodurre una vasta gamma di colori.

Come funziona

Immagina di essere in una stanza buia con tre faretti: uno rosso, uno verde e uno blu.

• Se accendi la luce Rossa, il muro appare rosso.
• Se aggiungi la luce Verde, l'area di sovrapposizione diventa Giallo.
• Se aggiungi la luce Blu al rosso, l'area di sovrapposizione diventa Magenta.
• Se mescoli Verde e Blu, ottieni Ciano.
• Se accendi tutte e tre le luci alla massima intensità, il centro in cui si sovrappongono tutte diventa Bianco.

Ecco perché è chiamato "additivo": inizi con il nero (nessuna luce) e aggiungi luce per creare colore.

La scala da 0 a 255

Nel calcolo digitale, ciascuno dei tre colori (Rosso, Verde, Blu) è solitamente memorizzato come un numero intero a 8 bit, che gli conferisce un intervallo di valori possibili da 0 a 255.

• 0 significa nessuna luce (oscurità).
• 255 significa massima intensità.

Quindi, un colore è definito da una tripletta di numeri come (R, G, B).

• Nero: (0, 0, 0) –
• Giallo: (255, 255, 0) – Rosso + Verde
• Ciano: (0, 255, 255) – Verde + Blu
• Magenta: (255, 0, 255) – Rosso + Blu
• Bianco: (255, 255, 255) – Rosso + Verde + Blu

Sperimenta con diverse combinazioni qui sotto.

RGB vs. CMYK

Potresti aver sentito parlare anche di CMYK (Ciano, Magenta, Giallo, Key/Nero). La differenza principale è dove vengono utilizzati:

Se progetti qualcosa in RGB e lo stampi, i colori potrebbero apparire diversi perché gli schermi emettono luce, mentre la carta assorbe luce.

Utilizzo di RGB nel Web Design

Nello sviluppo web e nel design, RGB è un modo standard per definire i colori. Lo vedi spesso in CSS:

/* Sintassi RGB standard */
.my-element {
  background-color: rgb(255, 0, 0); /* Rosso */
  color: rgb(0, 0, 255); /* Testo blu */
}

/* RGB con Alpha (Trasparenza) */
.transparent-box {
  background-color: rgba(0, 255, 0, 0.5); /* Verde semitrasparente */
}

Codici Hex

I codici esadecimali (come #FF5733) sono solo un altro modo per rappresentare i valori RGB.

• Le prime due cifre rappresentano il Rosso (FF = 255).
• Le due successive rappresentano il Verde (57 = 87).
• Le ultime due rappresentano il Blu (33 = 51).

Conclusione

Il modello di colore RGB è la base del colore digitale. Capire come la luce rossa, verde e blu si mescolano per creare lo spettro aiuta designer e sviluppatori a creare interfacce visivamente sbalorditive. La prossima volta che guardi uno schermo, ricorda: è tutto solo un mix di tre semplici luci!