Android 12
Google Android 12 Material You Dynamic Color source code released, coming to iOS as well
Google’s Android 12 operating system comes with a lot of new features in the town, meanwhile the all-new Material You is the most outstanding characteristics. While Samsung has already adopted the Material You Dynamic Theming for Galaxy devices, Google just released its source code.
According to the official info (via 9to5Google), the Dynamic Theming function will be widely used on smartphones running the Android 12 operating system as Google is open-sourcing the Material Color Utilities code library. Moreover, the open-source library also coming to iOS in near future.
Join SammyFans on Telegram
Through an explainer about the “Science of Color & Design, James O’Leary explained how the Android maker created a “perceptually accurate” color system to replace the current HSL (hue, saturation, lightness) method. The HSL technique was “built to make computing colors fast on 1970s computers.”
“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.”
For smartphone vendors, the Material You Color Utilities cross-platform code library is equipped with everything they need to implement Dynamic Color. As of now, it’s available in Dart, Java, and Typescript, while Google could expand it to iOS, CSS via SASS, and GLSL shaders.
Here’s how the Android 12 Material You Dynamic Theming engine works:
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.