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.

Image used with permission by copyright holder

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

Image used with permission by copyright holder

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.

Image used with permission by copyright holder

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…
How to view Instagram without an account
An iPhone 15 Pro Max showing Instagram via a web browser.

Instagram is one of the largest social media platforms on the planet. Whether you want to share a family photo, what you had for lunch at your favorite cafe, or a silly video of your cat, Instagram is the place to do it.

Read more
Something odd is happening with Samsung’s two new budget phones
A person holding the Samsung Galaxy A35 and Galaxy A55.

The Samsung Galaxy A35 (left) and Galaxy A55 Andy Boxall / Digital Trends

I’ve been using the Samsung Galaxy A55 for almost two weeks and have now swapped my SIM card over to the Samsung Galaxy A35. These are the latest entries in Samsung's budget-minded Galaxy-A series. In all honestly, I can barely tell the difference between them.

Read more
Learn 14 languages: Get $449 off a lifetime subscription to Babbel
A person using the Babbel app on their smartphone.

Learning a new language no longer requires you to make time for formal classes because there are now several language learning apps that you can tap. One of them is Babbel, and you can currently get a lifetime subscription to the online learning platform for only $150 from StackSocial. That's $449 off its original price of $599, but we don't know how much time is remaining before the offer expires. If you want to take advantage of the 74% discount, it's highly recommended that you complete the transaction immediately.

Why you should buy the Babbel lifetime subscription
A lifetime subscription to Babbel not only unlocks the possibility of learning one or two new languages, as the platform encompasses a total of 14 languages: English, French, Spanish, German, Italian, Portuguese, Swedish, Turkish, Dutch, Polish, Indonesia, Norwegian, Danish, and Russian. You'll be learning your new language of choice with lessons that only take 10 minutes to 15 minutes each to complete, so unlike classes with a rigid schedule, you can learn at your own pace and at any time you're free through Babbel. The lessons cover real-life topics, and they use speech recognition technology to help you master pronunciation. You'll then test yourself through personalized review sessions that will help make sure that you retain all the information that's being taught to you.

Read more