Convertitore di colori

Come usarlo

Un colore sul web è solitamente scritto in uno di tre formati: HEX, RGB o HSL. HEX comprime un colore in una singola stringa — un # seguito da sei cifre esadecimali, prese in coppia per rosso, verde e blu, ogni coppia che va da 00 (nessuno) a FF (pieno). RGB descrive gli stessi tre canali come numeri semplici invece di coppie esadecimali, con rosso, verde e blu ciascuno che va da 0 a 255. HSL usa un angolo diverso: invece di intensità dei canali, descrive la tonalità come una posizione su una ruota di colore a 360°, poi saturazione e luminosità come percentuali, che si mappano molto più naturalmente a come le persone pensano effettivamente al colore. Ciascun formato persiste perché è più adatto a un compito diverso, non perché uno ha sostituito gli altri. HEX è compatto e facile da incollare in CSS o uno strumento di progettazione — sei caratteri catturano un colore esatto senza ambiguità. RGB si mappa direttamente a come gli schermi effettivamente producono il colore, mescolando la luce rossa, verde e blu a livello di pixel, e si estende pulitamente a rgba() aggiungendo un quarto canale alfa per la trasparenza. HSL è quello che gli umani raggiungono quando regolano un colore piuttosto che specificarlo da zero: aumentare o diminuire la luminosità dà una tonalità più chiara o più scura prevedibile, e scorrere la tonalità si muove uniformemente intorno alla ruota di colore per costruire una tavolozza corrispondente. Un esempio concreto chiarisce la relazione. Prendi un blu medio: come HEX è #3B82F6. Diviso in coppie, 3B, 82 e F6 si convertono da esadecimale a decimale come 59, 130 e 246 — esattamente lo stesso colore scritto come rgb(59, 130, 246). Converti gli stessi valori rosso, verde e blu in tonalità, saturazione e luminosità e ottieni hsl(217°, 91%, 60%): una tonalità di 217° si trova nel segmento blu della ruota di colore, 91% di saturazione significa che è un blu vivido e non smorzato, e 60% di luminosità lo colloca approssimativamente nel mezzo dell'intervallo di luminosità da nero a bianco. Tutte e tre le stringhe descrivono il colore dei pixel identico. Per utilizzare il convertitore, digita un colore nell'input in uno qualsiasi dei tre formati — un codice HEX, un valore rgb() o un valore hsl() — o fai clic sulla tavolozza colori e scegli visivamente. Non appena viene riconosciuto un colore valido, gli altri due formati si aggiornano istantaneamente insieme a un campione di anteprima dal vivo, in modo da poter confermare che il risultato corrisponda a quello che ti aspetti prima di copiarlo. Fai clic sull'icona di copia accanto a qualsiasi valore per afferrarlo in quel formato esatto per incollarlo in CSS, uno strumento di progettazione o codice. La conversione tra formati viene fuori costantemente nel lavoro reale: abbinare il colore esatto di un marchio quando un cliente consegna un codice HEX ma il tuo strumento di progettazione vuole i cursori HSL, costruire un tema CSS dove hai bisogno di valori RGB coerenti per gli overlay rgba(), regolare la luminosità di un colore base su o giù di alcuni percento per creare uno stato hover o attivo convincente e verificare che i colori di testo e sfondo abbiano abbastanza contrasto per l'accessibilità confrontando i loro valori di luminosità.

Domande frequenti

Cos'è un codice colore HEX?

Un codice colore HEX è un simbolo hash seguito da sei cifre esadecimali, come #3B82F6. Le sei cifre formano tre coppie, ogni coppia che imposta l'intensità di rosso, verde e blu su una scala da 00 (nessuno) a FF (pieno, 255 in decimale). Poiché è compatto e non ambiguo, HEX è il modo più comune per specificare colori esatti in CSS e strumenti di progettazione.

Qual è la differenza tra RGB e HSL?

RGB descrive un colore come tre intensità di canale — rosso, verde e blu, ciascuno da 0 a 255 — abbinando a come gli schermi mescolano la luce per produrre il colore. HSL descrive lo stesso colore come tonalità (la sua posizione su una ruota di colore a 360°), saturazione (quanto è vivido o smorzato) e luminosità (quanto è vicino al nero o al bianco). RGB è preciso per gli schermi; HSL è più facile per gli umani da regolare intuitivamente.

Come converto HEX a RGB?

Dividi le sei cifre HEX in tre coppie — la prima per il rosso, la seconda per il verde, la terza per il blu — e converti ogni coppia da esadecimale a decimale per ottenere un numero da 0 a 255. Ad esempio, #3B82F6 si divide in 3B, 82 e F6, che si convertono a 59, 130 e 246, dando rgb(59, 130, 246). Questo convertitore esegue la matematica istantaneamente mentre digiti.

Cosa fa il canale alfa?

Il canale alfa controlla la trasparenza, aggiunto come quarto valore insieme a rosso, verde e blu in rgba() o hsla(), che va da 0 (completamente trasparente) a 1 (completamente opaco). Ti permette di miscelare un colore con tutto ciò che si trova dietro di esso — utile per overlay, bordi sottili o attenuazione di un elemento senza cambiare il suo colore sottostante. HEX lo supporta anche, come una quarta o ottava coppia di cifre opzionale.