Hai bisogno di un colore per un mockup, un grafico o una tela vuota, e preferisci non sceglierne uno per abitudine? Questo generatore gratuito di colori casuali estrae i colori dall'intero intervallo a 24 bit che uno schermo può mostrare e mette ciascuno su un campione di colore accanto al suo codice. Scegli quanti ne vuoi in Quantità — un valore qualsiasi da 1 a 50 — seleziona i formati che ti servono e premi Genera. La pagina si apre con un solo colore in HEX, quindi il primo risultato è a un clic di distanza. La casella Codice HEX è selezionata fin dall'inizio, Codice RGB e Codice HSL si trovano accanto, e puoi attivare qualsiasi combinazione dei tre insieme. Il pulsante a forma di ingranaggio accanto al pulsante Genera apre la sezione Impostazioni avanzate, dove puoi limitare i colori a un tipo o intervallo, escludere le ripetizioni e cambiare come viene scritto HEX.
Ogni colore viene creato nel tuo browser tramite la Web Crypto API (crypto.getRandomValues), che fornisce byte casuali crittograficamente forti dalla fonte di casualità del tuo sistema, anziché da una funzione pseudocasuale come Math.random(). Un colore sullo schermo è composto da tre canali — rosso, verde e blu —, ciascuno un numero intero da 0 a 255, e un byte casuale può assumere esattamente 256 valori. Quindi ogni canale è semplicemente un byte, senza passaggi intermedi: non viene preso nessun resto, e nessun passaggio di conversione favorisce una tonalità. Questo rende tutti i 16.777.216 colori che la pagina può produrre esattamente equiprobabili, ogni volta che premi Genera. Un intervallo più stretto nella sezione Impostazioni avanzate mantiene questa promessa dentro l'intervallo: i colori vengono comunque estratti dall'intero spazio, e quelli che cadono fuori vengono scartati, quindi ogni colore permesso dall'intervallo ha la stessa probabilità. Nulla viene inviato a un server, nulla viene registrato, e una volta caricata la pagina continua a funzionare anche senza connessione.
I tre formati descrivono lo stesso colore in tre modi. Il formato Codice HEX è la forma a sei cifre usata in CSS e nella maggior parte degli strumenti di design, come #0778ff; si scrive in minuscolo con un # iniziale, e le opzioni Maiuscole e Senza # della sezione Impostazioni avanzate lo cambiano per gli strumenti che se lo aspettano diversamente. Il formato Codice RGB riporta per esteso i tre canali, come in rgb(7, 120, 255), il che si adatta al codice che lavora su ogni canale separatamente. Il formato Codice HSL descrive il colore tramite tonalità, saturazione e luminosità, come in hsl(213, 100%, 51%), la forma più facile da regolare a mano in seguito. Tutti e tre si incollano direttamente in un foglio di stile. Non sono però ugualmente precisi. HEX e RGB sono esatti; HSL è arrotondato. La pagina scrive tonalità, saturazione e luminosità come numeri interi, e per circa l'89% dei colori quel valore arrotondato non si riconverte esattamente nello stesso colore: #646503 viene mostrato come hsl(61, 94%, 20%), che riconvertito dà #616303. La differenza non è mai superiore a 5 passi in un canale e di solito è di 1 o 2 — invisibile sullo schermo, ma reale se salvi il valore HSL e ti aspetti di riavere l'HEX originale. Salva invece il valore HEX o RGB.
Un singolo colore appare come un unico chip al centro del risultato; più colori appaiono come un elenco numerato, un colore per riga, con i formati scelti affiancati e un piccolo badge di contrasto alla fine. Un elenco di più di tre colori scorre dentro il riquadro, e la freccia nel suo angolo lo apre a tutta altezza; la pagina ricorda come l'hai lasciato l'ultima volta. Fai clic su qualsiasi codice per copiare solo quel codice. Il pulsante di copia alla fine di una riga copia tutti i codici di quel colore su una sola riga, separati da spazi. Fai clic sul campione stesso e si apre il selettore di colore del tuo browser: scegli lì un altro colore, e tutti i codici in quella riga vengono riscritti di conseguenza, in ogni formato che hai attivato, insieme al suo badge. Il pulsante Copia tutto copia l'intero lotto, un colore per riga, e Salva su file scrive lo stesso testo in un semplice file .txt; entrambi tengono conto di qualsiasi colore che hai cambiato nel selettore. Cronologia conserva i tuoi ultimi 10 lotti in questo browser, esattamente come sono stati generati, e Cancella svuota il risultato. Le tue impostazioni, incluse quelle nella sezione Impostazioni avanzate, vengono ricordate per la prossima visita.
I colori equiprobabili non sembrano distribuiti in modo uniforme, e sapere cosa aspettarsi evita di premere Genera per il motivo sbagliato. Secondo le misurazioni su tutto l'intervallo, circa il 35% dei colori è vivace e saturo, con una saturazione HSL di almeno il 70% e una luminosità tra il 35% e il 65%. I colori quasi grigi, con saturazione sotto il 20%, sono solo circa il 4%, e i colori molto scuri (luminosità sotto il 20%) e molto chiari (sopra l'80%) sono circa il 3% ciascuno. Quindi un lotto di dieci con il tipo Tutti i colori conterrà di solito diversi colori intensi e raramente un pastello o un grigio antracite. Quando ti serve un tipo particolare, sceglilo in Tipo di colore: Vivace corrisponde esattamente a quel gruppo, e Pastello, Scuro, Tenue e Scala di grigi ciascuno al proprio. Personalizzato ti permette di impostare i tuoi intervalli di Tonalità, Saturazione e Luminosità, e un intervallo di tonalità può attraversare lo 0, quindi da 330 a 30 dà i rossi. L'intervallo viene verificato rispetto al codice HSL che la pagina mostra, quindi nessun codice ne esce, e se contiene troppo pochi colori per il valore di Quantità, la pagina ti chiede di ampliarlo invece di ripetere i colori. Altrimenti le ripetizioni sono possibili ma rare: seleziona Senza duplicati per escluderle, e senza questa opzione la probabilità che due dei 50 colori dell'intero intervallo risultino identici è di circa 1 su 13.700.
Un colore casuale serve spesso come sfondo, il che solleva l'unica domanda che un campione di colore non può risolvere a occhio: il testo su di esso sarà leggibile? La linea guida di accessibilità web, WCAG, richiede un rapporto di contrasto di almeno 4,5:1 per il testo normale. Secondo le misurazioni su tutti i colori che questa pagina può produrre, il testo nero lo raggiunge su circa il 65% di essi e il testo bianco su circa il 36%, e non c'è nessun colore in cui entrambi falliscono: il migliore dei due raggiunge sempre almeno 4,58:1. Quindi per qualsiasi sfondo casuale, il testo nero o quello bianco sarà conforme, e la pagina ti mostra quale. Su ogni colore appare un piccolo badge che mostra Aa nel più leggibile dei due colori di testo, seguito dal rapporto di contrasto. Il rapporto viene arrotondato per difetto, quindi non è mai sovrastimato, e si aggiorna quando cambi il colore nel selettore. Il badge confronta solo il testo nero e bianco; per un colore del marchio o qualsiasi altro colore di testo, verifica la coppia con uno strumento di controllo del contrasto.
Il casuale non è la stessa cosa dell'armonioso. Ogni colore di un lotto viene estratto in modo indipendente, senza conoscenza degli altri, quindi il generatore non costruisce mai una tavolozza nel senso del designer — nessuna coppia complementare, nessuna serie analoga, nessuna luminosità condivisa. Un intervallo più stretto cambia il carattere di un lotto, non questa regola: i pastelli o una serie di blu arrivano comunque uno per uno, senza nulla che li leghi. Ed è proprio questo lo scopo: ti dà il colore che tu non avresti scelto, ed è ciò che rompe un'abitudine o un blocco creativo. Per trasformare una scoperta casuale in qualcosa di utilizzabile, conserva il colore che ti piace e costruisci a partire da esso, invece di premere Genera finché un intero insieme non coincide per caso. Mantieni fissa la sua tonalità e regola la luminosità per ottenere varianti più chiare e più scure, oppure ruota la tonalità di 180 gradi per ottenere un colore a contrasto. Il formato Codice HSL è quello che trasforma queste mosse in aritmetica invece che in tentativi.
Perché scegliere questo generatore di colori casuali?
- Ogni colore creato nel tuo browser con la Web Crypto API, nulla viene caricato
- Tutti i 16.777.216 colori esattamente equiprobabili, un byte casuale per canale
- Codici HEX, RGB e HSL per lo stesso colore, in qualsiasi combinazione
- Fino a 50 colori alla volta, ciascuno su un campione di colore con un badge di contrasto del testo
- Vivace, Pastello, Scuro, Tenue e Scala di grigi, oppure il tuo intervallo di tonalità, saturazione e luminosità
- Senza duplicati quando ti serve, e HEX in maiuscolo o senza #
- Fai clic su un codice per copiarlo, oppure cambia qualsiasi colore nel selettore di colore del tuo browser
- Copia tutto, Salva su file e una Cronologia dei tuoi ultimi 10 lotti, conservata nel tuo browser
- Gratuito e illimitato: nessuna registrazione, nessuna quota, nulla viene memorizzato sui nostri server
I colori casuali si rendono utili ovunque serva un colore prima che qualcuno ne abbia scelto uno. I designer li usano per superare un blocco creativo e trovare un punto di partenza che la loro tavolozza abituale non avrebbe mai raggiunto. Gli sviluppatori riempiono mockup, segnaposto e avatar, danno a ogni serie in un grafico il proprio colore mentre il tema vero e proprio non è ancora deciso, e verificano come un'interfaccia gestisce sfondi per cui non è stata progettata — un lotto di 50 con il tipo Tutti i colori include quasi sempre almeno un colore molto scuro o molto chiaro, e Scuro o Pastello orienta il test verso uno di questi estremi. Gli artisti generativi e chi prototipa giochi inseriscono i valori direttamente nel codice, dove la forma RGB si adatta alla maggior parte delle librerie grafiche. Gli insegnanti mettono i tre formati fianco a fianco per mostrare che un colore può essere scritto come un codice, come tre canali o come una posizione su un cerchio cromatico, e perché la versione HSL è arrotondata. E chiunque etichetti, taggi o codifichi per colore un elenco ottiene colori distinti senza tormentarsi sulla scelta.
Vale la pena conoscere alcuni limiti onesti. Questo è un generatore, non uno strumento per tavolozze: non costruisce armonie di colore e non mantiene fisso un colore mentre gli altri cambiano, e un intervallo più stretto dà colori di un solo tipo, non colori scelti per abbinarsi tra loro. Il badge di contrasto confronta solo il testo nero e bianco. La pagina lavora con i colori sRGB che uno schermo mostra — HEX, RGB e HSL — senza trasparenza e senza CMYK, Pantone, OKLCH o colori CSS con nome; per la stampa, verifica il colore nel tuo processo di stampa invece di fidarti di un codice a schermo. Lo stesso codice può anche apparire leggermente diverso da uno schermo all'altro, perché gli schermi non sono calibrati allo stesso modo. I valori HSL sono arrotondati, come descritto sopra, e a meno che Senza duplicati non sia selezionato, un lotto non viene controllato per individuare ripetizioni. Ciò che la pagina garantisce davvero è più ristretto ed esatto: ognuno dei suoi 16.777.216 colori, o ogni colore all'interno dell'intervallo che hai impostato, ha la stessa probabilità a ogni clic, estratto dalla fonte crittografica del tuo browser e mai inviato da nessuna parte.