Selettore Colori Online
Scegli un colore sulla ruota, affinalo sul quadro di saturazione e leggilo poi in ogni formato che il tuo progetto parla — da #RRGGBB a oklch(). Questo selettore fa anche ciò che altri strumenti tralasciano: tre geometrie di ruota compresa la ruota tradizionale RYB dei pittori, sovrapposizioni di armonia che costruiscono una palette per te, un canale alfa e l’esportazione con un clic dell’intera palette come variabili CSS, SCSS o JSON. Tutto calcolato localmente nel tuo browser.
Tre ruote, non una
Il selettore Modalità ruota cambia la geometria della ruota stessa:
- HSV e HSL sono le ruote digitali — tonalità distribuite come le mescola la luce sugli schermi RGB. Differiscono nel modo in cui si comporta il quadro quadrato: nell’HSV l’angolo più luminoso è la tonalità pura, l’HSL colloca le tonalità pure al 50% di luminosità con il bianco sopra.
- RYB (pittori) dispone le tonalità come le hanno imparate gli artisti: rosso, giallo e blu come primari, con arancione, verde e viola nel mezzo. Il suo valore pratico si vede nelle armonie — sulla ruota RYB, il complementare del rosso è il verde e il complementare del blu è l’arancione, le classiche coppie pigmentarie, mentre una ruota digitale abbina il rosso al ciano. Se una palette “complementare” di un selettore normale ti è mai sembrata sbagliata all’occhio, ecco il perché.
Armonie che costruiscono la palette per te
Scegli una regola sotto Armonia dei colori e la ruota segna i colori complementari, che appaiono come una palette già pronta:
- Complementare — un colore opposto. Il contrasto più forte; usalo per un singolo accento contro un colore di brand dominante.
- Complementare divisa — i due vicini del complementare. Quasi altrettanto contrasto, molto più facile da bilanciare.
- Triadica — tre tonalità equidistanti. Vivace ma stabile; lascia che una domini e usa le altre due con parsimonia.
- Tetradica (quadrato) — quattro tonalità. Schemi ricchi per illustrazioni e visualizzazione dati; difficili da bilanciare nel lavoro di interfaccia.
- Analoga — i vicini immediati. Bassa tensione, adatta a sfondi e sfumature.
- Monocromatica — una tonalità in gradazioni di luminosità. La scelta più sicura per gli stati dell’interfaccia (hover, attivo, disabilitato).
Il pannello della palette copia l’intero set con un clic, nel formato che scegli: semplice HEX, RGB, HSL, OKLCH, variabili CSS personalizzate pronte da incollare (--color-1: …), variabili SCSS o JSON da passare al codice.
Incolla qualsiasi cosa, leggi tutto
I campi di input accettano praticamente qualunque notazione di colore tu ci lanci contro: #f80, #ff8800, esadecimale a 8 cifre con alfa, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, o nomi di colore CSS come rebeccapurple. Qualunque cosa entri, tornano indietro sette output sincronizzati: HEX, RGB, HSL, HSV, LCH, OKLCH e CMYK, ciascuno con il proprio pulsante di copia.
Due chip di aiuto sotto l’anteprima nominano il colore per te: il colore CSS con nome più vicino (utile per prototipi rapidi e per parlare dei colori) e il token Tailwind più vicino (es. orange-500), così puoi restare dentro il tuo design system invece di inventare valori estemporanei.
Trascina il cursore opacità sotto l’anteprima e gli output passano alle loro forme trasparenti — #RRGGBBAA, rgba(), hsla() — con l’anteprima mostrata su una scacchiera così puoi valutare la trasparenza.
Quale formato dovresti usare?
| Formato | Nome completo | Quando usarlo? |
|---|---|---|
| HEX | Esadecimale | Lo standard del web. Compatto, universalmente supportato, facile da copiare. 8 cifre aggiungono l’alfa. |
| RGB | Rosso, Verde, Blu | Come pensano gli schermi. Tre canali di luce, 0–255. Il formato che la maggior parte delle API e del codice canvas si aspetta. |
| HSL | Tonalità, Saturazione, Luminosità | Per gli esseri umani che modificano a mano. “Un po’ più chiaro” o “meno saturo” è il cambio di un solo numero. |
| HSV | Tonalità, Saturazione, Valore | Software grafici. Il modello dietro i selettori di Photoshop e GIMP. |
| LCH | Luminosità, Croma, Tonalità | Percettivamente uniforme. Passi numerici uguali sembrano passi visivi uguali — ciò che l’HSL finge di essere. |
| OKLCH | OK Luminosità, Croma, Tonalità | La scelta CSS moderna. Corregge gli spostamenti di tonalità dell’LCH nei blu; supportato in tutti i browser attuali e ideale per sistemi di design token. |
| CMYK | Ciano, Magenta, Giallo, Nero (Key) | Orientamento per la stampa. Una conversione approssimativa per parlare con i grafici della stampa — i valori finali derivano sempre dal profilo colore della stampante. |
Piccole cose che fanno risparmiare tempo
- La cronologia si mantiene da sola. Gli ultimi 24 colori con cui hai lavorato sopravvivono a un ricaricamento della pagina — salvati solo nella memoria locale del tuo browser, mai caricati altrove.
- Contagocce. Nei browser con l’API EyeDropper (Chrome ed Edge) puoi scegliere un colore da qualsiasi punto dello schermo, anche fuori dalla finestra del browser.
- Controllo da tastiera. La ruota e il quadro di saturazione rispondono ai tasti freccia per regolazioni precise al pixel.
- I predefiniti coprono i colori base più comuni quando ti serve solo un punto di partenza rapido.
Domande frequenti (FAQ)
oklch() è sicuro da usare in CSS di produzione?
Sì. Tutte le versioni attuali di Chrome, Edge, Firefox e Safari supportanooklch(), ed è diventata la notazione preferita per i design token (Tailwind CSS 4 definisce l'intera sua palette in questo formato). Per browser molto vecchi, servi un fallback HEX sulla riga precedente — questo strumento ti fornisce entrambi i valori.