We have already talked about the , the design regulations created by Google for Android developers, to be applied to apps and services on different platforms. As an addition to this regulation, Google has just launched Color Tool, to help designers in terms of color. Color Tool allows them to create and share their own color palettes, apply them to the user interfaces of apps and other services. Let’s see more.
Work with colors in real time with the Color Tool
Color is a basic aspect of design. Choosing the correct color palette is very important to convey certain values, determine the usefulness of a mobile application or website, and make any text legible. And this is what Google must have thought, that with Color Tool they increase their guidelines on the subject of Material Design, helping designers and developers in aspects related to color.
As we have already seen, With this new tool, color palettes can be created and shared to later be applied in apps and other platforms. But also, Color Tool allows to evaluate if a text is legible with a background of a certain color, based on the Web Content Accessibility Guidelines.
How to use Color Tool
This new Google tool is freely available on the web. On this website, any web designer or developer can play with different color combinations and see the results applied.
Let’s do a test with a pink color, for example. We can know the exact color chosen through its HTML code, and it is related to its lighter or darker variant. We have selected a pink color as the main design color, but the tool allows us to choose also a secondary color and the text color, thus being able to make varied combinations. In this case we have left the white color as secondary and the same pink color for the text.
In the following image we can see three variants of how our interfaces would look with the selected colors. In this case we have chosen a very harmonic chromatic range, but we could have made more contrasting, riskier combinations. At this point, the taste of the designer or the purpose for which a mobile application or a web is being designed plays a fundamental role.
Finally, we have the option to review accessibility for web content based on these colors. That is, check if our chromatic range is readable on the chosen background. Note that depending on whether the text is white or black, and whether the background is lighter or darker, Color Tool tells us if the combination is readable, or the percentage of visibility it has. In any case, an aspect that is as important as it is interesting is that Google has added it to Material Design, especially considering that it is something that is often overlooked.
Stay informed of the most relevant news on our news channel
Facebook Comments
Disqus