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 open sourcing the Material Color Utilities code library behind the wallpaper-driven dynamic theming for other platforms.
In an explainer about the “Science of Color & 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 “built to make computing colors fast on 1970s computers.”
Google came up with HCT (hue, chroma, tone) to allow for a scalable design system that is further personalized by the ability to have a user’s wallpaper color the rest of the UI. This new color system makes designing with color and for accessibility easier.
For the first time, designers have a color system that truly reflects what users see, taking into account a range of variables to ensure appropriate color contrast, accessibility standards, and consistent lightness/colorfulness across hues.
Today’s blog post goes in depth on what happens every time you select a new wallpaper on Android 12:
First, the wallpaper is quantized, reducing the thousands of colors in it to a smaller number by merging them in color space. The reduced color set is small enough to run statistical algorithms against with efficiency. These algorithms are used to score and filter colors; Android 12 gives colors points for colorfulness and how much of the image they represent, and it filters out colors close to monochrome.
One color, defaulting to the top-ranked color by the algorithm, or chosen by the user in the wallpaper picker, becomes the source color. Its hue and chroma influence the overall color scheme, enabling a vibrant blue scheme, or a muted green one, based on the user’s choice of color.
Using the source color, we create the core palette, which is a set of 5 tonal palettes. A tonal palette is defined by a hue and chroma; the colors in the palette come from varying tones. These tonal palettes reduce cognitive load for designers when creating a design system: instead of specifying hue and chroma for each role, a tonal palette can be substituted.
Finally, we fill out the table that defines the hue chroma and tone of each color role, then use those values and HCT to create the colors used in the theme.
Everything needed to implement Dynamic Color is available in the Material Color Utilities cross-platform code library. It’s currently available in Dart, Java, and Typescript, but Google plans to bring it to iOS, CSS via SASS, and GLSL shaders. Others can contribute to the library given its open-source nature.
9to5Google’s Take
For Google, Material You is just getting started on phones at an OS and app-level. The new design language will eventually be available on everything Google offers, including on 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 a desktop’s wallpaper or just sync the palette from your phone. Wearables could possibly 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.
Author: Abner Li
Source: 9TO5Google
