Convertitore colori

Converti colori tra HEX, Formati RGB e HSL

Scegli un colore

Oppure inserisci i valori di seguito

HEX

RGB

HSL

Comprensione Formati colore

I colori digitali possono essere rappresentati in più formati, ciascuno con vantaggi diversi. Questo strumento converte perfettamente tra i tre formati di colore web più comuni: HEX, RGB e HSL. Tutto l'elaborazione avviene nel tuo browser: le tue scelte di colore non vengono mai tracciate o memorizzate.

#️⃣ HEX (esadecimale)

Formato: #RRGGBB (6 caratteri) o #RGB (abbreviazione di 3 caratteri)
Esempio: #2563EB o #F00 (rosso)
Ideale per: CSS, attributi HTML, strumenti di progettazione. Il formato più compatto per sviluppo web.

🔴🟢🔵 RGB (Rosso, Verde, Blu)

Formato: rgb(R, G, B) dove ogni valore è 0-255
Esempio: rgb(37, 99, 235)
Ideale per: Funzioni CSS, manipolazione del colore JavaScript, programmazione generazione del colore. Facile da capire come miscelazione leggera.

🌈HSL (Tonalità, Saturazione, Luminosità)

Formato: hsl(H, S%, L%) dove H è 0-360°, S e L sono 0-100%
Esempio: hsl(221, 83%, 53%)
Ideale per: Creazione di combinazioni di colori, regolazione di luminosità/saturazione. La maggior parte intuitivo per la percezione umana.

Casi d'uso comuni

Stile CSS: Converti tra formati per diverse proprietà CSS e compatibilità con il browser
Design Handoff: Traduci i colori da strumenti di progettazione (spesso HEX) in formati compatibili con il codice
Combinazioni di colori: Usa HSL per creare variazioni (regola la luminosità per gli stati al passaggio del mouse)
Accessibilità: Calcola il contrasto rapporti utilizzando valori RGB
Linee guida del marchio: Colori del documento in più formati per diversi casi d'uso

Suggerimenti rapidi sulla teoria dei colori

Creazione Stati al passaggio del mouse

Usa HSL: diminuisci la luminosità del 10-15% per effetti al passaggio del mouse più scuri o aumenta per effetti più chiari quelli. Molto più semplice che calcolare le modifiche RGB.

Garantire Contrasto

Per la conformità WCAG AA, il testo richiede un rapporto di contrasto di 4,5:1. HSL Differenze di luminosità di Oltre il 40% di solito soddisfa questo requisito.

Domande frequenti

Quale formato dovrei usare nei CSS?

Tutti e tre funzionano nei browser moderni. HEX è il più comune e compatto. Usa RGB/HSL quando ne hai bisogno trasparenza (rgba() o hsla()) o manipolazione dinamica del colore.

Cosa significa il # in HEX significa?

Il simbolo # indica un valore di colore esadecimale. È richiesto nei CSS ma spesso facoltativo strumenti di progettazione. I seguenti 6 caratteri rappresentano il rosso, il verde e il blu in base 16 (00-FF = 0-255).

Come funziona HSL Hue?

La tonalità è un grado sulla ruota dei colori: 0° = Rosso, 60° = Giallo, 120° = Verde, 180° = Ciano, 240° = Blu, 300° = Magenta, 360° = torna al Rosso. Rende possibile la selezione dei colori complementari (180° a parte) intuitivo.

Posso aggiungere trasparenza?

Sì! Utilizza rgba(R, G, B, A) o hsla(H, S%, L%, A) dove A è 0-1. I CSS moderni supportano anche 8 caratteri HEX: #RRGGBBAA.

Riferimento colori CSS

                            /* HEX */

                            color: #2563EB;

                            /* RGB */

                            color: rgb(37, 99, 235);

                            /* HSL */

                            color: hsl(221, 83%, 53%);

                            /* With transparency */

                            color: rgba(37, 99, 235, 0.5);

                            color: hsla(221, 83%, 53%, 0.5);