Convertitore di colori

Inserisci un valore colore in formato HEX, RGB o HSL e vedilo convertito istantaneamente in tutti gli altri formati. Tutta l’elaborazione avviene localmente nel tuo browser.

Inserisci HEX (#rrggbb), RGB (rgb(r,g,b)) o HSL (hsl(h,s%,l%)) - oppure usa il selettore.
Copiato!

Contrasto su sfondi semplici

Su bianco
Su nero

Informazioni sui formati colore

  • HEX - #rrggbb, il formato colore CSS più comune.
  • RGB - rgb(r, g, b), ogni canale 0-255.
  • HSL - hsl(h, s%, l%), tonalità 0-360, saturazione e luminosità 0-100%.

Viene accettato tutto quello che il browser capisce, compreso un nome come rebeccapurple, un esadecimale a otto cifre con alfa e la forma separata da spazi con la barra prima dell'alfa che usa il CSS attuale. I valori di contrasto seguono la formula WCAG per la luminanza relativa, quindi un rapporto di 4.5 è la soglia per il testo normale al livello AA e 7 è la soglia al livello AAA. Sono calcolati sul colore opaco, perché un colore traslucido non ha un contrasto fisso finché non si sa cosa c'è dietro.

Strumenti correlati

Minificatore / Formattatore CSS Immagine a Base64 Generatore di QR Code

Il markup ti sta remando contro?

Entità con escape, codifiche rovinate e contenuti che nel CMS appaiono in un modo e sulla pagina in un altro di solito vogliono dire che qualcosa nella catena sta tirando a indovinare. Costruiamo front end e il percorso di pubblicazione dietro, così il visitatore vede quello che hai scritto.

Parliamo del tuo sito

Domande frequenti

Quali formati di colore posso incollare?
Esadecimale a tre, quattro, sei o otto cifre, rgb e rgba, hsl e hsla, hwb, e qualsiasi nome di colore CSS. Sono accettate sia la forma con le virgole sia quella moderna separata da spazi con la barra prima dell'alfa, quindi puoi incollare direttamente da un foglio di stile.
Come viene gestita la trasparenza?
Il canale alfa sopravvive alla conversione, quindi un esadecimale a otto cifre torna come rgba e l'anteprima mostra una scacchiera dietro. L'alfa viene scritto nell'uscita solo quando è davvero inferiore alla piena opacità, a meno che tu non lo chieda sempre.
Cosa significano i numeri di contrasto?
Sono il rapporto di contrasto WCAG fra questo colore e uno sfondo bianco o nero pieno. Il testo normale richiede 4.5 per il livello AA e 7 per AAA; il testo grande ha una soglia più bassa. Sotto 3 è difficile da leggere per quasi tutti, a qualsiasi dimensione.
Perché il contrasto è calcolato senza l'alfa?
Perché un colore traslucido non ha un contrasto fisso. Quello che un lettore vede davvero dipende da cosa c'è dietro, quindi i numeri usano il colore opaco. Se il tuo testo è davvero traslucido, calcola prima il colore risultante dalla fusione e verifica quello.
Che differenza c'è fra HSL e HWB?
Entrambi partono dallo stesso angolo di tonalità. HSL descrive un colore con quanto è saturo e quanto è chiaro, la coppia che quasi tutti gli strumenti mostrano. HWB lo descrive con quanto bianco e quanto nero ci sono mescolati, più vicino a come si mescola la vernice e più facile da gestire quando costruisci una scala di sfumature.