Selettore di codici colore
Ogni formato, un solo colore
Questo selettore di codici colore converte hex in rgb, rgb in hex, ed entrambi in hsl, hsv e cmyk mentre scrivi. Inoltre aggiunge l’opacità, una scala di tinte e ombre e una lettura del contrasto che dice se il testo è leggibile sul colore.
- PrezzoGratis
- Formati6
- RegistrazioneNessuna
- CaricatoNulla
Selettore di codici colore
HEX, RGB e HSL, con contrasto e una scala di tonalità
- Su bianco
- —
- Su nero
- —
Il contrasto decide se le parole possono stare su questo colore. AA chiede 4,5:1 per il testo normale.
Un colore non supera né fallisce da solo. Metti il colore del testo sul colore di sfondo, e questo strumento legge il rapporto come fa il WCAG.
I tre pulsanti qui sopra spostano un colore finché la coppia non supera AA a 4,5:1. Tonalità e saturazione restano ferme, quindi il colore appartiene ancora alla tua palette.
Il testo grande appare così
Il testo piccolo appare così. È la dimensione di gran parte della tua pagina, quindi è quella che decide se la coppia è utilizzabile. Leggi questa riga e fidati dei tuoi occhi oltre che del numero.
E questa è la clausola in piccolo per cui nessuno progetta.
Pronto. Scrivi un colore in uno dei tre campi.
Un colore, scritto in sei modi
Un colore non ha un’unica grafia. Lo stesso blu è #1B5FD1 in un foglio di stile, rgb(27, 95, 209) in una chiamata canvas e hsl(217, 77%, 46%) in un design token.
Tutti indicano gli stessi pixel. Quindi convertire hex in rgb non cambia nulla del colore, solo chi può leggerlo.
Il problema è che ogni formato serve a un lavoro diverso. Perciò una pagina che ne mostra uno e nasconde gli altri ti manda a cercare un’altra pagina.
Questo selettore di codici colore li mostra tutti insieme, e riscrive ogni campo appena ne modifichi uno.
A cosa serve ogni formato
L’hex è breve e si incolla senza problemi. È il formato che ti passa un designer e quello che contiene la maggior parte dei fogli di stile.
RGB indica chiaramente i tre canali. Quindi va bene per tutto ciò che fa calcoli con un colore: un canvas, un gradiente, uno shader.
HSL separa la tinta dalla luminosità. È quello da scegliere quando vuoi lo stesso colore un po’ più scuro, perché cambi un solo numero.
L’opacità appartiene a rgba e hsla più che all’hex, anche se un hex a otto cifre la porta comunque. Questa pagina scrive la forma che ti serve.
Passare da hex a RGB con carta e penna
Un colore hex è formato da tre coppie, e ogni coppia è un canale scritto in base sedici. Così #1B è il canale rosso.
Ogni coppia diventa un numero da 0 a 255. Le lettere dalla a alla f continuano semplicemente a contare dopo il 9, quindi 1B significa un sedici più undici, cioè 27.
Un hex di tre caratteri raddoppia ogni cifra. Perciò #abc significa #aabbcc, un’abbreviazione utile quando leggi il foglio di stile di qualcun altro.
Nel senso opposto, da rgb a hex, ogni canale torna a essere due cifre hex. Il riferimento MDN sui valori di colore elenca ogni sintassi che un browser accetta.
Perché il valore di contrasto è qui
La domanda dopo "che colore è questo" è quasi sempre "posso metterci sopra del testo". Per questo la risposta sta accanto al colore e non in un’altra pagina.
Le due letture confrontano il tuo colore con il bianco e con il nero. Un rapporto di 4.5:1 supera AA per il testo normale, mentre 3:1 basta solo per il testo grande.
Quelle soglie vengono da WCAG, e ogni controllo le calcola allo stesso modo. Questo segue la formula alla lettera invece di arrotondarla.
Un colore che non va bene come testo può comunque funzionare come sfondo, bordo o riempimento di un grafico. La nota sotto le letture dice in quale caso sei.
Leggere HSL senza matematica
La tinta è un angolo su una ruota dei colori. Zero è rosso, 120 è verde, 240 è blu, e i numeri intermedi li mescolano.
La saturazione è quanto colore c’è. A 0% ogni tinta diventa grigia, e a 100% è vivida quanto lo schermo consente.
La luminosità va dal nero a 0% al bianco a 100%. Il tuo colore sta al 50%, ed è per questo che un colore di brand di solito cade lì vicino.
Quindi un pulsante più scuro ha la stessa tinta e saturazione con una luminosità più bassa. È un solo numero, e la famiglia resta coerente.
Quando due colori non dovrebbero incontrarsi
Alcune coppie si leggono male anche quando il valore di contrasto passa. Rosso su verde è l’esempio classico, perché il rapporto ignora il daltonismo.
Circa un uomo su dodici vede il rosso e il verde in modo diverso. Perciò un grafico che separa le linee solo per tinta le perde.
Invece aggiungi un secondo segnale. Un’etichetta, un tratteggio o una forma portano il significato quando il colore non ci riesce.
Inoltre prova in scala di grigi. Se l’immagine si legge ancora senza colore, si legge per tutti.
C’è un’altra coppia che inganna spesso: un grigio medio su un colore medio. Entrambi stanno a metà scala, quindi il rapporto scende sotto tre e le parole si confondono con il pannello dietro.
Dove finisce ogni codice
Il CSS accetta tutte e tre le forme, quindi usa quella che si legge meglio nel file. La maggior parte dei team scrive hex per i colori fissi e hsl dentro un calcolo.
Gli strumenti di design tendono all’hex. È ciò che contiene un file di consegna, e ciò che uno sviluppatore incollerà per primo.
Il mobile è diverso. Swift vuole ogni canale da 0 a 1, e Android vuole un hex a otto cifre con l’opacità davanti.
Questa pagina scrive tutte quelle forme, così un colore passa da un file di design a un’app senza che nessuno faccia calcoli.
La scala mescola, non tira a indovinare
Ogni passo mescola il tuo colore verso il bianco o verso il nero di una quantità fissa. Così la tinta resta stabile mentre la luminosità si muove, ed è proprio ciò che deve fare una serie di toni.
In questa pagina
- Lo strumento
- Un colore, scritto in sei modi
- Come usare il selettore di codici colore
- Cosa distingue questo selettore di codici colore
- Lavorare con i codici colore in modo sensato
- Cinque modi in cui un colore va storto
- FAQ sul selettore di codici colore
- Strumenti per lo stesso pomeriggio
Continua
Come usare il selettore di codici colore
Scrivi nel campo che hai già. Gli altri due seguono.
- 1
Incolla qualsiasi formato
Hex con o senza cancelletto, rgb con qualsiasi punteggiatura, oppure hsl. Il selettore li legge tutti e tre.
- 2
Oppure scegli dal campione
Il quadrato colorato nella barra apre il selettore del sistema. Trascinandolo, ogni campo si aggiorna dal vivo.
- 3
Imposta l’opacità
Portala sotto 100 e l’output passa a rgba e hsla, con un hex a otto cifre accanto.
- 4
Prendi la notazione che ti occorre
Prendi una riga, oppure l’intero blocco con le forme per CSS, Swift e Android già scritte.
Cosa distingue questo selettore di codici colore
Convertire hex in rgb richiede quattro righe di codice. La parte utile è tutto ciò che c’è intorno.
Tre campi, un colore
Modifica un campo e gli altri due si riscrivono da soli. Nulla aspetta un pulsante, quindi puoi incollare e leggere in un solo gesto.
Contrasto incluso
Il rapporto con il bianco e il nero sta sotto il campione, con il verdetto AA scritto in parole invece che lasciato come numero da interpretare.
Una scala pronta all’uso
Nove passi, da quattro quinti più chiaro a quattro quinti più scuro, ognuno con il suo hex. Di solito è tutta la palette che serve a un componente.
Opacità in ogni forma
Un solo numero porta l’output a rgba, hsla ed hex a otto cifre insieme, perché file diversi ne vogliono di diversi.
Legge input approssimativi
Spazi, cancelletti mancanti, segni di percentuale e la nuova sintassi con la barra vengono tutti interpretati. Così un valore copiato da ovunque funziona.
Nulla lascia la scheda
Il browser esegue ogni cambio di formato. Un colore di brand non ancora lanciato non raggiunge mai questo sito, perché non si fa alcuna richiesta.
Lavorare con i codici colore in modo sensato
Sei abitudini che mantengono una palette utile e non solo bella.
- Tieni i colori in un solo posto di riferimento. Tieni il colore in una variabile CSS e converti da lì. Due copie scritte a mano si separano in un mese.
- Cambia la luminosità, non la tinta. Per una versione più scura sposta la L in hsl. Invece ritoccare l’hex a occhio sposta anche la tinta, e la serie smette di sembrare coerente.
- Controlla il testo prima di decidere. Un colore di brand che non supera 4.5:1 fallirà ogni audit. Scoprilo ora invece che dopo lo sviluppo.
- Scrivi l’hex in minuscolo. Funzionano entrambi, quindi è solo una questione di diff. Una sola convenzione tiene leggibile la cronologia delle versioni.
- Tieni l’opacità fuori dai colori del brand. Un colore al 60% su uno sfondo sconosciuto è imprevedibile. Scegli invece il colore già mescolato, così puoi testarlo.
- Prova sullo sfondo reale. La tua pagina è raramente bianco puro. Quindi controlla il colore rispetto alla sezione su cui starà davvero, perché è quella la coppia che vede un visitatore.
- Tieni un passo intermedio di riserva. Una palette con solo un chiaro e uno scuro si esaurisce in fretta. Un valore intermedio copre hover, bordi e stati disattivati, e ti servirà molto prima di quanto pensi.
- Dai un nome al passo, non alla sfumatura. Chiamalo blue-600 invece di dark-blue. Poi cambiare palette modifica un valore invece di tutti i nomi.
Cinque modi in cui un colore va storto
Ognuno trasforma una scelta di colore in un bug che qualcun altro deve trovare.
Fidarsi di uno screenshot
I colori presi da uno screenshot compresso sono spostati di qualche punto. Invece prendili dal file sorgente.
Ignorare lo sfondo
Il contrasto è una coppia, mai un colore singolo. Un blu che passa sul bianco può fallire nettamente sulla sezione della tua pagina.
Usare l’opacità per schiarire
Sfumare un colore al 20% dipende da ciò che c’è sotto. Mescolarlo verso il bianco dà lo stesso aspetto e resta prevedibile.
Usare ovunque l’hex a otto cifre
I browser vecchi e diversi strumenti di design ignorano la coppia alfa. Perciò scrivi rgba dove lo legge qualcosa che non sia un browser moderno.
Arrotondare HSL e riconvertire
Qui HSL si arrotonda a numeri interi, quindi un’andata e ritorno può spostare un canale di uno. Tieni l’hex come valore salvato.
FAQ sul selettore di codici colore
Come converto da solo hex in rgb?
Dividi i sei caratteri in tre coppie e leggi ogni coppia in base sedici. Così #1B5FD1 diventa 27, 95, 209. Un hex di tre caratteri raddoppia prima ogni cifra.
Perché il mio risultato da rgb a hex differisce di uno?
Quasi sempre per un arrotondamento da qualche parte nella catena. L’hex contiene numeri interi da 0 a 255, quindi un valore arrivato come percentuale o tramite HSL può cadere un punto sopra o sotto.
Cos’è l’hex a otto cifre?
L’ultima coppia è l’opacità, da 00 per invisibile a ff per pieno. Tutti i browser attuali lo leggono, tuttavia alcuni vecchi programmi di grafica lo scartano in silenzio.
Quale formato devo salvare?
Hex per i colori del brand, perché è esatto e breve. Converti in HSL quando ti serve un passo più chiaro o più scuro, poi salva l’hex risultante invece del calcolo.
Che rapporto di contrasto mi serve?
WCAG AA chiede 4.5:1 per il testo normale e 3:1 per il testo da 24px, o da 19px in grassetto. AAA chiede 7:1, e vale la pena puntarci per le letture lunghe.
Perché lo stesso hex sembra diverso su due schermi?
Gli schermi mostrano il colore in modo diverso, e alcuni ci applicano sopra un profilo. Il codice è esatto, quindi la differenza sta nel display e non nel valore.
Posso ricavare un’intera palette da un colore?
La scala qui ti dà nove passi della stessa tinta, e copre la maggior parte dei componenti. Tuttavia una palette completa richiede anche un grigio neutro e un colore d’accento, e quelle sono scelte, non calcoli.
Il mio colore viene inviato da qualche parte?
No. Ogni conversione gira nella scheda del browser, quindi una palette non ancora lanciata non raggiunge mai questo sito e nessun log la registra.
Strumenti per lo stesso pomeriggio
Tre che accompagnano la scelta di un colore.
Compressore SVG
Alleggerisci l’icona che hai appena ricolorato ed elimina ciò che vi si nasconde.
Apri lo strumento →Minificatore CSS
Comprimi il foglio di stile dove sono finite le nuove variabili, senza rompere calc().
Apri lo strumento →Generatore di codici QR
Crea un codice nel colore del tuo brand e poi controlla che si scansioni ancora.
Apri lo strumento →
Leggi il colore, poi usalo
Incolla un hex, una terna rgb o un valore hsl, e prendi il formato che vuole il tuo file. Il selettore di codici colore è gratis, non chiede account e tiene ogni valore sul tuo dispositivo.