Google’s newest Material Design tools make previewing colors a breeze

Material Design, the colorful, grid-based design language Google developed to unify its web and mobile properties, is getting a fresh coat of paint. On Thursday, the Mountain View, California-based company announced a new color utility that will let developers create, share, and apply color palettes more easily to their apps and games.

Specifically, the new Material Design resource allows developers to create color schemes with lighter and darker shades of primary and secondary colors — think light blue and dark green, or bright cyan and faded magenta. A new text accessibility feature checks if in-app fonts are readable on colored backgrounds, as measured against the World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines legibility standards. And a color preview feature lets devs preview pallet changes across the entirety of their app, and automatically generates the HTML, CSS, and JavaScript code necessary to implement the changes.

google material design color tools pasted image 0

“Material Design is […] a system that supports and strengthens communication and productivity with new tools and inspiration,” Rachel Been, creative lead for Material Design, said. “With these new tools to dabble with color schemes, you’ll be able to give your users a richer experience, so we can’t wait to see what you come up with.”

Google describes Material Design, which it introduced with Android 5.0 Lollipop in 2014, as a “material metaphor […] inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.” It’s the successor to the Holo UI Google debuted alongside Android 4.0 Ice Cream Sandwich in 2012, and it’s defined by colorful icons, responsive transitions, and depth effects such as lighting and shadows.

google material design color tools pasted image 0  1

More recently, Material Design has begun to trickle down to the rest of Google’s mobile and web portfolio. In early 2016, for instance, a new Chrome browser UI adopted a visually simplified three-dot Settings button and large, rounded buttons.

It followed in the footsteps of Google’s Search, YouTube, Drive, Maps, and Google+ design refreshes. Elements were enlarged, colorized, and spaced out. Menus were consolidated. And navigation buttons were made a lot flatter and cleaner.

google material design color tools pasted image 0  2

Google’s goal is nothing short of Material Design domination. It hosts an annual Material Design Competition to crown the best third-party take on the design language, and it’s methodically refreshing apps like Contacts on the web. If the launch of today’s new tools mean anything, it’s that Material Design’s not going anywhere.