Skip to main content

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

google material design color tools 1198185278 122e155a23 o resized
TopRank Marketing / Flickr
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.

“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.

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’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.

Editors' Recommendations

Kyle Wiggers
Former Digital Trends Contributor
Kyle Wiggers is a writer, Web designer, and podcaster with an acute interest in all things tech. When not reviewing gadgets…
New Android Messages update adds Dark Mode and Material design
best weather apps for Android

The newest update for Android Messages is bringing Google's new Material Design 2, as well as a long-awaited Dark Mode.

Following the release of Android 9.0 Pie's all-new look for the Android ecosphere, Google has been updating its Android system apps, with Google Contacts and Google Phone receiving updates to bring them into line with Material Design 2. Judging by this update, Android Messages is the next to get the upgrade to Google's new style.

Read more
Chrome 69 arrives in September with Google’s Material Design overhaul intact
Force Block

The latest version of Google Chrome will arrive on September 4 and it comes with the interface overhaul called Material Design. A specific portion of the company’s notes for the enterprise makes this clear, stating that Chrome will sport “a new design across all operating systems.” The same paragraph also mentions autofill updates and integration into the notification center on Windows 10.

If you’re not familiar with Material Design, it’s a new approach to Chrome’s interface from a visual standpoint. If you’re on a Windows 10 PC, you can actually unlock a portion of the redesign in Chrome 68 by changing the “UI Layout for the browser’s top chrome” flag to “Refresh.” On MacOS, you will also need to enable “Use Views browser windows instead of Cocoa” to see Material Design in action.

Read more
Unlock Google’s cool new Material Design interface hidden inside Chrome 68
google material design hidden inside latest chrome

Although Google’s Material Design user interface recently popped in the Chrome Canary channel, you can actually enable part of this interface in Chrome 68 for the desktop and Apple iOS devices. This is done by enabling the setting using the “flags” command in the address bar.

For desktop, do the following:

Read more