Material Color Studio
The definitive 2014 Material Design palette.💡 Click standard shades for Primary, 'A' shades for Accent.
Smart Preview
Click standard shades (50-900) to set Primary.
Click 'A' shades to set Accent.
Material Design Color Studio
The Official 2014 Google Palette for Web & Android Developers
The Material Design Color System, introduced by Google in 2014, fundamentally changed how digital interfaces are designed. Before this system, developers often relied on arbitrary hex codes, leading to inconsistent and inaccessible designs. The Material Palette provides a scientifically curated spectrum of colors that mimic physical ink on paper.
This Material Color Studio is the ultimate reference tool for accessing all 19 official palettes (from Red to Blue Grey), complete with their 14 tonal variations. Whether you are building an Android app, a React dashboard, or a Tailwind website, these colors ensure perfect harmony, contrast, and visual hierarchy.
How to Use the Material System
Primary (500)
The 500 weight is the anchor of every palette. It is the "standard" version of the color (e.g., standard Red or Blue) used for app bars, primary buttons, and major brand elements. It offers the perfect balance of brightness and legibility.
Shading (700)
To create depth, use the 700 weight for the status bar (the strip at the top of a phone screen). Being slightly darker than the 500 primary, it creates a "shadow" effect that visually separates the UI layers.
Accents (A100-A700)
The "A" series (e.g., Pink A200) stands for Accent. These are hyper-saturated colors designed specifically for Floating Action Buttons (FABs), toggles, and interactive elements that need to pop against the primary interface.
Pro Tips for Material Colors
- • Primary + Accent: Pick a primary (e.g., Indigo 500) and complementary accent (e.g., Pink A200) for variety.
- • Text contrast: 500-900 shades need white text; 50-400 need black text.
- • Elevation: Use lighter variants (100-200) for elevated cards on dark backgrounds.
- • Status bar: Always use 700 weight for Android status bar behind 500 app bar.
Benefits of Material Colors
Built-in Accessibility
One of the biggest advantages of this system is contrast reliability. As a general rule, colors from weight 500 to 900 require White text, while 50 to 400 typically require Black text. Our Color Studio automatically calculates the WCAG contrast ratio for you, showing you exactly which text color to use.
Cross-Platform Consistency
When you use #F44336 (Red 500), it looks identical on Android, iOS, and Web. This consistency is crucial for brand identity. Major frameworks like Tailwind CSS, Bootstrap, and Vuetify all incorporate these exact hex codes into their default themes.
Who Uses Material Colors?
Android App Developers
Build apps that follow Google's design language.
Material UI React Devs
Reference exact hex codes for MUI theme customization.
Google Workspace Designers
Create consistent add-ons and integrations.
Flutter Engineers
Access the same palette used in Flutter's material library.
FAQCommon Questions
What is the difference between this and Material You (M3)?
Material Design (2014) is a static, manually curated palette of 19 defined colors. Material You (Material 3), introduced in Android 12, is a dynamic engine that extracts colors from user wallpapers. For web designers and brand managers who need fixed, consistent hex codes, the 2014 palette remains the gold standard.
Why do some colors skip the 600 or 900 weights?
Actually, the full 2014 specification includes all weights from 50 to 900 for every primary color. However, not all colors have Accent (A-series) variants. Brown, Grey, and Blue Grey do not have Accent palettes because they are neutral tones meant for backgrounds and text, not highlights.
How do I use these colors in CSS?
You can use the hex code directly (e.g., background-color: #2196F3;). If you are using CSS variables, it's best to define them in your :root like --color-primary: #2196F3;. In Tailwind CSS, these colors are often already available as bg-blue-500.
What is the hex code for Google Blue?
The classic 'Google Blue' often refers to Blue 500 (#2196F3) or Royal Blue (#4285F4) used in their logo. In the Material palette, Blue 500 is the standard reference for a vibrant, accessible blue.
Can I use Deep Orange as a primary color?
Yes! Deep Orange 500 (#FF5722) is a highly energetic color often used by food delivery apps, fitness brands, and social tools. It pairs exceptionally well with cool neutrals like Blue Grey.
What are 'A' shades (A100, A200, A400, A700)?
These are Accent shades. Unlike the main spectrum (mixed with white/black), accents are mixed to achieve maximum spectral saturation. They are brighter and punchier, intended for small interactive details like buttons (FABs), sliders, and progress bars.
Which color is best for text?
For standard body text, Grey 900 (#212121) or Blue Grey 900 (#263238) is preferred over pure black (#000000) as it reduces eye strain while maintaining high contrast. For secondary text, Grey 700 (#616161) is a common choice.
Is Teal 500 accessible with white text?
Yes, Teal 500 (#009688) generally passes AA contrast standards with white text. However, lighter teals like Teal 300 or 400 often require black text. Our tool's 'Smart Preview' instantly shows you the accessible text color for any shade you click.
Why is there no 'Material Pure White'?
In Material Design, surfaces are rarely pure white (#FFFFFF) if they are elevated. Surface colors often use very light greys (like Grey 50 (#FAFAFA)) to differentiate cards from the background canvas.
How do I export this palette to Figma?
While this is a web tool, you can simply click the 'Copy' icon next to any shade to copy the Hex code. You can then paste it directly into your Figma fill settings. We are working on a downloadable JSON/SVG export feature for the future.
What is the '50' shade used for?
The '50' shade (e.g., Blue 50 #E3F2FD) is an extremely light tint. It is commonly used for the background of selected items in a list, hover states, or alternating table rows. It provides a subtle hint of color without overwhelming the content.
Does this tool support Dark Mode?
Material Design colors are inherently compatible with dark mode strategies. Usually, in dark mode, you swap the '500' primary for a lighter, desaturated '200' variant (e.g., using Purple 200 instead of Purple 500) to reduce eye strain against dark surfaces.