Color Palette Generator

Tinte · ombre · variabili CSS

Il Color Palette Generator crea scale cromatiche (50–950) a partire da uno o più colori base, con curve di saturazione e algoritmi HSL, OKLCH o LAB. Esporta :root con variabili semantiche, copia il JSON dei token e verifica il contrasto WCAG tra combinazioni tipiche di testo e sfondo — ideale per allineare Figma e CSS.

Colore base
H 263°
S 76%
L 56%
Colori nella palette
Scala
Step
Algoritmo
Curva saturazione
Output CSS
Includi :root
Includi HSL grezzo
Formato OKLCH
Variabili semantiche
Prefisso nome 

                                        

                                        

                                            

                                                
Contrasto testo su sfondo —

                                                

                                            

                                        

                                        

                                            

                                        

                                    

                                

                            

                        

                    


                    

                        
Perché usare un generatore di palette

                        
  • Coerenza design system: step 50–950 allineati a convenzioni tipo Tailwind facilitano tema e dark mode.
  • Export pronto: custom properties in :root, opzioni HSL e nomi semantici per componenti.
  • Accessibilità: scheda WCAG per stimare coppie testo/sfondo sui tuoi token.
Combina questo strumento con lo Spacing Scale Generator e il Design Token Formatter per un set di token completo.