Convertitore Colori

Cos'è la Conversione dei Colori?

Un convertitore di colori traduce un valore cromatico da una notazione a un'altra — ad esempio, da un tripletto HEX (#6366F1) a una tupla RGB (99, 102, 241) o a una tripletta HSL (239, 84%, 67%). Lo stesso colore può essere espresso anche come tripletta HSV (239, 59%, 95%). Ogni formato codifica lo stesso colore visivo utilizzando un modello matematico diverso; strumenti, linguaggi e API si aspettano formati differenti a seconda del contesto.

HEX e RGB descrivono entrambi il colore come una combinazione di luce rossa, verde e blu. HEX è una rappresentazione esadecimale compatta degli stessi tre valori di canale 0-255 che RGB esprime in decimale. HSL (Tonalità, Saturazione, Luminosità) e HSV (Tonalità, Saturazione, Valore) riorganizzano le stesse informazioni in un sistema di coordinate cilindriche, dove la tonalità è un angolo sulla ruota dei colori (0-360 gradi) e saturazione e luminosità o luminanza sono percentuali. Questo rende HSL e HSV più intuitivi per operazioni come la creazione di tonalità più chiare o più scure della stessa tinta.

La conversione tra questi formati richiede calcoli matematici ben definiti. La specifica W3C CSS Color Module Level 4 documenta gli algoritmi che i browser usano per risolvere qualsiasi colore CSS in un tripletto sRGB. Le formule sono deterministiche: un dato input produce sempre lo stesso output, quindi le conversioni sono prive di perdita finché i valori non vengono arrotondati o limitati. La maggior parte dei selettori di colori e degli strumenti di design utilizza queste stesse formule internamente.

Perché Usare Questo Convertitore Colori?

Gli strumenti di design esportano colori in un formato, il tuo CSS ne richiede un altro e l'API che stai chiamando ne vuole un terzo. Invece di scrivere codice di conversione o cercare la formula giusta, incolla un valore e ottieni tutti i formati in una volta sola.

Casi d'Uso del Convertitore Colori

Riferimento ai Formati Colore

La tabella seguente elenca i quattro formati di colore più comuni, con lo stesso colore indaco (#6366F1) mostrato in ciascuna notazione. HEX e RGB sono i più ampiamente supportati in CSS e JavaScript. HSL è preferito per il theming perché la regolazione di luminosità e saturazione è immediata. HSV è il modello usato dai selettori di colore della maggior parte dei software di grafica.

HEX vs RGB vs HSL

Tutti e tre i formati descrivono lo stesso spazio colore sRGB. La differenza sta nel modo in cui espongono i dati, il che influisce sulla leggibilità e sulla facilità di manipolazione in contesti diversi.

Esempi di Codice

Conversione dei colori tra HEX, RGB e HSL nei linguaggi e ambienti più comuni. Ogni esempio usa lo stesso colore indaco (#6366F1) per un facile confronto.

// HEX → RGB
function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16)
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}
hexToRgb('#6366f1') // → [99, 102, 241]

// 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)
  const l = (max + min) / 2
  if (max === min) return [0, 0, Math.round(l * 100)]
  const d = max - min
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
  let h = 0
  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
  else if (max === g) h = ((b - r) / d + 2) / 6
  else h = ((r - g) / d + 4) / 6
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]
}
rgbToHsl(99, 102, 241) // → [239, 84, 67]

import colorsys

# HEX → RGB
def hex_to_rgb(hex_str: str) -> tuple[int, int, int]:
    h = hex_str.lstrip('#')
    return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))

hex_to_rgb('#6366f1')  # → (99, 102, 241)

# RGB → HSL (colorsys uses HLS order)
r, g, b = 99 / 255, 102 / 255, 241 / 255
h, l, s = colorsys.rgb_to_hls(r, g, b)
print(f"hsl({h * 360:.0f}, {s * 100:.0f}%, {l * 100:.0f}%)")
# → hsl(239, 84%, 67%)

# RGB → HSV
h, s, v = colorsys.rgb_to_hsv(r, g, b)
print(f"hsv({h * 360:.0f}, {s * 100:.0f}%, {v * 100:.0f}%)")
# → hsv(239, 59%, 95%)

package main

import (
	"fmt"
	"math"
)

func hexToRGB(hex string) (int, int, int) {
	var r, g, b int
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	return r, g, b
}

func rgbToHSL(r, g, b int) (int, int, int) {
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, int(math.Round(l * 100))
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf: h = (gf - bf) / d; if gf < bf { h += 6 }
	case gf: h = (bf - rf) / d + 2
	case bf: h = (rf - gf) / d + 4
	}
	return int(math.Round(h / 6 * 360)), int(math.Round(s * 100)), int(math.Round(l * 100))
}

func main() {
	r, g, b := hexToRGB("#6366f1")
	fmt.Println(r, g, b)         // → 99 102 241
	fmt.Println(rgbToHSL(r, g, b)) // → 239 84 67
}

/* Modern CSS supports multiple color formats natively */

/* HEX notation */
.button { color: #6366f1; }

/* RGB functional notation */
.button { color: rgb(99 102 241); }

/* HSL — easier to adjust lightness and saturation */
.button { color: hsl(239 84% 67%); }

/* CSS Color Level 4: relative color syntax (Chrome 119+) */
.button-light { color: hsl(from #6366f1 h s calc(l + 20%)); }

/* color-mix() for tinting without manual conversion */
.button-muted { color: color-mix(in srgb, #6366f1 70%, white); }

Domande Frequenti