Convertitore colori

Cos'è un convertitore di colori?

Un convertitore di colori traduce i valori di colore tra diversi modelli di colore — HEX, RGB, HSL, HSV e CMYK. I designer e gli sviluppatori hanno spesso bisogno di passare tra formati: CSS usa HEX e RGB, gli strumenti di design usano spesso HSL per la scelta intuitiva dei colori e i flussi di lavoro per la stampa richiedono CMYK. Questo strumento gestisce tutte le conversioni istantaneamente.

Ogni modello di colore rappresenta i colori in modo diverso. RGB (Rosso, Verde, Blu) mescola la luce — è usato per gli schermi. CMYK (Ciano, Magenta, Giallo, Nero) mescola l'inchiostro — è usato per la stampa. HSL (Tonalità, Saturazione, Luminosità) descrive i colori nel modo in cui gli esseri umani pensano a loro — colore puro, vivacità e luminosità. HEX è semplicemente RGB scritto in esadecimale.

Modelli di colore spiegati

• HEX — un codice esadecimale a sei cifre (#FF5733). Compatto e ampiamente usato nello sviluppo web.
• RGB — tre valori (0-255) per rosso, verde e blu. Il modello di colore nativo per gli schermi.
• HSL — tonalità (0-360 gradi), saturazione (0-100%) e luminosità (0-100%). Intuitivo per la creazione di palette di colori.
• HSV/HSB — simile a HSL ma usa valore/luminosità invece della luminosità. Comune negli strumenti di grafica.
• CMYK — quattro valori (0-100%) per ciano, magenta, giallo e nero. Usato nella produzione a stampa.

Come usare questo strumento

Inserire un valore di colore in qualsiasi formato supportato e tutte le altre rappresentazioni vengono calcolate istantaneamente. Usare il selettore di colori per la selezione visiva. Lo strumento mostra un campione di anteprima e i valori convertiti nei formati HEX, RGB, HSL, HSV e CMYK, pronti per essere copiati e incollati nel codice o negli strumenti di design.

I colori nello sviluppo web

CSS supporta più formati di colore: hex (#ff5733), rgb(255, 87, 51), hsl(11, 100%, 60%) e colori con nome (tomato). Il CSS moderno supporta anche oklch() e oklab() per spazi di colore percettivamente uniformi. Nella scelta tra formati, HEX è il più compatto, HSL è il più facile da regolare a livello di programmazione (schiarire aumentando L, desaturare diminuendo S) e RGB è il più ampiamente supportato.

Domande frequenti

Perché i colori appaiono diversi sullo schermo e in stampa?

Gli schermi emettono luce (RGB, mescolanza additiva dei colori) mentre le stampanti usano inchiostro che assorbe la luce (CMYK, mescolanza sottrattiva). Il gamut di colori RGB (gamma di colori possibili) è più ampio del CMYK, quindi alcuni colori vivaci degli schermi non possono essere riprodotti in stampa. Ecco perché i designer dovrebbero lavorare in CMYK quando creano materiali stampati e usare i colori Pantone per la corrispondenza cromatica critica.

Qual è la differenza tra HSL e HSV?

Entrambi usano tonalità e saturazione, ma differiscono nel terzo componente. La luminosità di HSL va da 0 (nero) attraverso 0,5 (colore puro) a 1 (bianco). Il valore di HSV va da 0 (nero) a 1 (massima luminosità). In HSL, una saturazione del 100% con luminosità al 50% dà il colore più puro. In HSV, saturazione al 100% e valore al 100% danno il colore più puro. HSL è generalmente più intuitivo per il web design.