🎨 Convertitore di colori
Incolla un colore in qualsiasi formato – #3B82F6, rgb(), hsl() o un nome inglese come teal – e ottieni tutti gli altri formati, i valori di contrasto per l’accessibilità e una palette di tinte e ombre.
Risposta rapida: #3B82F6 corrisponde a rgb(59, 130, 246), hsl(217, 91%, 60%) e cmyk(76%, 47%, 0%, 4%); il suo rapporto di contrasto è 3,68:1 sul bianco (AA solo per testo grande) e 5,71:1 sul nero (AA).
Ancora nessuna valutazione · Ultimo aggiornamento: · Gratis · Senza registrazione
Dati: Convertitore di colori
Risultato
Colore
#3B82F6
rgb(59, 130, 246)
| HEX | #3B82F6 |
| RGB | rgb(59, 130, 246) |
| HSL | hsl(217, 91%, 60%) |
| HSV / HSB | hsv(217, 76%, 96%) |
| CMYK | cmyk(76%, 47%, 0%, 4%) |
- Contrasto con il bianco
- 3,68:1 · AA solo per testo grande
- Contrasto con il nero
- 5,71:1 · AA
- Colore del testo consigliato
- Nero
Tinte (mescolate con il bianco)
| Tinta | Colore | RGB | HSL |
|---|---|---|---|
| Base | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| 10% | #4F8FF7 | rgb(79, 143, 247) | hsl(217, 91%, 64%) |
| 20% | #629BF8 | rgb(98, 155, 248) | hsl(217, 91%, 68%) |
| 30% | #76A8F9 | rgb(118, 168, 249) | hsl(217, 92%, 72%) |
| 40% | #89B4FA | rgb(137, 180, 250) | hsl(217, 92%, 76%) |
| 50% | #9DC1FB | rgb(157, 193, 251) | hsl(217, 92%, 80%) |
| 60% | #B1CDFB | rgb(177, 205, 251) | hsl(217, 90%, 84%) |
| 70% | #C4DAFC | rgb(196, 218, 252) | hsl(216, 90%, 88%) |
| 80% | #D8E6FD | rgb(216, 230, 253) | hsl(217, 90%, 92%) |
| 90% | #EBF3FE | rgb(235, 243, 254) | hsl(215, 90%, 96%) |
Ombre (mescolate con il nero)
| Ombra | Colore | RGB | HSL |
|---|---|---|---|
| Base | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| 10% | #3575DD | rgb(53, 117, 221) | hsl(217, 71%, 54%) |
| 20% | #2F68C5 | rgb(47, 104, 197) | hsl(217, 61%, 48%) |
| 30% | #295BAC | rgb(41, 91, 172) | hsl(217, 62%, 42%) |
| 40% | #234E94 | rgb(35, 78, 148) | hsl(217, 62%, 36%) |
| 50% | #1E417B | rgb(30, 65, 123) | hsl(217, 61%, 30%) |
| 60% | #183462 | rgb(24, 52, 98) | hsl(217, 61%, 24%) |
| 70% | #12274A | rgb(18, 39, 74) | hsl(218, 61%, 18%) |
| 80% | #0C1A31 | rgb(12, 26, 49) | hsl(217, 61%, 12%) |
| 90% | #060D19 | rgb(6, 13, 25) | hsl(218, 61%, 6%) |
Requisiti di contrasto WCAG
| Livello | Testo normale | Testo grande (da 18 pt, o 14 pt in grassetto) | Sul bianco | Sul nero |
|---|---|---|---|---|
| AA | 4,5:1 | 3:1 | Solo testo grande | Conforme |
| AAA | 7:1 | 4,5:1 | Non conforme | Solo testo grande |
Come usare il convertitore di colori
Incolla un colore in uno dei formati più comuni – #3B82F6, #38F, rgb(59, 130, 246), hsl(217, 91%, 60%), hsv(217, 76%, 96%), cmyk(76%, 47%, 0%, 4%) – oppure un nome di colore di base in inglese, come teal. Ottieni tutti gli altri formati, un campione del colore, i valori di contrasto e una palette di tinte e ombre.
Formule di conversione
HEX → RGB: ogni coppia di cifre esadecimali è un canale, 00–FF = 0–255
CMYK: K = 1 − max(R′, G′, B′) · C = (1 − R′ − K) ÷ (1 − K), lo stesso per M e Y (R′ = R ÷ 255)
HSL: L = (max + min) ÷ 2 · S = (max − min) ÷ (1 − |2L − 1|) · H dal canale dominante
Contrasto = (L1 + 0,05) ÷ (L2 + 0,05), con la luminanza relativa WCAG
Esempio pratico
#3B82F6 si divide in 3B, 82 e F6 = rgb(59, 130, 246). Il blu è il canale più alto (0,965), quindi K = 3,5% e C = (1 − 0,231 − 0,035) ÷ 0,965 = 76%, da cui cmyk(76%, 47%, 0%, 4%). In HSL è hsl(217, 91%, 60%). La sua luminanza relativa è 0,236, quindi il contrasto è 3,68:1 sul bianco e 5,71:1 sul nero: per i testi piccoli usa il nero.
Colori comuni
| Colore | HEX | RGB | HSL |
|---|---|---|---|
| Rosso | #FF0000 | 255, 0, 0 | 0°, 100%, 50% |
| Verde | #008000 | 0, 128, 0 | 120°, 100%, 25% |
| Blu | #0000FF | 0, 0, 255 | 240°, 100%, 50% |
| Arancione | #FFA500 | 255, 165, 0 | 39°, 100%, 50% |
| Verde acqua | #008080 | 0, 128, 128 | 180°, 100%, 25% |
| Grigio | #808080 | 128, 128, 128 | 0°, 0%, 50% |
Consigli
- I valori CMYK qui sono una conversione semplice, indipendente dal dispositivo: per la stampa professionale converti con il profilo ICC della tua tipografia.
- Controlla il contrasto di ogni coppia testo/sfondo del progetto, non solo del colore del marchio.
Domande frequenti
Come si converte un colore da HEX a RGB?
Dividi le sei cifre esadecimali in tre coppie e converti ciascuna da base 16 a decimale. #3B82F6 → 3B = 59, 82 = 130, F6 = 246, quindi rgb(59, 130, 246).
Che differenza c’è tra RGB e CMYK?
RGB mescola luce rossa, verde e blu per gli schermi; CMYK mescola inchiostri ciano, magenta, giallo e nero per la stampa. I colori molto brillanti o saturi che si vedono a schermo non sempre si possono riprodurre in stampa.
Che differenza c’è tra HSL e HSV?
Entrambi descrivono la tonalità come un angolo (0–360°) più la saturazione. La luminosità di HSL va dal nero al bianco passando per il colore puro, mentre il valore di HSV (detto anche luminosità HSB) va dal nero al colore puro.
Quale rapporto di contrasto serve per un testo accessibile?
Il livello AA delle WCAG 2 richiede 4,5:1 per il testo normale e 3:1 per il testo grande (18 pt, oppure 14 pt in grassetto). Il livello AAA richiede 7:1 e 4,5:1.
Cosa sono tinte e ombre di un colore?
Una tinta è il colore mescolato con il bianco, che lo schiarisce; un’ombra è il colore mescolato con il nero, che lo scurisce. Sono un modo rapido per costruire una palette coerente partendo da un solo colore del marchio.
Valuta questo strumento
Viene mostrata solo la valutazione media. Le segnalazioni di errore arrivano direttamente nella nostra casella di posta, così possiamo verificarle e correggerle. Consulta la nostra Metodologia e la nostra informativa sulla privacy.