Material Palette

Material Color Palette

  • Red
    50 #FFEBEE
    100 #FFCDD2
    200 #EF9A9A
    300 #E57373
    400 #EF5350
    500 #F44336
    600 #E53935
    700 #D32F2F
    800 #C62828
    900 #B71C1C
    A100 #FF8A80
    A200 #FF5252
    A400 #FF1744
    A700 #D50000
  • Pink
    50 #FCE4EC
    100 #F8BBD0
    200 #F48FB1
    300 #F06292
    400 #EC407A
    500 #E91E63
    600 #D81B60
    700 #C2185B
    800 #AD1457
    900 #880E4F
    A100 #FF80AB
    A200 #FF4081
    A400 #F50057
    A700 #C51162
  • Purple
    50 #F3E5F5
    100 #E1BEE7
    200 #CE93D8
    300 #BA68C8
    400 #AB47BC
    500 #9C27B0
    600 #8E24AA
    700 #7B1FA2
    800 #6A1B9A
    900 #4A148C
    A100 #EA80FC
    A200 #E040FB
    A400 #D500F9
    A700 #AA00FF
  • Deep Purple
    50 #EDE7F6
    100 #D1C4E9
    200 #B39DDB
    300 #9575CD
    400 #7E57C2
    500 #673AB7
    600 #5E35B1
    700 #512DA8
    800 #4527A0
    900 #311B92
    A100 #B388FF
    A200 #7C4DFF
    A400 #651FFF
    A700 #6200EA
  • Indigo
    50 #E8EAF6
    100 #C5CAE9
    200 #9FA8DA
    300 #7986CB
    400 #5C6BC0
    500 #3F51B5
    600 #3949AB
    700 #303F9F
    800 #283593
    900 #1A237E
    A100 #8C9EFF
    A200 #536DFE
    A400 #3D5AFE
    A700 #304FFE
  • Blue
    50 #E3F2FD
    100 #BBDEFB
    200 #90CAF9
    300 #64B5F6
    400 #42A5F5
    500 #2196F3
    600 #1E88E5
    700 #1976D2
    800 #1565C0
    900 #0D47A1
    A100 #82B1FF
    A200 #448AFF
    A400 #2979FF
    A700 #2962FF
  • Light Blue
    50 #E1F5FE
    100 #B3E5FC
    200 #81D4FA
    300 #4FC3F7
    400 #29B6F6
    500 #03A9F4
    600 #039BE5
    700 #0288D1
    800 #0277BD
    900 #01579B
    A100 #80D8FF
    A200 #40C4FF
    A400 #00B0FF
    A700 #0091EA
  • Cyan
    50 #E0F7FA
    100 #B2EBF2
    200 #80DEEA
    300 #4DD0E1
    400 #26C6DA
    500 #00BCD4
    600 #00ACC1
    700 #0097A7
    800 #00838F
    900 #006064
    A100 #84FFFF
    A200 #18FFFF
    A400 #00E5FF
    A700 #00B8D4
  • Teal
    50 #E0F2F1
    100 #B2DFDB
    200 #80CBC4
    300 #4DB6AC
    400 #26A69A
    500 #009688
    600 #00897B
    700 #00796B
    800 #00695C
    900 #004D40
    A100 #A7FFEB
    A200 #64FFDA
    A400 #1DE9B6
    A700 #00BFA5
  • Green
    50 #E8F5E9
    100 #C8E6C9
    200 #A5D6A7
    300 #81C784
    400 #66BB6A
    500 #4CAF50
    600 #43A047
    700 #388E3C
    800 #2E7D32
    900 #1B5E20
    A100 #B9F6CA
    A200 #69F0AE
    A400 #00E676
    A700 #00C853
  • Light Green
    50 #F1F8E9
    100 #DCEDC8
    200 #C5E1A5
    300 #AED581
    400 #9CCC65
    500 #8BC34A
    600 #7CB342
    700 #689F38
    800 #558B2F
    900 #33691E
    A100 #CCFF90
    A200 #B2FF59
    A400 #76FF03
    A700 #64DD17
  • Lime
    50 #F9FBE7
    100 #F0F4C3
    200 #E6EE9C
    300 #DCE775
    400 #D4E157
    500 #CDDC39
    600 #C0CA33
    700 #AFB42B
    800 #9E9D24
    900 #827717
    A100 #F4FF81
    A200 #EEFF41
    A400 #C6FF00
    A700 #AEEA00
  • Yellow
    50 #FFFDE7
    100 #FFF9C4
    200 #FFF59D
    300 #FFF176
    400 #FFEE58
    500 #FFEB3B
    600 #FDD835
    700 #FBC02D
    800 #F9A825
    900 #F57F17
    A100 #FFFF8D
    A200 #FFFF00
    A400 #FFEA00
    A700 #FFD600
  • Amber
    50 #FFF8E1
    100 #FFECB3
    200 #FFE082
    300 #FFD54F
    400 #FFCA28
    500 #FFC107
    600 #FFB300
    700 #FFA000
    800 #FF8F00
    900 #FF6F00
    A100 #FFE57F
    A200 #FFD740
    A400 #FFC400
    A700 #FFAB00
  • Orange
    50 #FFF3E0
    100 #FFE0B2
    200 #FFCC80
    300 #FFB74D
    400 #FFA726
    500 #FF9800
    600 #FB8C00
    700 #F57C00
    800 #EF6C00
    900 #E65100
    A100 #FFD180
    A200 #FFAB40
    A400 #FF9100
    A700 #FF6D00
  • Deep Orange
    50 #FBE9E7
    100 #FFCCBC
    200 #FFAB91
    300 #FF8A65
    400 #FF7043
    500 #FF5722
    600 #F4511E
    700 #E64A19
    800 #D84315
    900 #BF360C
    A100 #FF9E80
    A200 #FF6E40
    A400 #FF3D00
    A700 #DD2C00
  • Brown
    50 #EFEBE9
    100 #D7CCC8
    200 #BCAAA4
    300 #A1887F
    400 #8D6E63
    500 #795548
    600 #6D4C41
    700 #5D4037
    800 #4E342E
    900 #3E2723
  • Grey
    50 #FAFAFA
    100 #F5F5F5
    200 #EEEEEE
    300 #E0E0E0
    400 #BDBDBD
    500 #9E9E9E
    600 #757575
    700 #616161
    800 #424242
    900 #212121
  • Blue Grey
    50 #ECEFF1
    100 #CFD8DC
    200 #B0BEC5
    300 #90A4AE
    400 #78909C
    500 #607D8B
    600 #546E7A
    700 #455A64
    800 #37474F
    900 #263238

Material Design Color Palette Generator

Designers need a fast, easy way to get the material design colors they need for their projects. Material Palette was created with designers in mind. We wanted to make it as easy as possible for them to get the colors they need, without having to search through endless websites or spend hours creating color palettes themselves. Material Palette is the perfect solution for any designer who wants quick and easy access to the material design colors. With our simple interface, you can find the perfect color for your project in seconds. Plus, our PWA offline nature and installability means you can access Material Palette anytime, anywhere.

Picking the right colors for your website or app can be hard. You want something that looks good and reflects your brand, but you also don't want to spend too much time experimenting with different color combinations. It's tough enough to design a beautiful and user-friendly website or app, but adding in the challenge of picking the perfect color palette can feel impossible. Material Design Color Palette Generator is here to help. With this easy tool, you can create a custom color palette in minutes that perfectly reflects your brand or style.

What is Material Design color palette?

Material Design is a design language developed by Google, aimed at providing a more consistent, intuitive, and visually appealing user interface across various platforms. A key component of Material Design is its color palette, which is an essential tool for creating harmonious, engaging, and effective user interfaces. The Material Design color palette is characterized by:

  1. Vibrant and Bold Colors: The palette includes a wide range of bold and vibrant colors. These colors are used to create visual interest and draw attention to key elements of the interface.
  2. Primary and Secondary Colors: The palette defines primary and secondary colors to establish a theme for the interface. The primary color is usually more dominant and is used more frequently, while the secondary color is used to accent and highlight elements.
  3. Shades and Tints: Each color in the Material Design palette has different shades, providing a range from light to dark. This variety allows for flexibility in design and helps in creating hierarchy and focus in the interface.
  4. Accessibility and Readability: The palette is designed with accessibility in mind, ensuring that colors can be easily distinguished from one another and provide sufficient contrast for readability.
  5. Consistency Across Platforms: Material Design’s color palette is used consistently across different platforms and devices, ensuring a unified user experience.
  6. Psychological Impact: Colors are chosen not just for aesthetic reasons but also for their psychological impact. For example, blue might be used to instill a sense of trust and reliability, while green might be used to represent growth and prosperity.

In summary, the Material Design color palette is a thoughtfully crafted tool that helps in creating a visually cohesive and user-friendly interface. It plays a crucial role in the overall user experience, influencing how users perceive and interact with the product. For developers and designers, understanding and utilizing this palette is key to creating engaging, intuitive, and aesthetically pleasing applications and websites.

How do you use a material color palette?

Using a Material Design color palette involves several steps to ensure that the colors effectively enhance the user interface and user experience of your application or website. Here are the key steps to follow:

1: Select Primary and Secondary Colors

  • Primary Color: This is the most dominant color in your app. It's used more frequently across your app, for elements like the toolbar, buttons, or active elements.
  • Secondary Color: This color is used less frequently and provides ways to accent and differentiate your app. It’s used for things like floating action buttons or selection controls.

2: Choose Accent Colors
Accent colors are used sparingly to highlight important elements or actions. They should contrast well with your primary color.

3: Implement Shades for Depth and Hierarchy
Material Design provides multiple shades for each color. Use darker and lighter shades of your primary and secondary colors to create depth and hierarchy within your layout.

4: Use Neutral Colors for Background and Surfaces
Material Design recommends using neutral colors for elements like backgrounds and surfaces so that they don't compete with primary and secondary colors.

5: Ensure Text Readability
Make sure that text colors on different backgrounds provide sufficient contrast. Material Design suggests using dark text on light backgrounds and light text on dark backgrounds.

6: Apply Color to UI Components
Apply your color choices consistently to UI components such as buttons, toolbars, navigation drawers, status bars, and more.

7: Consider Accessibility
Ensure that your color choices are accessible to all users, including those with visual impairments. Use tools to check for adequate color contrast.

8: Test in Different Environments
Colors may look different on various screens and under different lighting conditions. Test your color palette to ensure it looks good on different devices and in various lighting conditions.

9: Customize Based on Branding
If you're designing for a brand, adjust the color palette to align with the brand’s identity and values, while still adhering to Material Design guidelines.

10: Consistency Across Platforms
Ensure that your color usage is consistent across different platforms and devices to maintain a cohesive look and feel.

By following these steps, you can effectively use a Material Design color palette in your project. The key is to balance aesthetics with functionality, ensuring that your color choices not only look good but also contribute to a clear and intuitive user experience.

Did you know our free color tools?
The Effect of Commercial Site Interface Colors on Conversion

Different shades have a huge impact on conversion rates of websites. Read to discover how. Do colors affect the performance of a website? Well, it’s quite complicated. To some degree, color affects a site’s performance. But not directly. Color psycho...

The Ultimate Conversion Rate Optimization (CRO) Checklist

If you’re running a business, then you know that increasing your conversion rate is essential to your success. After all, if people aren’t buying from you, then you’re not making any money! And while there are many things you can do...

Incorporating Colors in Design: A Comprehensive Guide

Colors are potent communicative elements. They excite emotions, manipulate moods, and transmit unspoken messages. To heighten resonance in design, skillful integration of colors is essential. This guide is equipped with insights and hands-on tips on ...

Best Color Matches For Your Home Office

An office space thrives on high energy and positivity. As such, it must be calming, welcoming, and inspiring. Studies have also shown that colors greatly impact human emotions. Hence, painting your home office walls with the right color scheme is ess...

What Is The Conversion Rate Formula?

What is the conversion rate formula? Well, the conversion rate formula is a way to calculate the rate at which a marketing campaign converts leads into customers. To determine the success of your online marketing campaigns, it’s important to un...