ToolNexIn
Home Design Tools Color Palette Generator

Color Palette Generator - Lock, Accessibility & Code Export

Generate palettes from images, color theory, or randomness. Lock colors you love and regenerate the rest. Check WCAG accessibility between every color pair. Expand any color into a full shade scale. Export as CSS, Tailwind, SCSS, or JSON - ready for your code.

Always Free Extract from image WCAG matrix CSS / Tailwind export
5 modes · Lock & regenerate · Shade scales · Live UI preview
Lock any color - regenerate only the unlocked ones
WCAG accessibility matrix checks every color pair
Export as CSS variables, Tailwind, SCSS, JSON, or JS
Press Space to generate quickly 5 colors
Shade scale -
WCAG Accessibility Matrix
AA pass (≥4.5:1) Large text only (≥3:1) Fail (<3:1)
Live UI preview
Export your palette 

      

    


    
    

  






  

    

      
What makes it different

      
Other palette tools generate colors.
This helps you ship them.

      
Lock, accessibility matrix, shade scales, live UI preview, code-ready export - built for the full design-to-code workflow.

    

    

      

        

        
Lock & regenerate
Lock the colors you love and regenerate only the unlocked ones. The most addictive palette mechanic - users click dozens of times to find the perfect complement.
one more click…
      

      

        

        
Accessibility matrix
Every pair of colors checked for WCAG AA/AAA contrast simultaneously - the feature designers need before shipping but no other palette tool provides.
ship with confidence
      

      

        

        
Extract from any image
Upload a photo, logo, or screenshot - dominant colors extracted via pixel clustering. Build a palette from your brand imagery instantly.
brand-matched palettes
      

      

        

        
9-step shade scales
Click any palette color to expand a full 100–900 shade scale like Tailwind - gives you a complete design system from a single color.
5 colors → 45 shades
      

      

        

        
Code-ready export
CSS variables, Tailwind config, SCSS, JSON design tokens, JavaScript objects - copy the exact format your codebase expects.
paste straight into code
      

      

        

        
Live UI preview
Your palette applied to real buttons, cards, badges, and inputs - on both light and dark backgrounds - before you commit to it.
see it in context
      

    

  






  

    

      
Quick guide

      
Generate your perfect palette in 3 steps

    

    

      
1
Generate or upload
Hit Space to generate a random palette, upload an image to extract colors, or enter a base color to build a harmony around it.

      
2
Lock and refine
Lock any color you love, regenerate the rest. Check the accessibility matrix for WCAG pass/fail. Expand shade scales to explore variations.

      
3
Export to your code
Copy as CSS variables, Tailwind config, SCSS, JSON, or JavaScript - paste straight into your project.

    

  






  

    
Color harmony - the science behind beautiful palettes

    
Color harmony is not just aesthetics - it is based on the geometric relationships between colors on the color wheel. Colors that sit in specific relationships to each other tend to feel visually balanced and pleasing. Understanding these relationships is what separates a random collection of colors from a professional palette.


    

      
Harmony typeHow it worksBest for

      
        
ComplementaryTwo colors opposite on the wheel (180°)High contrast, strong emphasis

        
AnalogousThree to five adjacent colors (30° apart)Calm, natural, cohesive feels

        
TriadicThree colors evenly spaced (120° apart)Vibrant, balanced, playful

        
Split-complementaryOne color + two colors adjacent to its complementHigh contrast with more variety than complementary

        
TetradicFour colors forming a rectangle on the wheelRich palettes, complex designs

        
MonochromaticSingle hue in multiple lightness/saturation levelsElegant, minimal, brand-focused

      
    


    

      The accessibility trap most designers fall into. A palette can look beautiful on your screen and still be inaccessible. Light text on a medium-colored background, or two saturated colors next to each other, often fail WCAG contrast requirements - even when they look fine to someone with normal color vision. The accessibility matrix on this tool shows every color pair's contrast ratio before you ship, saving you the discovery that your design fails an accessibility audit after launch.
    


    
Why shade scales matter for real projects

    
A single brand color like #3B82F6 is not enough for a real interface. You need a lighter version for backgrounds, a slightly darker version for hover states, a much darker version for pressed states, and an almost-white version for subtle tints. That is why Tailwind CSS, Material Design, and every major design system use a 9-step scale. This tool generates that full scale for every color in your palette automatically.

  






  

    

      
Pairs well with

      
Related free tools

    

    

            

        

        
HEX to RGB
Convert HEX to RGB with contrast checker

      

            

        

        
RGB to HEX
Convert RGB sliders to HEX with eyedropper

      

            

        

        
PNG to ICO
Convert PNG images to ICO format

      

            

        

        
Image to Base64
Encode images for CSS and HTML

      

          

  






  

    

      

        
FAQ

        
Color palette questions,
answered.

         Ask a question
      

      

        
Switch to From Image mode and upload any photo. The tool samples pixels across the image to extract the most dominant colors. This works entirely in your browser - the image is never uploaded to a server.

        
Color harmony refers to visually pleasing color combinations based on geometric relationships on the color wheel - complementary (opposite), analogous (adjacent), triadic (120° apart), and more. The harmonic modes generate palettes based on these relationships.

        
The accessibility matrix shows the WCAG contrast ratio between every pair of colors. 4.5:1 or higher passes AA for normal text. 3:1 passes for large text. 7:1 passes AAA.

        
Click Export and choose CSS. You get a :root block with custom properties. Other formats available: Tailwind config, SCSS variables, JSON design tokens, and a JavaScript object.

        
A shade scale is 9 variations of a color from very light (100) to very dark (900), similar to Tailwind CSS. Click any palette color to see its full shade scale and add any shade to your palette.

        
Yes. Click the lock icon on any color to fix it. Then click Regenerate to replace only unlocked colors. This lets you build outward from a color you love without losing it.