Material Design adds new Color tool, guidance on color systems, right-to-left icons, more

Material Design is adding more guidance on color systems and usability, with a new tool to easily design palettes when creating interfaces. The April 2017 guideline update also adds new recommendations for text fields and designing right-to-left icons.

Simplifying the process of creating, sharing, and applying color palettes, the new tool is web-based and features a simple, clickable interface.

Designers are able to test color schemes on sample UIs and preview across a range of Material Design Components. It is especially useful when creating darker and lighter variations of an app’s primary and secondary colors. Works can be exported through HTML, CSS, or JavaScript in Codepen.

When finished customizing, the tool also allows developers to test if text is readable on different-colored backgrounds. Based on Web Content Accessibility Guidelines legibility standards, it will provide suggestions for minimum text opacity.

In addition to expanding usage basics for text fields, there is a new section on text field boxes for increasing user discoverability. Additionally, there are more resources when dealing with Bidirectionality, including guidance on right-to-left (RTL) icons.