NABEEL.
All Tools
Privacy Policy Terms of Service

Color Palette Generator

Generate beautiful, harmonious color palettes from a seed color or mood. Export to CSS, Tailwind, SCSS, or JSON instantly.

Palette Settings

5
0
Export

Your Palette

Contrast vs White / Black
Export

                    

                

            

        

    







    

        

            

                

                
How to Use

                

                    

                        
1

                        

                            
Pick a Seed Color

                            
Use the color picker or type a hex value. All generated colors will harmonise with your seed.

                        

                    

                    

                        
2

                        

                            
Choose Harmony Mode

                            
Analogous = warm/related tones. Complementary = high contrast. Monochromatic = same hue, varied brightness.

                        

                    

                    

                        
3

                        

                            
Export Your Palette

                            
Copy individual hex values or export the whole palette as CSS variables, Tailwind config, SCSS, or JSON.

                        

                    

                

            


            

                

                
Common Questions

                

                    

                        

                            
                        

                        

                            

                                WCAG requires a 4.5:1 contrast ratio for normal text (AA standard) and 3:1 for large text. The accessibility panel shows each colour's contrast against white and black so you can choose readable text colours.
                            

                        

                    

                    

                        

                            
                        

                        

                            

                                Copy the exported object and paste it into your tailwind.config.js under theme.extend.colors. You can then use classes like bg-brand-1 or text-brand-3.