Color Palette Generator

Beautiful 5-color palettes — spacebar to generate, lock to keep, extract from images

Harmony:

Extract Colors from Image

📁 Click to upload or drag and drop an image

JPG, PNG, WebP — up to 10MB

Your image never leaves your device — all processing happens in your browser.

Export Palette


      

    


    
    

      

        
WCAG Contrast Check

        

      

    


    
    

      

        
Saved Palettes 

        

          Clear all saved palettes?
          
          
        

        

      

    


    
    

    
    

      
How Palette Generation Works

      
Every palette is generated using HSL color space — Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). HSL is intuitive for harmony rules because hue relationships are based on angular distance around the color wheel.


      

        

          

            

            

            

          

          
Analogous

          
Hues within 30° of each other. Harmonious and calming. Great for nature and ocean themes.

        

        

          

            

            

            

          

          
Complementary

          
Two hues 180° apart. High contrast and vibrant. Common in sports branding.

        

        

          

            

            

            

          

          
Triadic

          
Three hues equally spaced 120° apart. Balanced yet colorful. Good for playful brands.

        

        

          

            

            

            

          

          
Monochromatic

          
Same hue, varied saturation and lightness. Elegant and cohesive. Perfect for minimalist design.

        

        

          

            

            

            

          

          
Split-Complementary

          
One base hue plus two hues 150° away on each side. Contrast without tension.

        

        

          

            

            

            

            

          

          
Tetradic

          
Four hues at 90° intervals. Rich and complex. Works best when one color dominates.

        

      


      
Worked Example — Analogous Palette

      
Starting hue: H = 210° (a blue). Analogous rule: space 5 hues 15° apart.

      Hues: 195°, 205°, 215°, 225°, 235°.

      Saturation: varied from 55% to 70% for depth. Lightness: varied from 45% to 70% for range.

      Result: a cohesive ocean-blue gradient palette with natural contrast.

    


    
    

    
    

      
Color Palette Tips for Designers

      
    
        
  • Follow the 60-30-10 rule. Use your dominant color for 60% of the design (backgrounds, large areas), a secondary for 30% (sections, UI panels), and an accent for 10% (CTAs, highlights). A 5-color palette maps naturally to this rule.
    • 
        
  • Always check contrast for text. A beautiful palette can still fail WCAG AA if text color and background don't have at least 4.5:1 contrast ratio. Use the built-in Contrast Checker above.
    • 
        
  • Limit your palette in production. Having 5 colors available doesn't mean using all 5 on every screen. Most polished designs use 2–3 colors dominantly and reserve the others for specific moments.
    • 
        
  • Lock your brand color first. If you have a brand primary color, click the lock icon on that swatch before regenerating — the tool will build a harmonious palette around your locked color.
    • 
        
  • Image extraction for mood-matching. Upload a photo that captures the mood you're designing for (a landscape, a product shot, a lifestyle image) — the extracted palette will already feel emotionally aligned with your brand direction.
    • 
      

    


    
    

      
Frequently Asked Questions

      

        
Palettes use HSL (Hue, Saturation, Lightness) harmony rules. For example, Analogous picks hues within 30° of each other, Complementary uses hues 180° apart, and Triadic picks three hues 120° apart. Saturation and lightness are varied to create visually pleasing contrast within each palette.

        
No — your image never leaves your device. The tool uses the browser's Canvas API to read pixel data locally and extract dominant colors using a frequency-binning algorithm. No server, no upload, no tracking.

        
Click directly on any color swatch or its hex code label to copy the hex code to your clipboard. A brief confirmation message appears.

        
You can export as CSS custom properties (--color-1 through --color-5), a Tailwind CSS config snippet, SCSS variables, a JSON object, or a plain comma-separated hex list. Click any export button to copy to clipboard instantly.

        
The contrast checker displays WCAG AA pass/fail badges for each palette color rendered as text against white (#fff) and black (#000) backgrounds. Colors meeting the 4.5:1 ratio for normal text show a green "AA Pass" badge.

        
Up to 50 palettes can be saved in your browser's localStorage. They persist between sessions. You can view, reload, or delete saved palettes from the History panel.