Vai al contenuto
Allin
Registrati · Accedi

Convertitore di colori

Converti un colore in HEX, RGB, HSL, HSV, CMYK, LAB e OKLCH, contrasto incluso.

Strumenti correlati

Tutti gli strumenti: Colori e CSS →
Generatore di faviconCrea una favicon con una lettera e colori e scaricala in PNG.Convertitore di immaginiConverti le tue immagini in PNG, JPG, WebP, AVIF, BMP, GIF, TIFF o ICO, in blocco e senza caricare nulla.Verificatore di contrasto dei coloriRapporto di contrasto WCAG tra testo e sfondo, con esito AA/AAA e anteprima dal vivo.Invertitore di coloreInverti un colore (255 − RGB) o prendi il complementare, in HEX/RGB/HSL/CMYK con il contrasto.Generatore di schemi di coloreDeriva schemi complementare, analogo, triadico, tetradico, diviso e monocromatico da un colore base.Selettore di colore da immagineCarica un'immagine, clicca per campionare un pixel ed estrai una palette dominante, con HEX e RGB per ogni campione.

Questo convertitore di colori gratuito trasforma qualsiasi colore tra HEX, RGB e HSL all'istante nel browser. Inserisci un valore in un formato e leggilo in tutti gli altri, pronto da incollare in CSS, in uno strumento di design o nel tuo codice. Perfetto per rispettare i colori del brand, creare palette e regolare le tonalità.

Come si usa

  1. Inserisci un colore in HEX, RGB o HSL.
  2. Leggi i valori equivalenti in ogni altro formato.
  3. Copia il formato che ti serve nel tuo progetto.

Domande frequenti

Come converto HEX in RGB?

Un colore HEX come #4287f5 sono tre coppie — rosso (42), verde (87), blu (f5) — ciascuna letta come numero da 0 a 255. Questo strumento fa la conversione all'istante.

Cos'è HSL?

HSL sta per Tonalità (Hue), Saturazione e Luminosità (Lightness). Spesso più comodo di RGB per regolare un colore: aumenta la luminosità per schiarire, abbassa la saturazione per attenuare, sposta la tonalità per cambiare colore.

Che differenza c'è tra HEX e RGB?

Descrivono lo stesso colore — HEX è una notazione compatta in base 16 (#ff0000), RGB elenca i canali in decimale (rgb(255,0,0)). Entrambi sono supportati in CSS.

Posso usare questi valori in CSS?

Sì. HEX, rgb() e hsl() sono valori di colore CSS validi — copia quello adatto al tuo foglio di stile o design system.

Che cos'è Convertitore di colori?

Converti un colore in HEX, RGB, HSL, HSV, CMYK, LAB e OKLCH, contrasto incluso.

In quali casi si usa davvero?

Portare un colore da uno strumento di design a un foglio di stile, costruire una palette attorno a un colore di marca e verificare che il testo vi resti leggibile.

Qual è l'errore più comune?

Giudicare il contrasto a occhio. Due colori che sembrano distinti su un monitor luminoso possono fallire nettamente il rapporto di accessibilità, ed è quel rapporto che un audit misurerà.

In cosa differisce Convertitore di colori da Verificatore di contrasto dei colori?

Sono vicini ma rispondono a domande diverse: Verificatore di contrasto dei colori è quello da aprire quando si tratta di rapporto di contrasto WCAG tra testo e sfondo, con esito AA/AAA e anteprima dal vivo. Scegli quello che corrisponde al tuo punto di partenza — entrambi sono gratuiti.

Esiste uno strumento per il passo successivo?

Invertitore di colore è il più vicino dopo questo: Inverti un colore (255 − RGB) o prendi il complementare, in HEX/RGB/HSL/CMYK con il contrasto.

Cos'altro conviene tenere aperto accanto?

Generatore di schemi di colore e Selettore di colore da immagine: ricorrono nella stessa attività abbastanza spesso da meritare una seconda scheda.

Per approfondire

Tutte le guide →
TutorialHEX vs RGB: leggere e convertire i coloriHEX e RGB sono due notazioni per gli stessi colori. Ecco come leggere ciascuna, convertire tra loro e aggiungere trasparenza.SpiegazioneRapporto di contrasto: come lo calcola davvero la WCAGIl rapporto WCAG è (L1 + 0,05) ÷ (L2 + 0,05), e L è la luminanza relativa, non la luminosità. Il verde ne porta il 71,52 % e il blu il 7,22 %, ecco perché il blu puro su bianco passa a 8,59:1 mentre il grigio medio fallisce a 3,95:1. Ecco l'intero calcolo, eseguito dall'inizio alla fine.SpiegazioneGradienti, banding e perché il centro sembra spentoInterpolare in sRGB fa la media di numeri codificati in gamma: il punto medio da rosso a verde è #808000 quando la risposta a mezza luce è #bcbc00 — il 57,2 % di luce in meno. Il banding è un problema aritmetico distinto: 8 bit danno 256 gradini, e un gradiente scuro può averne solo 28. Ecco entrambi, calcolati.SpiegazioneGli schemi di colore sono geometria su una ruota — e la ruota è sbagliataComplementare, triade, analogo e complementare diviso sono solo rotazioni: aggiungi 180°, 120°, 30° o 150° a una tinta. L'aritmetica è banale. Il problema è che il cerchio delle tinte HSL non è percettivamente uniforme — giallo e blu alla stessa luminosità HSL differiscono di 12,85 volte in luminanza — quindi una tavolozza generata va poi verificata nel contrasto.GuidaChe cosa può togliere un minificatore e che cosa non deve toccareLa minificazione deve preservare il significato, e la parte interessante è lo spazio bianco che porta significato: il combinatore discendente, gli spazi dentro calc(), lo stacco fra due elementi inline. Misurato qui su file reali, compreso ciò che brotli ti avrebbe risparmiato comunque.GuidaFormattare o minificare: a cosa serve ciascuno e cosa cambia sul pesoQuattro fogli di stile veri passati nel minificatore, misurati grezzi e dopo gzip. Togliere tutti gli spazi ha fatto risparmiare 48, 103, 104 e 147 byte compressi; togliere i commenti 57, 1 358, 2 420 e 1 042. E i cinque input che questo minificatore rompe.