Palette generator

Press space to get a new palette. Lock the colors you like, check the contrast and grab the code for your site.

Hover over a color: the lock keeps it, the dots drag it, "+" adds a color next to it. Click the color code to edit it.Every color has buttons: lock, copy, shades, remove. Tap the color code to edit it.

Contrast

Palette color pairs by WCAG: AA - regular text, AAA - the best option.

Export


        

      

    

    
Ready palettes

    
Quick checks: Favicon · SEO preview · Competitor store · Palette generator

  


  

    

      
How to use

      
Every press of the space bar gives a new palette. Like a color? Lock it, and the next palettes will be matched to it. Click a color code to adjust brightness, saturation and hue or enter your own HEX. The striped button shows lighter and darker shades of a color - handy when you need a background or a hover color. Colors can be dragged, added between neighbors and removed, from 2 to 10.

      
Palette from a photo and ready code

      
Upload a photo or paste it from the clipboard and the tool finds its main colors. A finished palette can be copied as CSS variables, SCSS, a Tailwind config or JSON, downloaded as a PNG or SVG image, saved to your profile or opened in "Gradient from a photo" to turn it into a background. The page address always holds the current palette, so you can simply share it.

    

  

  

    

      
FAQ
FAQ
Didn't find an answer? Message us and we'll help.

      
    
        
  • Press space or the Generate button. Lock the colors you like - they stay on the next generation, and the rest are matched to them in the chosen harmony.
    • 
        
  • Analogous - neighboring hues, calm and soft. Monochrome - one hue at different brightness. Complementary - opposite colors, the strongest contrast. Split-complementary, triad and tetrad - 3-4 hues spread evenly around the wheel. "Auto" picks one of them each time.
    • 
        
  • In this space equal lightness numbers look equally light to the eye, so a palette always has light and dark colors, and saturation does not jump between hues as it does in HSL.
    • 
        
  • The Contrast block shows color pairs from the palette and their WCAG contrast: from 4.5:1 - regular text (AA), from 7:1 - AAA, from 3:1 - only large headings. The label color in each column is picked automatically.
    • 
        
  • About one in twelve men sees colors differently. Turn on the simulation of protanopia, deuteranopia, tritanopia or monochrome vision and check that the important palette colors do not merge.
    • 
        
  • Yes, without restrictions. Palettes are generated in your browser, and a set of colors is not protected by copyright.
    •