Color Palette Generator

Generate harmonious color palettes from any base color.

Complementary palette

Base color details

Shades & tints


              
            

          


        

      

    

        
How to use

        
    
          
  1. Pick a base color or hit Random to start fresh.
    2. 
          
  2. Choose a harmony type: complementary, triadic, analogous, or tetradic.
    3. 
          
  3. The palette appears instantly with all hex codes labelled.
    4. 
          
  4. Drag swatches to reorder them or click to lock individual colors.
    5. 
          
  5. Export the palette as image, CSS variables, or JSON.
    6. 
        

      

    

        
Frequently asked questions

        

          
What harmony rules are available?

          

            
Complementary, split-complementary, analogous, triadic, tetradic, and monochromatic. Each one applies a different geometric relationship on the color wheel to produce a balanced set.

          

        

        

          
Can I lock colors and regenerate the others?

          

            
Yes. Click a swatch to lock it, then hit Generate again. Only the unlocked colors will change, which is great for refining a palette around an existing brand color.

          

        

        

          
How do I export for Tailwind or CSS variables?

          

            
The Export menu offers CSS custom properties, Tailwind config, Sass variables, and a JSON object ready to drop into any design token system.

          

        

        

          
Will the palette be accessible?

          

            
The generator shows the contrast ratio between every pair of swatches so you can spot accessibility issues immediately. For interface design, ensure text and background pairs meet at least WCAG AA.

          

        

      

    
    


    

      

        
Advertisement