Selettore di colori (Color Picker)

Scegli i colori e copia valori pronti all'uso

Un selettore di colori affidabile deve fare più che mostrare un bel quadrato. Designer, sviluppatori e creatori di contenuti hanno spesso bisogno dello stesso colore in più formati, a seconda della destinazione. CSS accetta HEX, RGB e HSL, i design system possono documentare i token in HEX e le modifiche rapide ai prototipi sono spesso più semplici in HSL, perché tonalità, saturazione e luminosità si regolano in modo indipendente. Questo strumento mostra i formati uno accanto all'altro, così scegli il colore una volta sola e copi il valore adatto al tuo flusso di lavoro.

Tutto avviene localmente nel browser. L'input del colore, i calcoli di conversione e i pulsanti di copia funzionano con JavaScript lato client, quindi non servono account, caricamenti o elaborazioni remote. Per questo lo strumento è ideale per palette di brand riservate, temi di prodotto non ancora rilasciati, lavori per clienti e rapidi esperimenti di UI che non devono lasciare il tuo computer.

Usare tinte e sfumature nelle interfacce

Tinte e sfumature permettono a un unico colore del brand di sostenere un'intera interfaccia. Le tinte più chiare funzionano per sfondi discreti, stati hover, pannelli di notifica e righe selezionate. Le sfumature più scure possono fornire bordi, stati premuti, accenti per la modalità scura o testo ad alta enfasi quando il colore originale è troppo luminoso. I campioni qui sotto mantengono costanti tonalità e saturazione cambiando solo la luminosità, creando una scala semplice che resta coerente con il colore di base.

Considera la scala generata un punto di partenza e non un design system definitivo. La percezione umana non è perfettamente lineare e alcune tonalità richiedono un ritocco manuale per risultare equidistanti. Blu e viola tollerano ampie variazioni di luminosità, mentre i gialli possono richiedere sfumature più scure per un testo leggibile. Copia i valori, provali nel componente reale e perfeziona i passaggi che contano di più.

Scegliere tra HEX, RGB e HSL

HEX è compatto e diffuso nella consegna dei design, quindi è un'ottima scelta predefinita per la documentazione. RGB è utile quando uno strumento richiede i canali numerici di rosso, verde e blu o quando ragioni direttamente in termini di luce dello schermo. HSL è di solito il formato più comodo per piccole modifiche: sposta la tonalità per ruotare sulla ruota dei colori, riduci la saturazione per un tono più calmo oppure cambia la luminosità per ottenere una tinta o una sfumatura. Tenerli visibili tutti e tre riduce gli errori quando passi tra strumenti di design, file CSS e librerie di componenti.