Ogni sistema di progettazione che ho mai spedito è iniziato con un singolo colore di marca e poi ne ho avuto bisogno immediatamente di una dozzina in più Un blu non è mai abbastanza Hai bisogno di un blu più chiaro per uno stato di hover, un blu molto più chiaro per uno sfondo a righe selezionate, un blu più scuro per il testo che si trova su una superficie pallida e un blu tenue per un pulsante disabilitato che non dovrebbe gridare Quando stavo costruendo l'interfaccia per [Toolz.dev] (/, continuavo ad aprire un selettore di colori, spingendo il cursore della luminosità, facendo attenzione se il risultato assomigliava ancora alla stessa famiglia e incollando i codici esadecimali nel mio foglio di stile uno alla volta Funzionava, ma era lento e i risultati erano incoerenti perché & quot;nudge finché non sembra giusto" non è un processo ripetibile.
Quindi ho costruito il Generatore di sfumature di colore. Gli dai un colore e ti dà tre scale complete, calcolate nello spazio colore Modulo colore CSS Livello 4 definisce piuttosto che spingendo le cifre esagonali: tinte che vanno verso il bianco, sfumature che vanno verso il nero e toni che vanno verso il grigio Questa guida spiega cosa significano effettivamente quelle tre parole, come funziona la matematica e come trasformare un singolo colore di marca in una tavolozza coerente che puoi inserire direttamente nei CSS.
tl; dr: Una tinta è il tuo colore mescolato con il bianco, una tonalità è il tuo colore mescolato con il nero e un tono è il tuo colore mescolato con il grigio Ognuno mantiene la tonalità originale e cambia solo l'aspetto chiaro, scuro o attenuato del colore Incolla un valore HEX, RGB o HSL, scegli quanti passaggi desideri e il generatore costruisce tutte e tre le scale contemporaneamente, ogni swatch copiabile come HEX, RGB o HSL. Tutto viene eseguito nel tuo browser.
Qual è la differenza tra una tinta, una tonalità e un tono?
Queste tre parole provengono dalla teoria tradizionale del colore, e descrivono tre modi diversi di cambiare un colore senza cambiare di quale colore sia fondamentalmente La distinzione vale la pena di ottenere giusto perché i progettisti, e sempre più design token, usano le parole con precisione.
Una tinta è un colore misto a bianco L'aggiunta di bianco aumenta la leggerezza e ammorbidisce il colore Il rosa è una tinta di rosso e il blu bambino è una tinta di un blu più forte Le tinte sono ciò che si raggiunge quando si hanno bisogno di sfondi pallidi, riempimenti sottili e le superfici più chiare in un'interfaccia.
Una tonalità è un colore misto a nero L'aggiunta di nero abbassa la leggerezza e approfondisce il colore Il marrone è una tonalità di rosso e il blu scuro è una tonalità di blu Le sfumature ti danno l'estremità più scura di una scala: colori del testo, stati del pulsante premuto e bordi che necessitano di più peso rispetto alla base.
Un tono è un colore misto a grigio L'aggiunta di grigio riduce l'intensità di color's senza renderlo drammaticamente più chiaro o più scuro I toni sono i più sottoutilizzati dei tre, e sono il segreto dietro le tavolozze che sembrano sofisticate piuttosto che sgargianti Un colore attenuato si legge come più calmo e professionale, motivo per cui le tavolozze attenuate dominano il design serio del prodotto.
La cosa importante che tutti e tre condividono è che preservano la tonalità Una tinta di blu è ancora blu, una tonalità di blu è ancora blu e un tono di blu è ancora blu. Questo è ciò che fa sembrare un insieme di tinte, sfumature e toni come una famiglia piuttosto che un assortimento casuale.
Come viene effettivamente calcolata ciascuna scala?
Sotto il cofano, ogni campione è un mix a linea retta tra due colori nello spazio RGB Il generatore prende il tuo colore di base come una tripla rossa, verde e blu, e prende un colore di destinazione, poi cammina da uno all'altro a passi pari Per le tinte il bersaglio è bianco, che è (255, 255, 255). Per le tonalità il target è nero, (0, 0, 0). Per i toni il target è grigio medio, (128, 128, 128).
Il mix per ogni singolo canale è aritmetica semplice Per ottenere uno swatch che è il trenta per cento del percorso dalla base verso la destinazione, si calcola base + (target - base) * 0.30 per il canale rosso, poi il canale verde, poi il canale blu e arrotondare a numeri interi Una scala di tinta in dieci passi esegue quel calcolo al dieci per cento, venti per cento e così via fino al cento per cento, dove il colore è diventato bianco puro Il colore di base stesso è incluso come campione zero-percentuale nella parte superiore di ogni scala, in modo da poter sempre vedere da dove hai iniziato.
Poiché il mix avviene per canale in RGB, la tonalità rimane essenzialmente fissa per tinte e sfumature. La fusione verso il bianco puro o il nero puro cambia quanta luce riflette il colore ma non il suo carattere sottostante, quindi una tinta e una tonalità della stessa base vengono lette dello stesso colore a luminosità diversa. I toni possono spostare la tonalità percepita di un capello, perché il grigio si trova al centro neutro e tirando verso di esso leggermente desatura ogni canale, ma in pratica l'intera scala si legge ancora come un unico colore. Se vuoi ispezionare esattamente come un dato campione atterra nei formati, il Convertitore Colore ti mostrerà i suoi valori HEX, RGB, HSL e HWB fianco a fianco.
Perché non cambiare semplicemente leggerezza in HSL?
Una domanda ragionevole è perché lo strumento si mescola in RGB piuttosto che semplicemente alzando o abbassando il L valore in HSL Entrambi gli approcci producono una scala monocromatica, ed entrambi sono validi Mescolare verso il bianco e il nero in RGB è il classico modello painter's di tinte e sfumature, e si mappa in modo pulito sulle parole che i progettisti già usano Mantiene anche gli endpoint onesti: una tinta al cento per cento è esattamente bianca e una tonalità al cento per cento è esattamente nera, il che non è sempre vero quando si manipola solo la leggerezza HSL a causa di come la saturazione interagisce con essa Il generatore ti dà toni come terza scala appositamente per coprire il & quot; meno intenso& quot; asse che un cambiamento di pura leggerezza non affronta.
Quanti passi devo generare?
Il generatore ti consente di scegliere da due a venti passaggi per scala e il numero giusto dipende da ciò che stai costruendo. Per un sistema di progettazione in cui desideri una rampa con nome blue-50 da parte a parte blue-900un conteggio dei passi più ampio ti offre un gradiente sottile da cui puoi campionare. Per una coppia rapida di stati attivi e al passaggio del mouse, tre o quattro passaggi sono numerosi. Il mio valore predefinito è dieci, perché dieci tinte, dieci sfumature e dieci toni da una base mi dà una tavolozza funzionante completa senza un muro schiacciante di campioni.
Più passi significano salti più piccoli tra colori adiacenti, che è ciò che si desidera quando le tonalità vicine devono essere visivamente distinte ma vicine, come le bande alternate di una tabella di dati Meno passi significano salti più audaci, che si adatta a una tavolozza compatta in cui ogni colore ha un lavoro chiaramente diverso Non c'è una risposta sbagliata, e poiché lo strumento ricalcola istantaneamente è possibile far scorrere il conteggio dei passi su e giù finché la spaziatura non sembra giusta.
In cosa differiscono le tinte dall'abbassamento dell'opacità?
Una trappola in cui sono caduto presto è stata usare l'opacità per fingere una tinta Sembra equivalente: lascia cadere un pulsante blu al cinquanta per cento di opacità su una pagina bianca e sembra un blu più chiaro Il problema è che l'opacità non è un colore, è un'istruzione di compositing, e dipende interamente da qualunque cosa si trovi dietro l'elemento Quello stesso cinquanta per cento di blu su una superficie scura diventa un blu scuro fangoso, e su una foto diventa imprevedibile Il tuo & quot; azzurro& quot; cambia identità a seconda del suo sfondo, che è l'opposto di ciò di cui un sistema di progettazione ha bisogno.
Una tinta risolve questo problema cuocendo la leggerezza in un colore reale e opaco Il campione che il generatore ti dà è un valore esadecimale fisso che sembra lo stesso, qualunque cosa ci sia dietro, perché è completamente opaco Quando hai bisogno di una versione più chiara e coerente di un colore che si comporti in modo prevedibile su ogni superficie del tuo prodotto, usa una tinta piuttosto che una trasparenza Riserva opacità per effetti di trasparenza genuini, come sovrapposizioni e scrim, dove vuoi effettivamente che lo sfondo si manifesti Mantenere separate queste due idee è una delle abitudini silenziose che fa sembrare una tavolozza solida piuttosto che accidentale.
Come faccio a trasformare queste scale in una tavolozza utilizzabile?
Una palette non è solo una pila di colori, è un insieme di assegnazioni Ecco il flusso di lavoro che utilizzo quando parto da un singolo colore di marca Prendi la base come colore di azione principale, quello sui pulsanti principali e sui link Raggiungi le tinte per gli sfondi: una tinta molto leggera per le superfici delle pagine o delle carte, una tinta leggermente più forte per lo stato di hover di un elemento leggero Raggiungi le tonalità per testo ed enfasi: una tonalità profonda per la copia del corpo che necessita di contrasto contro una tinta pallida, una tonalità media per lo stato premuto del pulsante primario Usa un tono quando hai bisogno del colore presente ma silenzioso, come un controllo disabilitato o un badge secondario.
L'unica regola che non puoi saltare è il contrasto Una tinta che sembra adorabile come sfondo di un pulsante è inutile se il testo dell'etichetta su di esso non riesce a soddisfare i requisiti di contrasto di accessibilità Una volta scelte le coppie di colori che si siederanno uno sopra l'altro, eseguile attraverso il Controllore del contrasto del colore per confermare che cancellano le soglie WCAG Scegliere belle sfumature è la parte facile Assicurarsi che il testo su di esse sia leggibile è la parte che separa una tavolozza reale da una mood board.
La tabella seguente mostra come in genere mappo una scala in dieci passaggi sui ruoli dell'interfaccia.
| Swatch fonte | Ruolo tipico | Esempio uso |
|---|---|---|
| Tinte più leggere | Superfici e sfondi | Sfondo della pagina, riempimento della carta, riga selezionata |
| Tinte chiare | Stati di passaggio del mouse sugli elementi leggeri | Passa il mouse con il pulsante, passa il mouse con l'elemento elenco |
| Colore base | Azione primaria | Pulsante principale, collegamento attivo, accento del marchio |
| Tonalità medie | Stati pressati e attivi | Pulsante attivo, bordo focalizzato |
| Tonalità scure | Testo e alta enfasi | Testo del corpo su superfici chiare, intestazioni |
| Toni | Elementi secondari attenuati | Controlli disabilitati, badge secondari |
Come si adatta questo insieme ad altri strumenti di colore?
Il generatore di sfumature è uno strumento in una piccola orchestra Risponde alla domanda & quot; dammi di più di questo unico colore, & quot; ma il vero lavoro di tavolozza tocca anche alcune domande adiacenti Quando hai bisogno di colori armoniosi che non sono la stessa tonalità, come un insieme complementare o analogo, il Generatore di tavolozza di colori costruisce quelle relazioni Quando stai campionando un colore di partenza da un'immagine o da un disegno e devi leggerne il valore esatto, il selettore ti procura il codice esadecimale E quando le tue tonalità sono destinate a uno sfondo CSS che svanisce l'una dall'altra, il Generatore di sfuma ne trasforma due in un ready-to-paste linear-gradient.
La pipeline naturale è simile a questa: scegli o incolla un colore di base, genera le sue tinte, sfumature e toni, verifica le coppie che intendi impilare rispetto al controllo del contrasto e copia i vincitori nel tuo foglio di stile o nei gettoni di design. Ognuno di questi strumenti viene eseguito interamente nel browser, quindi un colore di marca che non hai annunciato non viaggia mai su nessuno's server. Se l'utensileria locale è un valore che condividi, il pezzo attivo Privacy e strumenti online spiega perché costruisco tutto in quel modo, e il Toolkit per sviluppatori web raccoglie il resto delle utilità che vivono nel mio flusso di lavoro quotidiano.
Un esempio veloce
Inizia con il marchio blu #4466EE. Impostare il conteggio dei passi su dieci e lasciare il formato di copia su HEX. Il generatore restituisce tre colonne.
La colonna delle tinte inizia a #4466EE e sale verso il bianco, passando attraverso blu progressivamente più chiari fino allo swatch finale #FFFFFF. Da qualche parte nel mezzo si ottiene una morbida pervinca che fa un eccellente sfondo selezionato-riga La colonna sfumature inizia allo stesso modo #4466EE e scende verso il nero, dandoti profondi indaco adatti al testo e agli stati pressati, che terminano con #000000. La colonna dei toni inizia a #4466EE e si muove verso il grigio, producendo blu ardesia tenui che si leggono calmi e discreti, terminando con #808080.
Da quell'unico input ora hai uno sfondo (una tinta chiara), un riempimento al passaggio del mouse (una tinta leggermente più scura), un colore primario (la base), un colore di testo (una tonalità scura) e un colore disabilitato (un tono) Fai clic su qualsiasi campione per copiarlo, cambia il formato di copia in RGB o HSL se il tuo progetto preferisce quelli e incolla. Quelli che prima erano venti viaggi in un selettore di colori ora sono una pasta e una manciata di clic, e poiché la matematica è deterministica, la tavolozza è coerente ogni singola volta.
Domande frequenti
Qual è la differenza tra una tinta, una tonalità e un tono?
Una tinta è un colore misto a bianco, che lo rende più chiaro Una tonalità è un colore misto a nero, che lo rende più scuro Un tono è un colore misto a grigio, che lo silenzia senza cambiare se è chiaro o scuro Tutti e tre mantengono la tonalità originale e cambiano solo il modo in cui appare chiaro, scuro o saturo il colore.
Come faccio a generare sfumature di un colore?
Inserisci il colore di base, quindi leggi la colonna delle sfumature, che mescola il colore con quantità crescenti di nero Ogni riga è una versione più scura dell'originale a un passo pari e puoi copiarne una qualsiasi come HEX, RGB o HSL Aumenta il conteggio dei passaggi per una gamma più fluida di valori scuri.
Come vengono calcolati i colori più chiari e più scuri?
Ogni scala è un mix lineare del colore di base verso un bersaglio Le tinte si fondono verso il bianco (255, 255, 255), le sfumature si fondono verso il nero (0, 0, 0) e i toni si fondono verso il grigio medio (128, 128, 128) Una tinta del 30%, ad esempio, sposta ciascun canale rosso, verde e blu per il 30% dalla base al bianco.
In quali formati di colore posso incollare?
È possibile immettere un codice HEX (3 o 6 cifre, con o senza hash iniziale), un valore rgb (), un valore hsl () o un nome di colore CSS comune come cremisi o blu acciaio Lo strumento converte il proprio input in RGB internamente e segnala ogni swatch in HEX, RGB e HSL.
Quante tonalità posso generare?
Puoi impostare tra 2 e 20 passi per scala Ogni scala include anche il colore di base originale, quindi un'impostazione in 10 passi ti dà la base più dieci tinte, dieci sfumature e dieci toni Meno passi danno salti audaci tra i valori, mentre più passi danno una sfumatura fine.
Posso costruire una tavolozza monocromatica con questo strumento?
Sì. Una tavolozza monocromatica utilizza una tonalità a diversi livelli di leggerezza e saturazione, che è esattamente ciò che producono le tinte, le sfumature e i toni. Scegli un colore di marca di base e usa le sue tinte per gli sfondi, la base per gli elementi primari e le sue sfumature per gli stati di testo o hover.
I colori generati mantengono la stessa tonalità?
Tinte e sfumature mantengono la tonalità quasi esattamente, perché mescolarsi con il bianco puro o il nero cambia leggerezza piuttosto che tonalità I toni possono spostarsi leggermente perché il grigio si trova al centro dello spazio colore, ma per il lavoro pratico di progettazione l'intera scala si legge come una famiglia dello stesso colore.
Il generatore di sfumature di colore è gratuito e privato?
Sì. è completamente gratuito senza iscrizione e senza limiti Tutti i calcoli di analisi e colore vengono eseguiti nel browser utilizzando JavaScript lato client, quindi i colori immessi non lasciano mai il dispositivo e lo strumento continua a funzionare offline una volta caricata la pagina.
