Convertitore di colori (HEX/RGB/HSL)
Converte i colori tra i formati HEX, RGB e HSL. Scelga un colore visivamente o inserisca i valori manualmente.
#535bebrgb(83, 91, 235)hsl(237, 79%, 62%)Come usare questo strumento
- 1
Click the color swatch to open your operating system's color picker and choose a color visually.
- 2
Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.
- 3
Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.
- 4
Copy whichever format you need straight into your CSS or design file.
Che cos'è il Convertitore di colori (HEX/RGB/HSL)?
HEX, RGB e HSL sono tre modi di esprimere lo stesso colore. HEX (#RRGGBB) è il più comune nel CSS e negli strumenti di design. RGB (rgb(R,G,B)) separa i canali numericamente. HSL (hsl(H,S%,L%)) è più intuitivo per le persone: la tonalità (hue) è il colore, la saturazione è l'intensità e la luminosità (lightness) è la chiarezza. Usi HSL per progettare le palette; lo converta in HEX per l'implementazione.
Casi d'uso comuni
Translating a brand HEX code from a style guide into the rgb() values a legacy stylesheet or email template requires.
Grabbing the HSL form of a color so you can nudge its lightness or saturation while keeping the same hue for a palette.
Checking the exact RGB channels of a color picked from a screenshot or mockup before writing it into CSS.
Confirming what a designer's HEX swatch becomes in RGB for a canvas, SVG, or charting library that wants numeric channels.
Teaching or learning how hexadecimal color notation maps to decimal RGB and to the HSL model.
Quickly sampling a color visually with the picker and reading all three CSS-ready notations at once.
Domande frequenti
Quando dovrei usare HSL invece di HEX?▼
E OKLCH e gli spazi colore moderni?▼
Strumenti correlati
Generatore di box shadow CSS
Crea valori di box-shadow in CSS in modo visivo. Anteprima in tempo reale e copia del CSS generato.
Generatore di gradienti CSS
Crea gradienti CSS lineari e radiali. Scelga i colori in modo visivo e copi il CSS generato.
Generatore di curve di accelerazione cubic-bezier
Crea curve di accelerazione cubic-bezier per il CSS. Include preset standard.
Generatore di palette di colori
Genera palette di colori armoniose a partire da qualsiasi colore di base. Supporta schemi complementari, analoghi, triadici e monocromatici.
Generatore di border radius CSS
Crea valori complessi di border-radius in CSS in modo visivo. Controllo indipendente di ciascun angolo.
Generatore di CSS clamp()
Genera valori CSS fluidi e responsivi con clamp(). Scala in modo uniforme tra dimensioni minime e massime lungo gli intervalli del viewport.