Convertitore di colori (HEX, RGB, HSL)
Convert colors between HEX (#RRGGBB), RGB (0–255), and HSL (hue, saturation, lightness) in real time. Adjust the picker or type values to see all formats update together — ideal for CSS, Figma handoff, and brand guidelines. HSL makes intuitive tweaks (lighter/darker without hue shift) easier than editing hex digits.
Colore
Risultato
HEX: #6f9b96
RGB: rgb(111, 155, 150)
HSL: hsl(173, 18%, 52%)
How to convert colors
1. Pick a color visually or enter HEX, RGB, or HSL values.
2. See equivalent values in all supported formats instantly.
3. Tweak HSL lightness for hover states while keeping brand hue.
4. Copy the format your stack needs (#hex for CSS, rgb() for modern browsers).
Esempi di conversione del colore
Marchio blu #2563EB
RGB rgb(37, 99, 235); HSL hsl(217, 84%, 53%). Oscura il passaggio del mouse: hsl(217, 84%, 45%) senza indovinare l'esadecimale.
CSS da rgb a esadecimale per SVG
rgb(255, 87, 51) → #FF5733 per le risorse di riempimento SVG e colore Android XML.
Grigio neutro per i bordi
hsl(220, 10%, 90%) → grigio freddo molto chiaro; aumentare leggermente la saturazione per gli sfondi colorati dell'interfaccia utente.
Quando usare questo strumento
• Quando traduci i token di progettazione tra HEX in Figma e HSL nelle variabili CSS.
• Quando crei temi chiaro/scuro coerenti modificando la luminosità HSL.
• Quando documenti le tavolozze dei marchi per sviluppatori e operatori di marketing.
Quando scegliere altro
• Quando devi verificare il contrasto WCAG, utilizza il controllo del contrasto.
• Se hai bisogno di CMYK o Pantone per la stampa, utilizza strumenti specifici per la stampa.
• Quando generi gradienti completi, utilizza il generatore di gradienti CSS.
Teoria dei colori per il lavoro sull'interfaccia utente
I colori complementari si trovano di fronte sulla ruota delle tonalità (a 180° di distanza): contrasto elevato, da usare con parsimonia per le CTA. Tonalità analoghe (±30°) sembrano armoniose per i cruscotti. Il cromo neutro dell'interfaccia utente utilizza spesso blu o grigi a bassa saturazione (HSL 220, 10%, 96%) anziché #EEE puro, che può apparire caldo/freddo sotto schermi diversi. Limita la tavolozza del marchio a una tonalità primaria, 2-3 neutri e verdi/rossi semantici per lo status.
L'accessibilità inizia con la conversione
Un bel #7C3AED viola su bianco potrebbe non riuscire a contrastare il testo piccolo. Dopo aver scelto i colori qui, esegui le coppie primo piano/sfondo attraverso il controllo del contrasto. Preferisci le modifiche HSL per correggere gli errori: scurisci il testo o schiarisci lo sfondo preservando la tonalità. Non fare affidamento solo sul colore per gli errori: abbinalo a icone ed etichette (WCAG 1.4.1).
Domande frequenti
A cosa serve l'HSL?
Regolazione della luminosità e della saturazione mantenendo la tonalità stabile, ad es. primario, primario al passaggio del mouse, primario disattivato da un valore di tonalità.
abbreviazione HEX #RGB?
#F53 si espande in #FF5533. Accettiamo valori esadecimali da 3 o 6 cifre (# facoltativo).
sRGB vs display-P3?
Questo strumento utilizza sRGB, standard per il web CSS. I display ad ampia gamma potrebbero essere visualizzati in modo leggermente diverso.
Alfa/trasparenza?
Potrebbero essere supportati HEX a 8 cifre (#RRGGBBAA) e rgba() laddove lo strumento espone alfa: controlla i campi dell'interfaccia utente.
Perché le mie somme RGB appaiono errate in formato esadecimale?
Ciascun canale è 0–255 → due cifre esadecimali. 255 = FF, non “255” concatenato.
I miei dati vengono inviati a un server?
NO.
Questo strumento è gratuito?
Sì.