Crea la scala di colori
Esempi: #2563eb, rgb(37,99,235), hsl(120,100%,50%), red. RGB e HSL richiedono valori separati da virgole. La trasparenza e la sintassi CSS con spazi non sono supportate.
Come viene creata la scala
Il colore base rimane invariato al centro. I livelli più chiari mescolano i suoi canali sRGB con il bianco e quelli più scuri con il nero, fino all’80%. Le differenze visive tra i livelli non sono uniformi. Vicino al bianco o al nero, i limiti del colore o gli arrotondamenti possono produrre valori HEX ripetuti.
Il colore base rimane invariato al centro. Prima di usare i colori, verifica il contrasto tra il testo e lo sfondo effettivi.
Strumenti correlati
Usa il Generatore di palette per esplorare colori vicini e il Controllo del contrasto per verificare la coppia finale di testo e sfondo.
Domande frequenti
Qual è la differenza rispetto a un generatore di palette?
Un generatore di palette propone colori alternativi vicini al colore base. Questo strumento crea livelli ordinati dal chiaro allo scuro. I numeri indicano la posizione nella scala, non una numerazione standard dei token di design.
Il colore base viene modificato?
No. Il livello centrale mantiene esattamente il valore HEX normalizzato del colore base. I livelli più chiari e più scuri vengono creati ai suoi lati.
Perché alcuni livelli hanno lo stesso valore HEX?
Il bianco puro non può diventare più chiaro e il nero puro non può diventare più scuro. Gli arrotondamenti vicino a questi limiti possono ripetere alcuni valori. Tutti i livelli vengono mantenuti e lo strumento mostra il numero di colori distinti.
I colori generati sono automaticamente accessibili?
No. La leggibilità dipende dalla coppia testo e sfondo. Il link di verifica usa il colore selezionato per il testo su uno sfondo bianco; per il controllo finale, imposta lo sfondo che userai davvero.
Quali impostazioni contiene il link?
Il link contiene il colore base, il numero di livelli, il livello selezionato e la versione del metodo. I vecchi link vengono adattati al metodo aggiornato, quindi i colori possono cambiare.
Posso esportare file di progettazione?
No. Puoi copiare il colore selezionato in HEX, RGB o HSL, oppure l’intera scala con un valore HEX per riga. Lo strumento non esporta CSS, JSON o file di progettazione.