When Google first showed Material You, the most recent evolution of Material Design, we were all blown away by the beauty of the new interface, characterized by dynamic colors that are chosen based on the background applied by the user. From buttons to app backgrounds, from accents in the system to app icons, everything adapts to provide a harmonious look with the utmost respect for functionality.
Science and not magic
During these hours James O’Leary, one of the engineers who contributed to the development of the new design language, provided some interesting details to explain how Google managed to achieve this by using science and referring to some theories developed in the 70s.
The Material You is not simple magic, obtained with machine learning and the use of neural networks, but it required work that started from the basics of what we see on the screens of our smartphones. To show colors in a digital space, designers have been relying since the 1970s on the HSL (Hue, Saturation, Lightness) system (hue, saturation, brightness), which is not very accurate but very useful for quickly reproducing colors on machines. those years.
The main problem with this system is its inability to reproduce some colors correctly, especially when it is necessary to ensure the right contrast in a user interface. To overcome the problem, Google, therefore, went to the root, creating its own color space, free from the constraints of the past while drawing inspiration from a model of the 70s.
Google’s solution is a color space called HCT (Hue, Chroma, Tone) (hue, chroma, hue) where the last parameter takes into account brightness and contrast, through some algorithms. With this method, it is possible to manage the brightness more correctly than the HSL system, as can be clearly seen from the image below.
If the HSL system assigns the same brightness value to the four colors, Google’s solution is able to provide more information thanks also to what is called perceived brightness. In this way the algorithms that will have to choose the colors of the Material You will be able to make visually more coherent choices, with the right shades impossible to obtain previously.
The selection of colors
After preparing the ground to work on, the time comes to choose the colors, taking them from the background chosen by the user and applying them to the system interface and soon also in all the apps. The first step of Material You is to select the 256 main colors present in the background, thus eliminating the various shades.
The image below shows the original image, the one obtained by applying the old Google algorithms and the one using the most recent one, based on the algorithm of M. Emre Celebi, with more information on color.
At this point Material You assigns a score to each color, first based on their vibrancy and a second time based on their relevance to the overall hue of the image. In this way, the system will avoid taking as reference colors that represent only a small part of the image, such as the sun in the image above.
The color that has obtained the highest score, or the one selected by the user from the proposed alternatives, is used as the base color. The hue and chromatic value will affect the entire scheme, to create a bright or dull set, depending on the choice made.
At this point Material You generates a table with the different shades according to their use in the interface, so as to be sure that each element has the right contrast and meets the accessibility requirements requested by Google. The set is adapted to both the light and the dark theme, so as to guarantee a dynamic interface perfectly adapted to your color preferences.
Material You everywhere
At the moment the Material You seems to be relegated to the smartphones of the Google Pixel series and a few Big G applications. Many experts are convinced that it is a proprietary implementation, which cannot be used by other brands until Google decides to make it available but things they are different.
In fact , the Material Color Utilities have been available on Github for quite some time , that is everything that producers and developers need to bring the Material You into every application and user interface. In these hours, Google has also released the stable version of Material Design Components, arrived at version 1.5.0, after having launched it as a preview last October.
Thanks to these libraries, developers have at their disposal examples of implementations based on the Material You, with numerous guides and all the material needed to migrate apps to the dynamic color system, with light, dark or user-customized themes.
In short, Google wants the Material You everywhere, not only on Pixels and on its own apps, and is working on perfecting the design language, even with solutions such as Harmonization , which adjusts colors in an even more realistic way, allows you to create more efficient shading for the elements in evidence and creates more homogeneous gradients.