Material Color Generator

Generate a full Material Design color palette from any base color, with all primary shades (50–900), accent colors (A100–A700), live swatches, and copy-ready CSS, SCSS, or JSON output.

Primary shades (50–900)

Accent colors (A100–A700)


  

  
  

    
  



    

    

      
Build a complete Material Design color palette from a single color with this free Material color generator. Pick or paste any hex value, name your palette, and instantly get all ten primary shades — 50, 100, 200, 300, 400, 500, 600, 700, 800, and 900 — plus the four Material accent colors A100, A200, A400, and A700, shown as live swatches with copy-ready CSS variables, an SCSS map, or JSON. Everything is computed privately in your browser.

      

        
What is a Material color generator?

        
A Material color generator turns one base color into the full set of tones that Google's Material Design system expects for a palette. Each Material color (like Indigo or Teal) ships ten primary shades keyed 50 through 900, from very light to very dark, plus a small set of bright accent colors labeled A100, A200, A400, and A700. This tool builds that whole spread from your chosen color by treating it as the 500 shade, mixing it toward white for the lighter tints and toward black for the darker shades, and deriving vivid accents from the same hue.

        
      

      

        
How to generate a Material Design palette

        
Start from any color and get a paste-ready Material palette in seconds. Everything updates live as you type.

        
  1. Pick a color with the swatch or paste a hex value such as #3f51b5.
  2. Type a name for the palette, for example primary or brand.
  3. Review the 50–900 shades and the A100–A700 accents in the live swatches.
  4. Choose CSS variables, an SCSS map, or JSON as the output format.
  5. Click Copy palette and paste it straight into your project.

      

      

        
Primary shades vs accent colors

        
Material palettes have two parts. The primary shades (50–900) are tints and shades of your base color used for surfaces, text, and large areas, with 500 acting as the main color. The accent colors (A100–A700) are more saturated, eye-catching variants meant for highlights such as buttons, sliders, and floating action buttons. This generator produces both sets so your Material theme is complete and ready to drop into your design tokens.

        
      

      

        
Why use this Material color generator?

        
  • Generates all ten Material primary shades (50–900) from one base color.
  • Adds the four Material accent colors A100, A200, A400, and A700.
  • Live swatches show every tone with its hex value and readable contrast text.
  • Exports as CSS variables, an SCSS map, or JSON design tokens.
  • Names your palette so the keys fit straight into your codebase.
  • 100% free and private — everything runs in your browser.

      

      

        
Frequently asked questions

        

          
What shades does Material Design use?

          
A Material Design palette uses ten primary shades — 50, 100, 200, 300, 400, 500, 600, 700, 800, and 900 — where 50 is the lightest tint and 900 is the darkest shade, with 500 treated as the base. It also adds four accent shades labeled A100, A200, A400, and A700. This generator produces every one of those tones from your chosen color.

        

        

          
How is the palette calculated?

          
The tool treats your input color as the 500 shade. It blends that color toward white in increasing amounts to create the lighter 50–400 tints, and toward black to create the darker 600–900 shades. The accent colors are derived from the same hue using high-saturation HSV variations, which is why they look brighter and more vivid than the primary shades.

        

        

          
What are accent colors used for?

          
Accent colors (A100–A700) are the punchy, high-contrast colors in a Material palette. They are used for interactive highlights like floating action buttons, switches, sliders, and selection states, where you want the element to stand out from the calmer primary surface colors.

        

        

          
How do I add the palette to my project?

          
Pick the output format that fits your stack. CSS variables drop into a :root block, the SCSS map works with Material-style theming mixins, and the JSON format suits design tokens or JavaScript theme objects. Copy the generated code and paste it wherever your colors are defined.

        

        

          
Is my color data sent anywhere?

          
No. The entire palette is generated in your browser with JavaScript. Nothing about your colors or palette name is uploaded, so the tool works offline and is safe to use for unreleased brand work.