AllinHub

Convertitore di colori

Un colore in ingresso, tutte le notazioni in uscita, più sfumature e contrasto WCAG.

Input

Hex, rgb(), hsl(), hsv(), cmyk() o un nome di colore CSS. Nelle percentuali valgono sia la virgola sia il punto.

In tutte le notazioni

  • HEX –
  • RGB –
  • HSL –
  • HSV –
  • CMYK –
  • Nome –

Il CMYK viene dalla formula semplice, senza profilo di stampa; gli inchiostri stampati appariranno diversi.

Sfumature e armonie

La luminosità avanza a passi uguali verso il bianco e verso il nero; il complementare sta all’opposto sul cerchio cromatico e gli analoghi a 30° per lato. Fai clic su un campione per copiarne l’hex.

Più chiare

Più scure

Complementare

Analoghi

Verificatore di contrasto

Scrivi un colore valido sopra e un secondo qui per misurare il contrasto.

Livello WCAG Minimo Esito
AA, testo normale 4.5:1 –
AA, testo grande 3:1 –
AAA, testo normale 7:1 –
AAA, testo grande 4.5:1 –

Il testo grande è di almeno 18 pt, o 14 pt in grassetto (circa 24 px, o 18,7 px in grassetto). Il rapporto è giudicato sul valore esatto e mostrato con due decimali.

Strumenti correlati

Incolla o scrivi un colore nella notazione che hai: un codice hex con o senza #, rgb() o rgba(), hsl(), hsv(), cmyk() oppure uno dei 148 nomi di colore CSS. Il convertitore lo mostra nelle altre notazioni mentre scrivi, ognuna con il suo pulsante di copia, e il selettore nativo accanto al campo resta sincronizzato in entrambe le direzioni. Sotto, le sfumature più chiare e più scure, il colore complementare e due analoghi formano una palette rapida, e il verificatore di contrasto misura il rapporto WCAG rispetto a bianco, nero o qualsiasi altro colore. Tutto gira nel tuo browser; il colore non viene inviato da nessuna parte.

Come si usa

  1. Scrivi o incolla un colore: #1e90ff, rgb(30, 144, 255), hsl(210, 100%, 56%) o dodgerblue.
  2. Leggilo nelle altre notazioni e copia quella che ti serve; Ctrl+Maiusc+C copia il valore su cui ti trovi.
  3. Trascina il selettore accanto al campo per regolare il colore; il campo e tutte le notazioni seguono.
  4. Scegli bianco, nero o un altro colore nel verificatore di contrasto e leggi il rapporto con i segni di superato e non superato.

Cosa gestisce

  • Accetta hex a 3, 4, 6 e 8 cifre, rgb() con valori o percentuali, hsl(), hsv() o hsb(), cmyk(), elenchi come 30, 144, 255 e tutti i 148 nomi di colore CSS.
  • Porta l’alfa in hex, rgb(), hsl() e hsv(); CMYK e la palette non lo hanno, e una nota lo dice quando viene scartato.
  • Riporta nei limiti i valori fuori intervallo come fa CSS e lo segnala; la tonalità gira intorno al cerchio.
  • Capisce la virgola decimale nelle percentuali come 55,9% quando l’elenco è separato da spazi o da virgola e spazio.
  • Mostra ogni verdetto di contrasto con parola e simbolo, mai solo con il colore.

Domande frequenti

Che differenza c’è tra HSL e HSV?

Entrambi descrivono un colore con tonalità, saturazione e un terzo asse. In HSL è la luminosità: 100% è sempre bianco e 50% è la tonalità pura a piena saturazione. In HSV, detto anche HSB, è il valore o brillantezza: 100% è la tonalità pura stessa, e il bianco si ottiene abbassando la saturazione. I selettori dei programmi di grafica usano spesso HSV, CSS usa HSL; il convertitore calcola entrambi dallo stesso colore.

Perché il CMYK stampato è diverso?

Il CMYK qui viene dalla formula semplice: il nero prende la parte più scura del colore e gli altri tre inchiostri riempiono il resto, senza alcun profilo ICC. La stampa vera dipende dalla carta, dal set di inchiostri e dal profilo della tipografia, il cui software converte il colore RGB attraverso quel profilo, quindi le sue percentuali saranno diverse da queste. Prendi questo CMYK come punto di partenza, non come valori definitivi.

Che rapporto di contrasto serve per il testo?

WCAG 2 chiede almeno 4,5:1 tra testo normale e sfondo al livello AA e 3:1 per il testo grande, cioè 18 punti o 14 punti in grassetto, circa 24 px o 18,7 px in grassetto. Il livello AAA alza i minimi a 7:1 e 4,5:1. Il verificatore calcola il rapporto dalla luminanza relativa come la definisce lo standard e giudica il valore esatto: 4,4999 non passa anche se sullo schermo si legge 4,50.

Il colore che scrivo viene inviato da qualche parte?

No. Lettura, conversione e calcolo del contrasto avvengono nella pagina stessa, quindi nulla lascia il tuo dispositivo e la pagina funziona anche offline. L’ultimo colore e il secondo colore del verificatore restano solo in questo browser, e il colore principale compare nella barra degli indirizzi come ?c=, così un link copiato lo riapre. Cancella rimuove entrambi.

Aggiornato il

Tutti gli strumenti