Have you ever wondered what are the superpowers of designers? In Graphext, we have come to understand that even though good design can mean a lot of things, the core to a well crafted interface & user experience, lies strongly on the right use and implementation of color.

Yes, we have heard it all, color is more than just a decoration in data visualization, is a tool for communication, bla bla bla. But the real deal and fascinating aspect of understanding color theory, if you ask me, is the psychology that comes with it, which basically explains how people may interpret color and ascribe meaning to them.

That’s why in Graphext, we are constantly studying to make sure data interpretation improves a little bit every day and the use of color plays a crucial role in this process. Because we need users to navigate data by enhancing clarity, guiding attention, and improving overall comprehension.

As a Product Designer in Graphext, these are the four fundamentals of Color we constantly need to remind ourselves when improving the interface:

• Supports Decision-Making: colors in the interface draw attention to critical actions or metrics, like thresholds or alerts, helping users make informed decisions faster.

• Reduces Cognitive Load: sometimes it may seem simple to explain an action or configuration with a lot of text. But one of the most hard truths of the UX world we had to face in Graphext, is that nobody, and I mean nobody, reads long texts. Therefore, well-implemented color schemes minimize falling into that approach, letting color act as a shorthand for functionality.

Notes:

• For a deep dive, check out this article: https://healey.csc.ncsu.edu/publications/15783

How do we use Color in Graphext?

I won’t give away the whole recipe, but I will tell you a secret or two of how we use color in Graphext, with two examples: dark/ light modes for the UI of the product, and data color scales for data viz itself.

The base color palettes create a foundation for the overall interface. Dark and light modes are essential in data software for enhancing focus, productivity, and adaptability.

Why? Because dark hues reduces background brightness, helping users focus on key data points, while light hues ensures clarity in well-lit environments. It is way too important in professional contexts like finance or healthcare, where users analyze complex data for extended periods of time. So, don’t underestimate its value.

Notes:

• Dark backgrounds make colors in visualizations pop!

• Take your time with prototypes, if you could only imagine the hardship we went through, when creating and evaluating contrast with this feature… Nevertheless, we are really proud of it.

• Also, even in the 21st century, clients still print insights and findings to take to meetings. So you can imagine how much toner that means for dark mode.

On the other hand, designing a color palette for data visualizations can feel like walking through a maze, but keep in mind that the market follows a well known standard, my recommendation is do not go crazy! Instead, study and be inspired of what other softwares share online.

Be creative to an extend.

In data viz, the chosen colors need to be flexible for various contexts. We use three different palette types for each scenario: qualitative, sequential and diverging palettes.

Qualitative or categorical palettes:

They are ideal for visualizations that involve distinct, unrelated categories or groups. In Graphext, each color—like Denim, Orange, Grass, Tomato, and more—represents a specific data category, making it easier to distinguish datasets at a glance.

When to use them? When your data consists of discrete groups with no inherent order, such as:

• Types of products.

• Different regions or countries.

• Categories like "male" vs. "female" or "yes" vs. "no."

Sequential - multi sequential palettes:

Easy, they are ideal for visualizing data with a continuous, ordered progression. Use them for displaying magnitude, intensity, or quantity in your data. That’s why they are better used for numerical variables! We work with essential ones such as Viridis and Osiris.

Diverging palettes:

A diverging color scale is designed to represent a range of values that split at a specific midpoint. Imagine a temperature gauge: cool tones represent temperatures below 0, warm tones represent temperatures above 0, and a neutral color marks the middle point.

Notes:

• Our palettes are based on Vega’s- GitHub library and offers diverse color sets for data grouping https://vega.github.io/vega/docs/schemes/

• If you are interested in a deep dive in color palettes for data viz, I recommend you checking out DataWrapper’s blog https://blog.datawrapper.de/category/color-in-data-vis/

Talk About the Technical Side

In data-driven softwares as complex as Graphext, we must to take into account the second step any design requieres, which is implementing it.

Once the colors of the brand where studied, prototyped and tested. The development team created the corresponding color variants in a .css archive within the Graphext library.

For example, for the classification colors for grey:

We have the following variables:

Since Graphext has two themes (dark and light), it would be inefficient to apply a different color variable for each component depending on the theme. To address this, we use generic variables (e.g., --g-grey2) that are automatically resolved through a CSS selector ([data-theme='dark']). By default, the variable values correspond to the light theme, and when the selector is detected, they resolve to the dark theme.

Therefore, when replicating a Figma design, we only need to check the color that has been used and apply the corresponding color variable. For example, if we have a text that should be in grey2:

Evidently, we do not have a source of truth, which means that if the Figma file for colors is updated, the CSS color file for Graphext would not update automatically. Manual work is required to transfer the colors from Figma to the .css file.

This may seem as a problem, but:

• Colors don’t change very frequently: once a product like ours is well-established, it’s rare for the most important/ core colors to change.

• A change of color can have unforeseen impact: given the complexity of a product like Graphext, special care must be taken to ensure proper contrast between different colors. If a color in Figma was automatically refreshed in Graphext, it could unintentionally affect parts of the product that were not initially considered. On the other hand, if a front-end team member manually updates a color, they can check which components use that variable and inform the design team about any potential impacts!

Notes:

• Shout-out to one of our developers, Luna Fidalgo, for helping me with this part of the entry!

Lessons Learned

As you can see, a long way we have come to understand color in Graphext. But, if I can tell you one thing is: do not forget contrast provides better readability.

Let me tell you a story:

Before refining our color system, our users found it challenging to distinguish connected data clusters in the Graph visualizations. At the time, to display connecting clusters, we defined their union by merging both colors into its resulting state. For example: if a blue cluster was connected to a yellow one, the connection between the two would have been represented as green, since blue and yellow combined result in that color. This illustrates an ineffective use of color in data analysis.

Why? Because interpreting multiple color merges simultaneously, is far too complex for the brain to process effectively. We violated the principle of expressiveness, which establish that a visualization should express all the data in the dataset and only the data in the datset. The issue lies in mapping categorical data (the clusters) to hue, and then introducing a new hue that wasn’t present in the data. Users interpreted it as having three categories when, in reality, the data only had two.