Dynamic Color is the defining aspect of Google’s new Material You design language. It will be widely adopted on Android, and Google is also sourcing the open source Material Color Utilities code library behind the live wallpaper-based theme for other platforms.
In an explanation of the “Science of Color and Design”, Google’s James O’Leary explains how the company created a “perceptually accurate” color system to replace the existing HSL (Hue, Saturation, Lightness) approach. , which was “designed to make calculating colors quickly on 1970s computers.”
Google came up with HCT (hue, chroma, tone) to enable a scalable design system that is further personalized by the ability to have a user’s wallpaper color over the rest of the UI. This new color system makes it easier to design with color and accessibility.
For the first time, designers have a color system that truly reflects what users see, considering a range of variables to ensure proper color contrast, accessibility standards, and brightness/coloration consistent between shades.
Today’s blog post explains in detail what happens whenever you select a new wallpaper on Android 12:
First, the wallpaper is quantized, reducing the thousands of colors it contains to a smaller number by merging them into the color space. The reduced color set is small enough to run statistical algorithms efficiently. These algorithms are used to mark and filter colors; Android 12 gives color points for the color and amount of image they represent, and it filters colors close to monochrome.
A color, by default the color best ranked by the algorithm, or chosen by the user in the wallpaper picker, becomes the source color. Its hue and saturation influence the overall color scheme, allowing for a vivid blue play or muted green, depending on the user’s color choice.
Using the source color, we create the base palette, which is a set of 5 tonal palettes. A tonal palette is defined by hue and saturation; the colors in the palette come from various tones. These tonal palettes reduce the cognitive load of designers when creating a design system: instead of specifying hue and saturation for each role, a tonal palette can be overridden.
Finally, we populate the array that defines the hue and tone for each color role, then use those values and HCT to create the colors used in the theme.
Everything you need to implement Dynamic Color is available in the cross-platform Material Color Utilities code library. It’s currently available in Dart, Java, and Typescript, but Google plans to bring it to iOS, CSS through SASS and GLSL shaders. Others can contribute to the library given its open source nature.
For Google, Material You is just getting started on phones at the OS and app level. The new design language will eventually be available on everything Google offers, including the web, Chrome OS, wearables and smart displays.
It will be interesting to see how Dynamic Color is applied on other devices. Google could use desktop wallpaper or just sync the palette from your phone. Wearable devices could eventually use the watch face, while smart displays have rotating photo albums. A fun hypothetical candidate for the latter form factor could be the physical surroundings of where the device is placed.
FTC: We use revenue-generating automatic affiliate links. Following.
Check out 9to5Google on YouTube for more info: