Imagine walking into a serene dark room, then later into a vibrant red one. The shift in your mood and perception is noticeable, right? Now, let's take this same concept into the digital world. That's the power and psychology of color in UI design.
A design system mostly consist of visual styles, typography, color, components, as well as patterns, like structures, behaviors, and conventions. In this article we will focus on just one part of the design system which is color and our guide will be Google's material design guide.
Keep in mind the color choices you make as a designer affects the look and impacts how the customer feels about the brand. While I go through this color palette guide I will be giving some best practices, tips and tricks on creating an impactful color palette in UI Design following Google's Material Design guide.
Before all that, it will be important for us to understand certain terms.
What is Google's Material Design guide
Well this is a design system developed by Google which serves as a visual guide for motion and interactions that can be customized and delivered across various devices and platforms. Google's material design guide comprises of typography, grids, space, scale, color, and imagery however our focus here is color.
Why Google's Material design guide
Actually most designers choose to use material design because of the
Speed
Speed
Flexibility & cost optimization
Consistency
Performance
Maintenance and updates etc
What is Google's Material design color system guide
The Material Design color system is a set of colors which represent a specific visual spectrum that helps you apply color to your UI in a meaningful way. In this system, you select a primary, secondary, Tertiary, Error etc. Dark and light variants of each color can then be applied to your UI in different ways. Keep in mind this system is not static it is just a guide for you to choose any color of your choice depending on trends, creativity etc.
What is a color palette
A color palette is a combination of specific colors used by UI designers when designing an interface. Creating a UI color palette involves a mix of creativity, awareness of current design trends, and a deep understanding of the impact of color on user behavior.
Google material design advice that you come up with your Primary, Secondary, Tertiary, Error, Neutral and Neutral variant colors.
Keep in mind that when choosing these colors they should be able to live in harmony when they come together and remember Material design is not static it's a guide for you to follow and choose the colors that work better for you.
Keep in mind that when choosing these colors they should be able to live in harmony when they come together and remember Material design is not static it's a guide for you to follow and choose the colors that work better for you.
The Color Palette we will be working with
Color Roles
Primary Color (Sapphire - #281AAE)
This is the color most strongly associated with the brand —an example is the blue of Facebook. They appear most frequently across your screens to guide users to UI focal actions.
In this case our primary color code is #281AAE.
Secondary Color (Bright Sun - #FFD343)
Secondary colors are chosen to maintain visual harmony and provide a wider range of options for designers. They should be selected carefully to ensure they work well with the primary colors and align with the overall brand identity.
In this case our Secondary color code is #FFD343.
Tertiary Color (Malibu - #4BCDFD)
They provide even more variety and nuance to the color palette. In everything you do, make sure the color should be able to live in harmony with the other colors of the brand since they will be used for highlighting, shading, or creating visual accents within the interface.
In this case our Tertiary color code is #4BCDFD.
Error Color (Lava Red- #EC1C24)
Error color is a distinct hue reserved for highlighting and communicating errors or critical issues to users. It is typically a vibrant shade of red, which is universally associated with warnings and alerts.
In this case our Tertiary color code is #EC1C24.
Neutral Color (Mercury- #E6E7E8)
Neutral colors are typically muted and subdued hues, such as shades of gray or beige. They help create a balanced and harmonious design by allowing other colors, like the primary or accent colors, to stand out and take the spotlight.
In this case our Neutral color code is #E6E7E8.
Neutral Variant Color (Grey Goose- #D1D3D4)
just like Neutral Colors Neutral variants provide designers with options to add subtle variations and depth to the visual hierarchy and elements within the interface. So Neutral variant is just here to broaden color options
In this case our Neutral color code is #D1D3D4.
Tonal Palettes
When the six colors have been selected, google's material design advice that you create the tonal palettes for each. A tonal palette is basically the different tints and tones of a particular color. This is mostly to promote variety and contrast.
To generate this tonal palette I will be using a Figma plugin called the UI Color Palette
Google recommends that each tonal palette should have 13 tones and in these tones the first will be black and the last will be white.
The tonal value for each tone should range from 0,10,20,30,40,50,60,70,80,90,95,99,100.
Note this procedure will apply to all the six colors.
This is a preview of the six colors with their tonal palettes generated with Figma's UI Color Palette following Googles guide on 13 tones with values of 0,10,20,30,40,50,60,70,80,90,95,99,100
Assign Roles to the Colors
At this level material design advice that we assign roles to our colors to communicate hierarchy, convey meaning and readability. It's a deliberate approach to create visually pleasing, meaningful, and accessible user interfaces.
Primary Role
Secondary Role
Tertiary Role
Error Role
Neutral Role
Neutral Variant Role
Create the Ad-on colors of the 6 main colors
These colors are not very necessary but the bonus is always good for creatives. These ad-ons are just here for more variety which also provides a lot of flexibility .
For Primary Ad-on colors
For Secondary Ad-on colors
For Tertiary Ad-on colors
Save the Color Palette to the Style Library
These colors created should be saved in a color style of the Figma Library. This will lay a good foundation in a case where the designer is working with a big team. Another designer can easily pickup.
Landing page sample with the brand colors
In conclusion, incorporating Google's Material Design color palette into your brand identity is a wise choice that can greatly enhance the visual impact and recognition of your brand. By embracing the principles laid out in the Material Design guide, you can create a color palette that not only resonates with your brand's personality but also communicates your values to your target audience.
