Converti colori online
Incolla un colore in qualsiasi formato CSS e ottieni tutti gli altri, più il suo contrasto.
Incolla HEX, rgb(), hsl(), hwb() o un nome di colore CSS, oppure scegline uno
Tinte e ombre
Valori
- HEX
- #3a5bd9
- RGB
- rgb(58, 91, 217)
- HSL
- hsl(227.5, 67.7%, 53.9%)
- HSV / HSB
- hsv(227.5, 73.3%, 85.1%)
- HWB
- hwb(227.5 22.7% 14.9%)
- CMYK
- cmyk(73%, 58%, 0%, 15%)
- È un’approssimazione. Il colore stampato dipende da inchiostri e carta, quindi chiedi i valori esatti alla tua tipografia.
- OKLCH
- oklch(52.35% 0.1965 267.75)
- Nome CSS più vicino
- royalblue
Contrasto (WCAG)
Testo di questo colore su ogni sfondo. Il testo normale richiede 4,5:1 per AA e 7:1 per AAA; il testo grande (18 pt, o 14 pt in grassetto) richiede 3:1 e 4,5:1.
Su bianco
Testo grande
Quel vituperabile xenofobo zelante assaggia il whisky ed esclama: alleluja!
5.71:1
- AA normale superato
- AAA normale non superato
- AA grande superato
- AAA grande superato
Su nero
Testo grande
Quel vituperabile xenofobo zelante assaggia il whisky ed esclama: alleluja!
3.68:1
- AA normale non superato
- AAA normale non superato
- AA grande superato
- AAA grande non superato
Su #ffffff
Testo grande
Quel vituperabile xenofobo zelante assaggia il whisky ed esclama: alleluja!
5.71:1
- AA normale superato
- AAA normale non superato
- AA grande superato
- AAA grande superato
Avanti: Rendi trasparente lo sfondo · Crea grafici
Segnala un problema con questo strumento
Come usare Convertitore di colori
Inserisci un colore
Incolla un codice HEX, rgb(), hsl(), hwb() o un nome come tomato, oppure scegline uno con il selettore colore.
Copia il formato che ti serve
Tutti i formati si aggiornano mentre scrivi. Copiane uno con il suo pulsante, o scegli il tuo formato abituale per il pulsante Copia grande.
Verifica il contrasto
Vedi il rapporto di contrasto WCAG su bianco, su nero e su uno sfondo a tua scelta, con i risultati AA e AAA per testo normale e grande.
Perché usare Utils365
Legge qualsiasi colore CSS
HEX a 3, 4, 6 e 8 cifre, rgb() e hsl() con la vecchia sintassi a virgole o la nuova a spazi, hwb(), percentuali, unità di tonalità e tutti i 148 nomi di colore.
Anche i formati moderni
Ottieni OKLCH per i design system e il CSS ad ampia gamma, HWB e HSV per i selettori colore, e HEX con alfa per i colori trasparenti.
Accessibilità integrata
I rapporti di contrasto seguono esattamente WCAG 2 e non vengono mai arrotondati per superare la soglia, quindi 4,49:1 non passa per 4,5:1.
Tinte e ombre
Sotto il campione ci sono cinque passaggi più chiari e cinque più scuri. Fai clic su uno per renderlo il colore attuale.
Domande frequenti
Che differenza c’è tra HEX e RGB?
Nessuna nel colore in sé. Entrambi indicano rosso, verde e blu da 0 a 255. HEX scrive ciascuno con due cifre esadecimali, quindi rgb(58, 91, 217) è #3a5bd9. HEX è più corto, mentre rgb() è più facile da leggere e regolare a mano.
Cos’è HSL?
Tonalità, saturazione e luminosità. La tonalità è la posizione sulla ruota dei colori in gradi (0 è rosso, 120 verde, 240 blu), la saturazione indica quanto è vivace, e la luminosità va dal nero a 0% al bianco a 100%. Rende facile scrivere versioni più chiare, più scure o più spente di un colore.
Perché il CMYK non corrisponde al colore stampato?
Gli schermi mescolano luce e le stampanti inchiostro, e il risultato dipende da inchiostri, carta e profilo della stampante. Il CMYK mostrato usa la semplice formula standard, quindi consideralo un punto di partenza e chiedi i valori esatti alla tua tipografia.
Cos’è il rapporto di contrasto WCAG?
Una misura di quanto due colori differiscono in luminosità, da 1:1 (uguali) a 21:1 (nero su bianco). WCAG AA richiede almeno 4,5:1 per il testo normale e 3:1 per il testo grande; AAA richiede 7:1 e 4,5:1.
Cos’è OKLCH?
Un modo più recente di scrivere i colori in CSS tramite luminosità, croma e tonalità, basato su come le persone percepiscono il colore. Cambiando la luminosità la tonalità sembra la stessa, per questo è apprezzato nei design system e nelle scale di colore.
Come funziona il nome del colore?
Se il colore corrisponde esattamente a uno dei 148 nomi di colore CSS, viene mostrato quel nome. Altrimenti ottieni quello visivamente più simile, utile per descrivere un colore a parole.