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…
The first HMD Android phones are here, and they’re super cheap
Rear shell of HMD Vibe smartphone.

Finnish company Human Mobile Devices is renewing its journey under the HMD branding, shedding aside the Nokia naming it used to use for all of its smartphones. The first handsets to bear the HMD branding are the HMD Pulse, HMD Pulse+, HMD Pulse Pro, and the HMD Vibe. All phones share similar aesthetics, with a few splashy colors thrown in for certain trims, and target the budget segment.

The HMD Vibe, for example, serves a 6.56-inch display with an HD+ resolution and a 90Hz refresh rate. Qualcomm’s Snapdragon 680 silicon runs the show, alongside 4GB of RAM and 128GB storage. Notably, there’s a microSD card slot that supports storage expansion up to 512GB.

Read more
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