Color palettes in Material You
Material You, or Material Design 3, is a flexible system of guidelines, components, and tools that promotes best practices in user interface design. Backed by open-source code, Material Design facilitates collaboration between designers and developers, enabling teams to quickly and efficiently create visually appealing products.
Dynamic colors
Dynamic colors are a key innovation in Material You, allowing for deep and automatic customization of the user interface by adapting to the palette of the wallpaper selected by the user.
This customization not only enhances the device’s aesthetics, making it more attractive and unique, but also improves visual coherence and the user experience by creating a unified and harmonious appearance throughout the system.
Accessibility in dynamic colors
You might wonder if these colors affect accessibility or how this crucial aspect of UX design is addressed. Material You has developed this system with an inclusive approach, ensuring that automatically selected colors maintain high contrast and meet accessibility guidelines.
This means that regardless of the chosen color palette, text and interface elements are guaranteed to be legible and distinguishable for all users, including those with visual impairments.
Additionally, designers can take advantage of the Material Theme Builder plugin for Figma, which facilitates the creation and visualization of custom color palettes. This allows each application to maintain its visual identity while seamlessly integrating into its environment or generate palettes with specific colors.
If we opt for the automatic color selection on our phone, Material You not only adjusts the interface tones but also offers the option to choose between different contrast levels: standard, medium, and high. Moreover, this functionality extends to dark mode, ensuring that interface elements remain clearly legible and accessible in both light and dark environments.
How these colors are achieved
Material You offers three methods for generating color palettes: user-generated colors, content-based colors, and custom or static colors.
This time, we will focus on custom or static colors. Although the formula and structure used are the same for all three cases, as UX designers, we use the plugin created for Figma to efficiently create and visualize these color palettes.
Once we have chosen our brand color, Material You and its algorithm manipulate the tone and chroma of the base color to generate five key colors, known as: primary, secondary, tertiary, neutral, and neutral variant.
Once these base colors have been generated (in the following image, those in the left column), a color palette with tonal scales for each color is created. Using its algorithm, it determines the best color relationships for optimal contrast.
In this case, the assigned relationship is the 40 tone, which represents our brand color, and the 100 tone. Material You’s color algorithm uses these palettes to find and combine contrasting tones, creating accessible color combinations.
Once the main palette has been generated, Material Theme Builder creates the color palette for dark mode.
But what happens if we already have specific brand colors defined and not just a generic blue? For instance, if we already have a specific green as the primary color, along with a brown as the secondary color and a blue as the tertiary color. In this case, we can input these colors into Material Theme Builder, and it will generate a palette based on our selected colors, ensuring that the variations meet the necessary contrast requirements for accessibility.
The use of Material You within Material Theme Builder offers several notable advantages. It allows designers to input specific brand colors and automatically generate a cohesive palette, ensuring that variations maintain the necessary contrast for accessibility. Additionally, it facilitates the visualization and adjustment of these palettes directly in Figma, enabling experimentation and refinement of the design before final implementation.
This not only ensures a consistent and accessible visual identity but also streamlines collaboration between designers and developers, enhancing the efficiency and quality of the final product.
Time to experiment!
This is a translation of the following article from our corporate website:
