Color Palette Generator
Generate a complete 10-shade color palette from any base color in Tailwind CSS style.
50#f0f6fergb(240, 246, 254)hsl(217, 91%, 97%)
100#dde9fdrgb(221, 233, 253)hsl(217, 91%, 93%)
200#b6d1fcrgb(182, 209, 252)hsl(217, 91%, 85%)
300#7bacf9rgb(123, 172, 249)hsl(217, 91%, 73%)
400#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
500#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
600#0b60eargb(11, 96, 234)hsl(217, 91%, 48%)
700#094cb9rgb(9, 76, 185)hsl(217, 91%, 38%)
800#063888rgb(6, 56, 136)hsl(217, 91%, 28%)
900#042458rgb(4, 36, 88)hsl(217, 91%, 18%)
Informazioni su questo strumento
L'Estrattore di Palette di Colori genera una scala di 10 passaggi per sistemi di design da qualsiasi colore base, corrispondente alle convenzioni di sfumature 50–900 usate da Tailwind CSS, Material Design e framework simili.
Ogni campione nella scala generata mostra i valori hex, RGB e HSL. Il colore del testo si regola automaticamente a bianco o scuro in base alla luminanza.
Come usare
- Scegli un colore base con il selettore colore o inserisci un valore hex.
- La scala di 10 passi (50–900) si genera istantaneamente, coprendo l'intera gamma di luminosità.
- Usa i valori hex, RGB o HSL nel tuo sistema di design o variabili CSS.
Casi d'uso
I team di design generano scale di colori complete come estensioni della configurazione Tailwind o proprietà CSS personalizzate. Gli sviluppatori frontend costruiscono componenti UI accessibili.
Domande frequenti
- Come differisce questa scala dalle "sfumature" di altri strumenti? — Questo strumento genera una scala fissa di 10 passi (50, 100, 200, … 900) ancorata a valori di luminosità specifici, seguendo le convenzioni comuni dei sistemi di design.
- Cambiare la saturazione influisce sulla scala? — La saturazione del colore base è preservata su tutti i passi — cambia solo la luminosità.
- Posso usare questi colori direttamente in Tailwind CSS? — Sì. Copia i valori hex da ogni livello di sfumatura e aggiungili a tailwind.config.js sotto theme.extend.colors con i numeri di sfumatura come chiavi.