Designing a Material Theme: Color
Color is one of the clearest methods of expression in design, particularly when it comes to expressing your brand or product’s identity across all the places people encounter it. An app’s interface is rich ground for using color to not only create an identity, but – because the user is directly touching and manipulating the interface – express that identity in a way that connects with someone’s life and experience and reinforces the function, utility, and personality of your product.
Material Design includes a comprehensive color system that allows designers and developers to make decisions at a global level, and have those color decisions cascade through their product, taking care of things like states, emphasis, and contrast.
Color in Material
To accomplish all of that, Material uses a defined set of color slots which comprise a “color theme.” The color theme has slots for primary and secondary colors, which influence key components, as well as slots for a custom background color, surface color (for elevated surfaces or “sheets”), and error color.
There are also several slots for “On” colors, named for the fact that they are colors that appear “on” top of other elements. On Primary, for example, is used for text, icons, or other elements that appear on top of the app’s primary color. To visualize this, picture an app bar with a menu icon and title. Both use an “On” color to ensure that appropriate contrast and readability are maintained.
For more nuanced color applications like states, Material uses “tonal palettes.” A tonal palette provides a range of ten values based on the colors you choose, providing lighter and darker options that make your color theme more flexible.
Selecting brand colors
Starting from scratch
If you’re building a color theme from scratch – that is, if you don’t have an existing brand palette – a good starting point would be to think about the nature of your app. In our Material Studies (example apps designed around real world use cases and product constraints), you can see a variety of approaches to branding with color, based on each app’s function and personality.
Is your app a utility that helps people efficiently parse information like the dark-hued personal finance app Rally? Is it a modern and sophisticated shopping app that inspires users with its refined aesthetic and pink tones, like Shrine? Or maybe it’s an education app like Owl that seeks to make education and learning a fun experience, with a fun palette to match. In each of these cases, color plays an important role in creating and reinforcing the app’s personality.
For an app like Rally that’s all about seeing and managing personal finance data, it’s important to take a reserved approach to color. The app’s primary color is green. Rally’s On color is white, and the background color is a dark grey tone. Other colors are strictly reserved for the practical presentation of data on a variety of dashboard screens.
Owl, on the other end of the spectrum, creates a fun and playful environment by using three distinct primary colors in its color theme. Despite the fact that Owl could be seen as having three different color themes in the same app, they’re all tied together by vivid, bright colors that mimic the primary colors of the color wheel - yellow, red, and blue.
Shrine falls somewhere in the middle. The app has a distinctly opinionated take on color, using creamy pink hues for primary and secondary colors, and a deep brown On color. While Shrine’s color palette is distinct, its usage in the app is focused and refined, which reflects the personality Shrine wants to portray as a modern and elegant place for fashion and lifestyle shopping.
When making your own theme from scratch, think about where your app may fall on the spectrum created by these examples. Start out by choosing a primary color that you feel best expresses the personality and purpose of your app. Then, choose a secondary color that either heightens or moderates those qualities, depending on how you want the app to feel. Think about how you might use On colors, or apply your new colors to surfaces or backgrounds to reinforce the expression.
If you already have a brand palette
When building a color theme for your app, you may already have a brand color palette that can easily be made into a Material color theme. If this is the case, you may already have brand guidelines covering which colors to prioritize and how to conceptualize the personality or tone of the brand. You can combine this information as described above to decide which colors to include in your color theme.
If you have a brand palette but no guidance, take a look through existing branded materials or interfaces and compare to the palette to determine which colors should be prioritized or thought of as primary and secondary. Test out these colors to determine whether they can support accessible contrast ratios. If not, you can select a variation from the tonal palette that does.
Expand your palette with the palette generator
To do that, check out the palette generator embedded below. Just add your chosen colors on the right, and click each generated color swatch to copy its hex code.
Visualizing your theme
Once you’ve chosen some colors and expanded them into tonal palettes, you’re ready to actually create the color theme by plugging colors into the slots Material Design provides.
To do this in a design environment (and get an instant preview of your theme on Material Components), make a copy of our Baseline Design Kit for Figma. On the Material Theme page within the kit, you’ll see a frame called Color which gives a comprehensive look at your color theme, including tonal palettes.
On the right side of the screen, you’ll see a panel that contains global styles matching the colors in your theme under Color Styles. To start plugging colors into your theme, click the edit icon next to each color style. Go back over to your tonal palettes in the generator and click each swatch in the tool to copy its hex code, entering them into the appropriate styles in Figma.
Once your primary and secondary swatches are taken care of, take a look at the Stickersheet page in Figma to see how your theme looks on each component.
What’s next?
From here, you can also experiment with surface, background, and error colors to refine your new color theme. You can also try getting even more creative with the color system by creating multiple themes like the Owl example above.
Once you’ve come up with the perfect color theme, you may be ready to implement. For guidance on that, check out Nick’s post on implementing a Material color theme.