Convertitore colori — HEX, RGB, HSL e alfa
Converti un colore sRGB supportato in HEX, RGB e HSL, con alfa. Controlla gli arrotondamenti: non è un parser CSS completo né garantisce corrispondenza tra schermi.
Come convertire
- Inserisci un HEX con # o una funzione rgb/rgba/hsl/hsla supportata. L’esempio inserisce #33669980 senza convertire; usa il punto decimale.
- Premi Converti. Il colore non arrotondato e l’alfa indipendente producono ogni formato separatamente; modificare il testo rimuove il risultato precedente.
- Copia un codice o tutte e tre le righe. Controlla gli avvisi di arrotondamento e del byte alfa; il campione non è calibrato.
Canali e sintassi
HEX3/4 duplica le cifre; HEX6/8 usa byte, con alfa finale. RGB accetta numeri 0–255 o percentuali 0–100%. La sintassi moderna usa spazi e barra; quella tradizionale usa virgole e non mescola numeri e percentuali.
HSL usa gradi, eventualmente con deg, e percentuali di saturazione e chiarezza. La tonalità è ciclica; la chiarezza HSL non è luminanza relativa. Il calcolo usa sRGB codificato.
Alfa è indipendente dai canali RGB: alfa zero non cancella il colore né lo miscela con uno sfondo. In HEX8, 0.5 diventa il byte 128, cioè 128/255.
Con canali RGB uguali si usa H=0 e S=0; la tonalità originale non è recuperabile univocamente. Con croma non zero si mantiene la tonalità matematica senza soglia di tolleranza.
Esempi e arrotondamento
#33669980 contiene byte 51, 102, 153 e alfa 128/255. I canali codificati 0.2, 0.4, 0.6 danno HSL 210°, 50%, 40%; l’alfa funzionale è arrotondato a 0.50196078.
hsl(210 100% 50% / .5) dà RGB 0, 127.5, 255. Gli spareggi di canale e alfa si arrotondano verso l’alto: HEX #0080FF80, mentre la funzione mantiene alfa 0.5.
rgb(17 34 51 / 99.999999%) mantiene alfa funzionale 0.99999999, ma il byte diventa FF: #112233FF. Con 0.000001%, la funzione mantiene 0.00000001 e il byte diventa 00.
Limiti
Prima di rimuovere gli spazi sono ammesse 256 unità UTF-16 e 16 caratteri ASCII per numero. RGB numerico e alfa numerico ammettono 8 decimali; percentuali e HSL 6. Niente esponenti; tonalità entro ±1000000°. I valori fuori intervallo sono respinti.
Nomi, transparent, currentColor, none, commenti, variabili, calcoli, altri spazi e unità angolari non sono supportati. HSL richiede percentuali S/L. Parte di questa sintassi è valida in CSS.
HEX arrotonda al byte più vicino, con spareggi verso l’alto; RGB e alfa funzionale usano fino a 8 decimali, HSL fino a 6. Una tonalità arrotondata a 360 diventa 0. Il ritorno esatto non è garantito.
Non offre conversione ICC, CMYK o ampia gamma, classificazione del contrasto o certificazione della corrispondenza. Il campione illustra l’RGB generato; la chiarezza HSL non valuta l’accessibilità.
Privacy
Il calcolo avviene nel browser senza caricamenti, account, cronologia, registrazione dell’input o link con il colore aggiunti dallo strumento. La copia è su richiesta; se fallisce è disponibile testo di sola lettura. Gli altri servizi seguono le politiche del sito.
Domande frequenti
Fonti e metodo
CSS Color 4 descrive i formati e i calcoli di riferimento per questo convertitore limitato.
- W3Cw3.orgNotazione HEXNumero di cifre, ordine dei canali e alfa in esadecimale.
- W3Cw3.orgFunzioni RGBSintassi dei canali RGB e alfa.
- W3Cw3.orgFunzioni HSLSintassi di tonalità, saturazione e chiarezza.
- W3Cw3.orgValori alfaAlfa rappresenta l’opacità indipendentemente dai canali di colore.
- W3Cw3.orgDa HSL a RGBConversione tra HSL e componenti RGB codificati.
- W3Cw3.orgComponenti senza effettoQuando un componente non influenza il colore, inclusa la tonalità neutra.
Il convertitore implementa un sottoinsieme limitato e proprie regole di arrotondamento, non tutto CSS.
Strumenti correlati
Da SVG a PNG
Converti un file SVG locale o il codice incollato in PNG, con dimensioni definite, trasparenza e caratteri inclusi.
Apri strumento — Da SVG a PNGGeneratore di filtri CSS
Ordina e ripeti gli effetti CSS, confronta un campione e copia la dichiarazione esatta.
Apri strumento — Generatore di filtri CSSCalcolatore della dimensione fluida del testo
Definisci la dimensione del testo per due larghezze del viewport. Copia il CSS relativo alla radice e osserva il modello calcolato con gli stessi coefficienti esportati.
Apri strumento — Calcolatore della dimensione fluida del testoGeneratore di pulsanti CSS
Personalizza gli stati di un pulsante nativo, verifica il focus e copia HTML e CSS.
Apri strumento — Generatore di pulsanti CSSGeneratore CSS border-radius
Modifica otto raggi, visualizza il riquadro e copia il CSS in pixel o percentuale.
Apri strumento — Generatore CSS border-radiusGeneratore CSS Grid
Crea un esempio CSS Grid con tracce, posizioni e aree con nome. Visualizza l’anteprima, copia CSS o HTML e scarica l’esempio completo.
Apri strumento — Generatore CSS GridGeneratore CSS Flexbox
Crea un esempio Flexbox con controlli di contenitori ed elementi, assi di layout espliciti, CSS e HTML corrispondenti e download locale di un esempio completo.
Apri strumento — Generatore CSS FlexboxGeneratore CSS di ombre del testo
Crea ombre del testo ordinate, visualizza testo semplice e copia il CSS esatto.
Apri strumento — Generatore CSS di ombre del testoGeneratore di trasformazioni CSS
Componi trasformazioni 2D CSS ripetibili, modifica px o la traslazione e l'origine percentuale, ispeziona una casella di riferimento e copia le esatte dichiarazioni attuali.
Apri strumento — Generatore di trasformazioni CSSGeneratore di ombre CSS
Crea livelli box-shadow ordinati, visualizza l’anteprima e copia il codice CSS.
Apri strumento — Generatore di ombre CSSFiligrana per immagini
Aggiungi testo o un logo alle immagini, controlla i risultati e scarica i singoli file o uno ZIP.
Apri strumento — Filigrana per immaginiGeneratore di gradienti CSS
Crea gradienti lineari o radiali regolando colori, opacità e punti.
Apri strumento — Generatore di gradienti CSSImmagine in testo (OCR)
Riconosci testo stampato in PNG o JPEG locali, scegli la lingua e controlla o correggi il risultato prima di copiarlo o scaricarlo.
Apri strumento — Immagine in testo (OCR)Lettore di codici QR da immagine
Leggi un codice QR da un PNG o JPEG locale ed esamina testo o byte senza aprire link.
Apri strumento — Lettore di codici QR da immagineVerifica contrasto colori
Confronta i colori di primo piano e sfondo, regola l’opacità e verifica le soglie numeriche WCAG per testo e dettagli essenziali dell’interfaccia.
Apri strumento — Verifica contrasto coloriCalcolatore dimensioni di stampa e risoluzione
Calcola le dimensioni di stampa, i pixel necessari e i PPI effettivi con bordi o ritaglio.
Apri strumento — Calcolatore dimensioni di stampa e risoluzioneCalcolatore del rapporto d’aspetto
Trova il rapporto tra larghezza e altezza o nuove dimensioni in pixel impostando un solo lato.
Apri strumento — Calcolatore del rapporto d’aspettoCompressore immagini
Prova ad adattare un JPEG, PNG o WebP a una dimensione file desiderata, con risultati misurati e dimensioni riducibili.
Apri strumento — Compressore immaginiHEIC in JPG
Converti localmente le foto HEIC supportate in JPG a piena risoluzione, scegli qualità e sfondo e scarica i risultati verificati singolarmente o in ZIP.
Apri strumento — HEIC in JPGConvertitore di immagini
Converti immagini PNG, JPEG e WebP in locale, imposta trasparenza, sfondo e qualità e scarica i risultati.
Apri strumento — Convertitore di immaginiCrea collage di foto
Disponi le foto locali in una griglia e scarica un PNG o JPEG.
Apri strumento — Crea collage di fotoRuotare e riflettere immagini
Ruota o rifletti un gruppo locale di immagini statiche PNG, JPEG e WebP, poi controlla e scarica i risultati elaborati.
Apri strumento — Ruotare e riflettere immaginiRitagliare immagini
Ritaglia un JPEG, PNG o WebP locale con precisione in pixel e scarica il risultato in PNG o JPEG.
Apri strumento — Ritagliare immaginiRidimensionare immagini
Ridimensiona JPG, PNG o WebP in pixel o percentuale, controlla l’anteprima e scarica il risultato.
Apri strumento — Ridimensionare immagini