Color Converter: Guida Completa alla Conversione Colori

Cos'è la Teoria del Colore nel Web Design

I colori nel web sono rappresentati attraverso diversi sistemi numerici, ognuno con vantaggi specifici per designer, sviluppatori e creativi. Comprendere come funzionano HEX, RGB e HSL è fondamentale per creare interfacce coerenti, accessibili e visivamente accattivanti. La conversione tra questi formati è un'operazione quotidiana per chiunque lavori con CSS, design system o brand identity.

Il nostro Color Converter è uno strumento gratuito che converte istantaneamente tra HEX, RGB e HSL, con color picker visuale, palette generator e preview in tempo reale. Funziona al 100% nel browser senza inviare dati a server esterni.

I Tre Formati Colore Principali

HEX (Esadecimale)

Il formato HEX rappresenta i colori con 6 caratteri esadecimali (0-9, A-F) preceduti da #. Ogni coppia rappresenta un canale: Rosso, Verde, Blu.

#RRGGBB

Esempi:
#FF0000 = Rosso puro (R=255, G=0, B=0)
#00FF00 = Verde puro (R=0, G=255, B=0)
#0000FF = Blu puro (R=0, G=0, B=255)
#FFFFFF = Bianco (tutti i canali al massimo)
#000000 = Nero (tutti i canali a zero)
#808080 = Grigio medio

Shorthand (3 caratteri):
#RGB → #RRGGBB
#F00 = #FF0000 (Rosso)
#0F0 = #00FF00 (Verde)
#00F = #0000FF (Blu)

RGB (Red, Green, Blue)

Il formato RGB usa tre numeri da 0 a 255 per i canali Rosso, Verde e Blu. È il modello additivo usato dai monitor.

rgb(R, G, B)
rgba(R, G, B, A)  // Con alpha (trasparenza 0-1)

Esempi:
rgb(255, 0, 0)     = Rosso puro
rgb(0, 255, 0)     = Verde puro
rgb(0, 0, 255)     = Blu puro
rgb(255, 255, 255) = Bianco
rgb(0, 0, 0)       = Nero
rgba(0, 0, 0, 0.5) = Nero 50% trasparente

HSL (Hue, Saturation, Lightness)

Il formato HSL è più intuitivo per l'editing umano, basato su tonalità, saturazione e luminosità.

hsl(H, S%, L%)
hsla(H, S%, L%, A)  // Con alpha

H = Hue (tonalità): 0-360 gradi sulla ruota colori
  0° = Rosso
  60° = Giallo
  120° = Verde
  180° = Ciano
  240° = Blu
  300° = Magenta

S = Saturation (saturazione): 0-100%
  0% = Grigio (desaturato)
  100% = Colore puro (saturo)

L = Lightness (luminosità): 0-100%
  0% = Nero
  50% = Colore normale
  100% = Bianco

Esempi:
hsl(0, 100%, 50%)   = Rosso puro
hsl(120, 100%, 50%) = Verde puro
hsl(240, 100%, 50%) = Blu puro
hsl(0, 0%, 50%)     = Grigio medio

Tabella Conversione Colori Comuni

Colore	HEX	RGB	HSL
Rosso	#FF0000	rgb(255,0,0)	hsl(0,100%,50%)
Verde Lime	#00FF00	rgb(0,255,0)	hsl(120,100%,50%)
Blu	#0000FF	rgb(0,0,255)	hsl(240,100%,50%)
Giallo	#FFFF00	rgb(255,255,0)	hsl(60,100%,50%)
Magenta	#FF00FF	rgb(255,0,255)	hsl(300,100%,50%)
Ciano	#00FFFF	rgb(0,255,255)	hsl(180,100%,50%)
Arancione	#FFA500	rgb(255,165,0)	hsl(39,100%,50%)
Viola	#800080	rgb(128,0,128)	hsl(300,100%,25%)

7+ Casi d'Uso Reali

1. CSS Styling

/* Tutti i formati sono validi in CSS */
.button-primary {
  background-color: #3B82F6;        /* HEX */
  color: rgb(255, 255, 255);        /* RGB */
  border-color: hsl(217, 91%, 60%); /* HSL */
}

/* Con trasparenza */
.overlay {
  background: rgba(0, 0, 0, 0.7);   /* Nero 70% */
  background: hsla(0, 0%, 0%, 0.7); /* Equivalente HSL */
}

/* CSS Custom Properties (variabili) */
:root {
  --primary-h: 217;
  --primary-s: 91%;
  --primary-l: 60%;
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-light: hsl(var(--primary-h), var(--primary-s), 80%);
  --primary-dark: hsl(var(--primary-h), var(--primary-s), 40%);
}

2. Design System e Brand Colors

I design system definiscono palette usando più formati:

// Tailwind Config
module.exports = {
  theme: {
    colors: {
      primary: {
        50: '#eff6ff',
        100: '#dbeafe',
        500: '#3b82f6',
        900: '#1e3a8a',
      }
    }
  }
}

// Figma Variables
Primary Blue
  HEX: #3B82F6
  RGB: 59, 130, 246
  HSL: 217°, 91%, 60%

3. Dark Mode Toggle

HSL facilita la creazione di varianti chiare/scure:

:root {
  --bg: hsl(0, 0%, 100%);      /* Bianco */
  --text: hsl(0, 0%, 10%);     /* Quasi nero */
}

[data-theme="dark"] {
  --bg: hsl(0, 0%, 10%);       /* Quasi nero */
  --text: hsl(0, 0%, 90%);     /* Quasi bianco */
}

/* Con HSL basta cambiare L (lightness) */

4. Accessibilità (Contrasto WCAG)

Il contrasto minimo WCAG richiede calcoli sui valori RGB:

// Calcolo luminanza relativa
function getLuminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

// Contrast ratio
function getContrastRatio(color1, color2) {
  const l1 = getLuminance(...color1);
  const l2 = getLuminance(...color2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

// WCAG richiede:
// AA: 4.5:1 per testo normale, 3:1 per testo grande
// AAA: 7:1 per testo normale, 4.5:1 per testo grande

5. Canvas e Grafica 2D

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// fillStyle accetta tutti i formati
ctx.fillStyle = '#FF6B6B';
ctx.fillStyle = 'rgb(255, 107, 107)';
ctx.fillStyle = 'hsl(0, 100%, 71%)';

// Gradiente
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, '#FF6B6B');
gradient.addColorStop(1, '#4ECDC4');
ctx.fillStyle = gradient;

6. Data Visualization (Charts)

// Chart.js
const chart = new Chart(ctx, {
  type: 'pie',
  data: {
    datasets: [{
      data: [30, 50, 20],
      backgroundColor: [
        'hsl(0, 70%, 60%)',    // Rosso
        'hsl(120, 70%, 60%)',  // Verde
        'hsl(240, 70%, 60%)'   // Blu
      ]
    }]
  }
});

// Generare N colori equidistanti sulla ruota
function generateColors(n) {
  return Array.from({ length: n }, (_, i) =>
    `hsl(${(360 / n) * i}, 70%, 60%)`
  );
}

7. Image Processing

// Estrarre colore dominante da immagine
const img = document.getElementById('image');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 1, 1);
const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;

// Convertire a HEX
const hex = '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');

Formule di Conversione

HEX → RGB

function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

// Esempio: hexToRgb('#FF6B6B') → {r: 255, g: 107, b: 107}

RGB → HEX

function rgbToHex(r, g, b) {
  return '#' + [r, g, b].map(x => {
    const hex = x.toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  }).join('');
}

// Esempio: rgbToHex(255, 107, 107) → '#ff6b6b'

RGB → HSL

function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0;
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }
  return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    l: Math.round(l * 100)
  };
}

HSL → RGB

function hslToRgb(h, s, l) {
  h /= 360; s /= 100; l /= 100;
  let r, g, b;

  if (s === 0) {
    r = g = b = l;
  } else {
    const hue2rgb = (p, q, t) => {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1/6) return p + (q - p) * 6 * t;
      if (t < 1/2) return q;
      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
      return p;
    };
    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    const p = 2 * l - q;
    r = hue2rgb(p, q, h + 1/3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1/3);
  }
  return {
    r: Math.round(r * 255),
    g: Math.round(g * 255),
    b: Math.round(b * 255)
  };
}

Confronto: Quando Usare Quale Formato

Scenario	Formato Consigliato	Motivo
CSS standard	HEX	Compatto, universalmente supportato
Trasparenze	RGBA / HSLA	Supporto nativo per alpha
Design system	HSL	Facile creare varianti (lighten/darken)
Dark mode	HSL	Basta modificare L per invertire
Canvas/WebGL	RGB	API native usano RGB
Accessibilità	RGB	Calcoli luminanza richiedono RGB
Brand guidelines	Tutti	Documenta tutti i formati

FAQ - Domande Frequenti

Qual è la differenza tra RGB e RGBA?

RGBA aggiunge un quarto valore Alpha (0-1) per la trasparenza. rgba(255, 0, 0, 0.5) è rosso al 50% di opacità. RGB implica alpha = 1 (completamente opaco).

Perché HSL è considerato più intuitivo?

HSL separa la tonalità (tipo di colore) dalla saturazione (vivacità) e luminosità. Per scurire un colore, basta ridurre L. In RGB, devi modificare tutti e tre i canali proporzionalmente.

Il formato HEX supporta la trasparenza?

Sì, con 8 cifre: #RRGGBBAA. Esempio: #FF000080 = rosso 50% trasparente. Il supporto browser è buono ma non universale; RGBA è più sicuro.

Come scelgo colori accessibili?

Usa strumenti di verifica contrasto WCAG. Il rapporto minimo è 4.5:1 per testo normale e 3:1 per testo grande. Evita combinazioni come giallo su bianco o grigio chiaro su bianco.

Cosa significa "colore safe per il web"?

Era rilevante negli anni '90 con monitor a 256 colori. Oggi tutti i monitor supportano 16 milioni di colori (24-bit), rendendo il concetto obsoleto.

Posso usare nomi colore in CSS?

Sì, CSS supporta 147 nomi come red, blue, tomato, rebeccapurple. Sono convenienti ma limitati; HEX/RGB/HSL offrono più controllo.

Come creo una palette complementare?

In HSL, il colore complementare ha H + 180°. Per una palette triadica, usa H, H+120°, H+240°. Per analoga, usa H-30°, H, H+30°.

CMYK è supportato in CSS?

No, CMYK è per stampa (inchiostri), non per schermi. I browser non supportano CMYK. Per stampare colori web accurati, converti RGB a CMYK con software dedicato.

Tool Correlati su THEJORD

• Base64 Encoder - Codifica immagini per CSS inline
• JSON Formatter - Formatta configurazioni colore
• RegEx Tester - Valida pattern colore HEX
• Diff Checker - Confronta palette CSS

Risorse Esterne

• MDN - CSS color values
• WCAG - Contrast Guidelines
• Adobe Color - Palette generator

🎨 Prova il nostro Color Converter →