IoT–Data visualization colors are the star of the show
We are creating a design system for industrial applications. How many colors do we need?
A few? Not many? A lot? Obviously, this is not a rhetorical question, but a hard reality. In industrial use cases, every color is assigned to a specific task or meaning. It is important to understand what role a certain color plays. In the Predix Design System, monochromatic grays build the foundation. Blue is used to help the user navigate the flow. Information is represented by colorful components.
So sometimes color has meaning, sometimes it doesn’t. Alert colors especially have meaning and need to be treated separately. An additional difficulty is that some colors have connotations. But, in truth, is blue “good” or pink “bad” for an industrial application? Some stakeholders might think so and require a designer’s guidance.
Data visualization colors are a prominent signature element. They have to fit snugly into the framework. Additionally, dark and light themes need different color sets.
We work on use cases where users want to see 100 lines in a given line chart. Our colors get used in all kinds of applications: thin line charts, medium width bar charts, and solid gauges. Every user sees colors differently. We need to consider accessibility. For all purposes, performance matters most.
Warm/cold color contrast
Returning to the grays, we look for basic colors that stand out noticeably from the white and gray backgrounds. Our hypothesis is that the dark backgrounds use a cool gray, so we investigated if the data-visualization colors could be created from warm colors. These colors need to offer sufficient saturation, so it’s easy to tell them apart.
Turning 12 colors into 120
It’s easy to pick 12 attractive colors, but we also need several additional colors, and their contrast has to be sufficiently strong to maintain accessibility. Again, we need to try something new. This time, the procedure is inspired by Samantha Zhang’s Medium article Finding the Right Color Palettes for Data Visualizations.
Deciding on the right naming convention
What naming convention works best? One way is to prepare each color for alphabetical sorting, and give a unique identifier with a leading zero, the number, and letter (for example, $02yellow-f or $12red_a.) That way, the leading number would indicate where on the wheel the number is located. We noticed, however, that this system was too complicated and would result in many typos in design specifications and code. We replaced the letters with numbers and took a simpler approach, using just the color name and a number. For example, the default yellow is labeled $yellow6 and the lightest red is called $red1. That approach seems straightforward for the Industrial Internet.
Colors in Context
We have recommendations for uses in light or dark themes. As a rule of thumb, the light theme colors end in 4, 5 or 6, and dark theme colors end in 2, 3 or 4.
The data visualization colors are optimized for maximum contrast. Unlike the other colors in this design system, none of these colors has a specific meaning. They are meant to be similar yet stand out from each other where needed. Designers can customize data visualization color sets to comply with their business’s respective conventions. These colors are not supposed to be used for any other task than data visualization.
Summary & Outlook
In summary, data visualization makes use of different color hues and intensity to distinguish information and to guide the user’s attention. Because large, complex data groupings are common in the Industrial space, the Predix Design System provides a diverse range of colors to construct visually impactful charts.
Related Links:
Color Usage Guidelines — Predix Design System Team
Predix Design System Data Visualization Developer Guides — Predix Design System Team
How to use colors to manage big data — Elise Blanchard
Balancing Consistency and Flexibility in Design Systems— Kenneth Skistimas
