Colori Web: HEX, RGB, HSL Spiegati Semplicemente

Introduzione ai Colori Web

I colori sono fondamentali nel web design, e capire i diversi formati colore è essenziale per ogni sviluppatore. Questa guida spiega HEX, RGB, HSL e altri formati colore in modo semplice e pratico.

Il Formato HEX

Cos'è il Codice HEX

I codici HEX (esadecimali) rappresentano i colori usando sei caratteri preceduti da #:

#RRGGBB

R = Rosso (00-FF)
G = Verde (00-FF)
B = Blu (00-FF)

Esempi:
#FF0000 = Rosso puro
#00FF00 = Verde puro
#0000FF = Blu puro
#FFFFFF = Bianco
#000000 = Nero

Shorthand HEX

Quando le coppie sono identiche, puoi abbreviare:

#FF0000 → #F00
#00FF00 → #0F0
#FFFFFF → #FFF
#336699 → #369

Il Formato RGB

RGB Standard

RGB usa valori decimali da 0 a 255 per ogni canale:

rgb(255, 0, 0)    /* Rosso */
rgb(0, 255, 0)    /* Verde */
rgb(0, 0, 255)    /* Blu */
rgb(255, 255, 255) /* Bianco */
rgb(0, 0, 0)       /* Nero */

RGBA con Trasparenza

Aggiungi un quarto valore (alpha) per la trasparenza:

rgba(255, 0, 0, 1)    /* Rosso opaco */
rgba(255, 0, 0, 0.5)  /* Rosso 50% trasparente */
rgba(255, 0, 0, 0)    /* Completamente trasparente */

Il Formato HSL

Cos'è HSL

HSL (Hue, Saturation, Lightness) è più intuitivo per i designer:

• Hue (Tonalità): 0-360 gradi sulla ruota dei colori
• Saturation (Saturazione): 0-100% (grigio → colore pieno)
• Lightness (Luminosità): 0-100% (nero → bianco)

hsl(0, 100%, 50%)   /* Rosso */
hsl(120, 100%, 50%) /* Verde */
hsl(240, 100%, 50%) /* Blu */
hsl(0, 0%, 100%)    /* Bianco */
hsl(0, 0%, 0%)      /* Nero */

Vantaggi di HSL

• Facile creare variazioni di colore cambiando solo la luminosità
• Intuitivo per creare palette armoniche
• Semplice regolare saturazione senza cambiare il colore base

/* Palette di blu con HSL */
hsl(210, 100%, 20%) /* Blu scuro */
hsl(210, 100%, 40%) /* Blu medio */
hsl(210, 100%, 60%) /* Blu chiaro */
hsl(210, 100%, 80%) /* Blu molto chiaro */

Conversioni tra Formati

Da HEX a RGB

#3498DB
34 (hex) = 52 (dec)  → R
98 (hex) = 152 (dec) → G
DB (hex) = 219 (dec) → B

Risultato: rgb(52, 152, 219)

Strumento di Conversione

Usa il nostro Convertitore Colori per convertire istantaneamente tra tutti i formati.

Colori CSS Nominati

CSS include 140+ colori predefiniti:

color: red;
color: blue;
color: tomato;
color: cornflowerblue;
color: rebeccapurple;

Best Practices

• Consistenza: Scegli un formato e usalo in tutto il progetto
• Accessibilità: Verifica il contrasto colore (WCAG richiede 4.5:1)
• Variabili CSS: Definisci colori come custom properties
• HSL per Temi: Facilita la creazione di temi chiari/scuri

:root {
  --primary-h: 210;
  --primary-s: 100%;
  --primary: hsl(var(--primary-h), var(--primary-s), 50%);
  --primary-light: hsl(var(--primary-h), var(--primary-s), 70%);
  --primary-dark: hsl(var(--primary-h), var(--primary-s), 30%);
}

Conclusione

Ogni formato colore ha i suoi vantaggi: HEX per brevità, RGB per precisione, HSL per intuitività. Capire quando usare ciascuno ti rende più efficiente nel web design e sviluppo.