Convertitore di colori
Incolla un colore in hex, rgb() o hsl() e ottieni tutti e tre i formati più una riga già pronta di tinte e ombre per il tuo design system.
#0071e3rgb(0, 113, 227)hsl(210, 100%, 45%)Not a color we can read. Try #0071e3, rgb(0, 113, 227) or hsl(211, 100%, 45%).
The swatch row mixes the color with white (left) and black (right) at 20/40/60/80% — handy for hover states and dark-mode variants.
Questo strumento gira interamente nel tuo browser. I tuoi dati non lasciano mai il dispositivo: non vengono caricati su nessun server.
Come si usa
- 1Incolla un colore in uno dei tre formati — hex, rgb() o hsl().
- 2Leggi i valori convertiti e copia quello che ti serve.
- 3Prendi tinte e ombre dalla riga di campioni qui sotto.
Convertitore di colori
Dagli #0071e3, rgb(0, 113, 227) o hsl(211, 100%, 45%) — il parser rileva il formato da solo ed emette hex, RGB e HSL insieme, ognuno con la copia a un clic.
Sotto i valori, una riga di tinte e ombre mescola il tuo colore con bianco e nero a passi del 20/40/60/80%: stati hover, bordi e varianti dark-mode immediati senza aprire uno strumento di design.
Domande frequenti
Come si converte HSL in RGB?
Tramite la mappatura standard cilindrica→RGB: cromaticità c = (1 − |2L − 1|) × S, un valore intermedio x determinato dal settore della tonalità, poi ogni canale viene scostato di m = L − c/2. La matematica è quella dei libri di testo, quindi i risultati corrispondono agli strumenti di design.
Perché il mio codice colore appare come non valido?
Le forme accettate sono #RGB / #RRGGBB, rgb(r, g, b) e hsl(h, s%, l%). I canali devono stare nel loro intervallo (0–255 per RGB, 0–360 per la tonalità, 0–100% per il resto) e ogni parte separata da virgola o spazio.
A cosa servono tinte e ombre?
Le tinte (mescolate con il bianco) fanno sfondi hover, badge e card; le ombre (mescolate con il nero) fanno stati premuti, bordi e superfici dark-mode. Derivare entrambe da un solo colore del marchio tiene ogni stato dell'interfaccia visivamente coerente.
Strumenti correlati
Selettore colori
Scegli un colore dal campione o prendine uno direttamente dallo schermo con l'API EyeDropper — hex, RGB e HSL copiati con un clic.
Tutti gli strumenti →
Generatore di codici QR
Trasforma qualsiasi testo o URL in un codice QR nitido con dimensione, colori e livello di correzione errori regolabili — scarica come PNG o SVG.
Tutti gli strumenti →
Calcolatrice di proporzioni
Data una proporzione come 16:9 e una dimensione, ottieni all'istante larghezza o altezza mancante — più preset dal 1:1 al 21:9 per video e design.
Tutti gli strumenti →
Generatore UUID
Genera identificatori UUID v4 casuali in blocco con un clic — da 1 a 500 alla volta, con la casualità crittografica del tuo browser. Gratis, istantaneo, funziona offline.
Tutti gli strumenti →
Incorpora questo strumento
Metti questo strumento sul tuo sito con una riga: gira nel browser del visitatore.
<iframe src="https://zoyku.com/it/tools/color-converter?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — color-converter" loading="lazy"></iframe>