Color Palette Generator
Generate color palettes
Generate color palettes Funziona localmente nel tuo browser
Complementary
#4ecdc4
#cd4e57
Analogous
#4ecd85
#4ecdc4
#4e96cd
Triadic
#4ecdc4
#c44ecd
#cdc44e
Split complementary
#4ecdc4
#cd4e96
#cd854e
Tetradic
#4ecdc4
#844ecd
#cd4e57
#97cd4e
Tints (towards white)
c3eeeb
88ddd7
4cccc3
2d9f97
1c635e
Shades (towards black)
278b84
1f6f6a
18544f
103835
081c1a
#4ecdc4 #cd4e57 #4ecd85 #4e96cd #c44ecd #cdc44e #cd4e96 #cd854e #844ecd #97cd4e #c3eeeb #88ddd7 #4cccc3 #2d9f97 #1c635e #278b84 #1f6f6a #18544f #103835 #081c1a
About the
Il generatore della tavolozza dei colori prende un colore base e ne deriva gli schemi di armonia standard: complementare, analogo, triadico, complementare diviso e tetradico, più una rampa di tinte verso il bianco e sfumature verso il nero. Le armonie vengono calcolate in HSL ruotando la tonalità mantenendo la saturazione e la luminosità, motivo per cui i risultati rimangono correlati alla base anziché andare alla deriva. La rampa è la parte di cui la maggior parte delle tavolozze ha effettivamente bisogno, perché un'interfaccia funzionante necessita di diversi valori della stessa tonalità per gli stati al passaggio del mouse, attivo e disabilitato, non solo un colore principale.
Where people use the
- Costruire una tavolozza attorno a un unico colore del marchio.
- Produrre varianti hover, attive e disabilitate da un accento.
- Esplorare alternative a un colore che non ha superato il controllo del contrasto.
- Generazione di una rampa neutra per superfici e bordi.
How to use the
- 1
Scegli un colore di base
Inserisci un valore esadecimale come 4ECDC4 oppure utilizza il selettore. Tutto il resto deriva da questo colore.
- 2
Leggi gli schemi di armonia
Ogni schema è una rotazione di tonalità diversa. Il complementare è 180 gradi, il triadico è 120 e 240 e così via.
- 3
Prendi la scala di tinta e ombra
Cinque tinte verso il bianco e cinque tonalità verso il nero ti danno gli stati e le altezze di cui avrai bisogno in un'interfaccia reale.
- 4
Copia i valori
L'elenco completo dei valori esadecimali generati è in un blocco, pronto per essere incollato in un foglio di stile o in un file token di progettazione.
- 5
Controllare il contrasto prima della spedizione
Esegui qualsiasi coppia di testo e sfondo dalla tavolozza tramite il controllo del contrasto. Armonioso non è la stessa cosa che leggibile.
Suggerimenti e migliori pratiche
- Scegli il colore di base dal marchio, quindi regola la luminosità solo per gli stati.
- Prenota il colore complementare per l'unica azione che vuoi notare.
- Eseguire sempre l'abbinamento finale tramite un controllo del contrasto prima della spedizione.
Domande frequenti
Qual è la differenza tra gli schemi?
Il complementare utilizza la tonalità opposta, che offre il contrasto più forte e si adatta a un invito all'azione. Analogo uso dei vicini di 30 gradi su entrambi i lati, che è calmo e sicuro. Triadic diffonde tre tonalità in modo uniforme, il che è vivace e più difficile da controllare. Il complementare diviso ammorbidisce lo scontro complementare utilizzando le due tonalità su entrambi i lati dell'opposto. Tetradic utilizza quattro tonalità ad angolo retto, che si adattano a dashboard complessi.
Perché i colori generati condividono la stessa saturazione e luminosità?
Perché ruotare solo la tonalità è ciò che li mantiene riconoscibilmente correlati. Variare la luminosità allo stesso tempo produce colori che sembrano non correlati, il che vanifica lo scopo di una tavolozza.
Le tinte sono solo il colore mescolato con il bianco?
In effetti sì, ma calcolato in HSL aumentando la luminosità mantenendo tonalità e saturazione. Ciò mantiene la tonalità stabile, mentre la miscelazione ingenua in RGB tende al grigio.
Quanti colori dovrebbe avere una tavolozza?
Per la maggior parte delle interfacce, due o tre tonalità più una sfumatura neutra sono sufficienti. Uno schema con cinque tonalità sature è difficile da usare in modo coerente e di solito finisce per sembrare casuale.
Controlla l'accessibilità?
No, genera solo colori. Utilizza il controllo del contrasto su qualsiasi abbinamento che intendi utilizzare per il testo.