Color Palette Generator

Tinte · ombre · variabili CSS

Inserisci un colore brand e ottieni una scala di 10 variazioni (50–900) con HEX, RGB e HSL. Ogni tinta verificata automaticamente per il contrasto WCAG con testo bianco e nero.

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 —

                                                

                                            

                                        

                                        

                                            

                                        

                                    

                                

                            

                        

                    


                    

                        
Un sistema colore coerente è la base di ogni design system professionale: definire una palette strutturata con tinte chiare e ombre scure permette di usare i colori sistematicamente nelle UI, garantendo coerenza visiva e conformità alle linee guida di accessibilità.
Questo generatore:
  • Prende un colore base in HEX, RGB o HSL
  • Genera 10 step di luminosità (50, 100, 200, 300, 400, 500, 600, 700, 800, 900)
  • Mostra i valori in HEX, RGB e HSL per ogni tinta
  • Verifica il contrasto WCAG AA/AAA con testo bianco e nero
  • Esporta le variabili CSS custom per il tema WordPress
  • Genera la versione SCSS come mappa colori
Combina questo strumento con lo Spacing Scale Generator e il Design Token Formatter per un set di token completo.