Selettore gratuito di colori hex: scegli o incolla un colore e ottieni valori HEX, RGB, HSL e OKLCH, tinte e ombre, e punteggi di contrasto contro bianco e nero.
Selettore Colore Hex
Scegli un colore o incolla qualsiasi valore HEX, RGB o HSL per ottenere ogni formato di cui hai bisogno per design e codice: HEX, RGB, HSL e OKLCH. Vedi una scala di tinte e ombre, e verifica quanto è leggibile il testo su di esso contro bianco e nero.
Usa il selettore colore, o digita un valore come #4F98FB, rgb(79, 152, 251) o hsl(215, 95%, 65%).
Copia qualsiasi formato con un click. OKLCH è il formato CSS moderno che mantiene la luminosità coerente tra le tonalità.
Clicca qualsiasi tinta o ombra per renderla il colore attuale.
Leggi i rapporti di contrasto per decidere se il testo bianco o nero appartiene a questo colore.
Per i pulsanti, punta ad almeno un contrasto di 4.5:1 tra l'etichetta e il colore del pulsante.
Costruisci una palette da un colore di marchio: una tinta chiara per gli sfondi, il colore stesso per i pulsanti, un'ombra scura per gli stati hover e il testo.
Gli schermi differiscono. Controlla il tuo colore di marchio su un telefono così come su un laptop.
Domande frequenti
Cos'è un codice colore hex?
Un codice a sei cifre per un colore sullo schermo, scritto come # seguito da tre coppie di cifre esadecimali per rosso, verde e blu. #FF0000 è rosso puro; #000000 è nero; #FFFFFF è bianco.
Qual è la differenza tra HEX, RGB e HSL?
Descrivono gli stessi colori in modi diversi. HEX e RGB danno le quantità di rosso, verde e blu. HSL dà tonalità (l'angolo su una ruota dei colori), saturazione e luminosità, che è più facile da regolare a mano.
Cos'è OKLCH e dovrei usarlo?
OKLCH è un formato colore CSS più recente basato su come le persone percepiscono il colore. Due colori con lo stesso valore L appaiono ugualmente chiari, il che rende più facili palette coerenti. Tutti i browser principali attuali lo supportano.
Come si calcola il contrasto?
Usando la formula WCAG 2: luminanza relativa del colore più chiaro più 0,05, divisa per quella del colore più scuro più 0,05. Per una verifica completa a due colori, usa il verificatore di contrasto colore di We.Inc.
Scegliere un colore di marchio che funziona su un sito web
Un colore di marchio deve svolgere diversi compiti: risaltare sui pulsanti, restare leggibile dietro il testo bianco, e non stancare l'occhio su un'intera pagina. Blu, verdi e rossi profondi di tono medio di solito gestiscono tutti e tre. Colori molto chiari (giallo, rosa pastello) sembrano buoni in un logo ma fanno pulsanti scarsi, perché né il testo bianco né quello nero si legge bene su di essi senza aggiustamenti.
Il pannello di contrasto mostra questo immediatamente. Se il testo bianco ottiene meno di 4.5:1, usa il testo nero oppure scegli un'ombra più scura dalla scala per i pulsanti.
Tinte, ombre e una palette semplice
Le tinte mescolano il tuo colore con il bianco; le ombre lo mescolano con il nero. Una palette pratica per siti web ne richiede solo poche: una tinta molto chiara per gli sfondi di sezione, il colore principale per pulsanti e link, e un'ombra più scura per gli stati hover. Aggiungi grigi neutri per testo e bordi e hai un set completo e coerente.
Per verificare una coppia specifica di testo e sfondo (per esempio testo grigio su uno sfondo tinto), usa il verificatore di contrasto colore, che valuta sia WCAG AA che AAA.