Our colored view of the world
Color is one of the most important elements in visual communication. It is an integral part of paintings, photography, film, design, and many other forms of communication. Color can influence our perception of certain events, and give us clues. It can distract us or even have a calming effect. In some cases, with a given context, colors can acquire specific meanings and even replace verbal communication. Think of red — it symbolizes heat, strong emotions, and gives a sense of urgency, therefore is used in many loud brands that seek to stand out.
We see colors in everything around us, but we rarely stop to think about what they actually mean. According to Garber (2003, as cited in Scott & Batra, 2012), “Color is considered to be the most salient and the most “resonant and meaningful” visual feature (…) Color is known to carry important symbolic and associative information”.
As a data design consultancy, color is central to our work and we are aware of the power of its symbolism. With our research, we strive to bring attention to color as an important communication tool and bring awareness to color as a means to convey information.
Analyzing the colors on our website
We challenged ourselves to use colors of our work to create an engaging experience for our website. We had two goals in mind: creating a visual language based on the color information of our work as CLEVERºFRANKE, and develop a new and creative, but practical way of browsing our work based on color. Our goal was to let people create a custom color palette and then return the project that uses the most similar colors. But doing this required us to tackle a few complex questions: How do we extract colors? How do we describe colors? And how do we compare them and decide whether they are similar or not?
Step 1: color description
Creating a color overview of our work sounds straightforward, but it actually isn’t. We can look at each pixel of all our images, and determine its color composition, but what does it actually mean to describe a color? What units do we use, and how do we use these to compare colors? The key to solving this lies in the method that you use to measure colors.
There are multiple ways to digitally describe a color. For example most people are familiar with RGB that describe a Red, Green and Blue value for each pixel, but there are also other methods (or color spaces) such as HSV or YIQ. The color space you choose determines which properties you can use to define colors. There’s no right or wrong when comparing color spaces, but the selection depends on the properties you’re most interested in. After experimenting with different color spaces, we selected LAB color space. The LAB color space takes into account how we mostly perceive, ‘talk’ about, and experience color, and therefore turned out to be a great way to measure all color information in our work.
Step 2: color extraction
But how do we extract the color information from our images? We did this by going over all our images and look at each individual pixel of each image. For each pixel we can extract the red, green and blue values in an array. This allows us to convert the colors across different color spaces, and for example get the hue-saturation-lightness values, that tell you something about how bright or dim a color is. This is useful, because in our work dim or dark colors often represent background colors, which we want to exclude from our analysis. But even if we leave the background colors out, we still end up with an enormous amount of unique colors. This is the point where we needed to simplify all color information in an image into a simplified image palette.
Step 3: aggregating colors and creating a simplified palette
In order to simplify the color palette in an image, we need to not only understand the properties of every unique color but also how different they are from each other. If we can compare two colors and determine if they are similar enough, we can aggregate them into a single one. Repeating this process results in a simplified palette.
We start this process by looking at the most common color in an image palette. We then compare this color to all the other colors by calculating the “distance” within the color space. If this distance between two colors is below a given threshold, we consider that color pair similar enough to be aggregated. Finding this threshold was a process of trial and error, and required us to run the aggregation analysis multiple times with different threshold scenarios so we could determine the right one for our requirements. We selected a threshold that significantly simplified the palette of images (to a maximum of 5 colors) and that was still representative of the original image.
Step 4: comparing color palettes against each other
If you remember, we started out this exploration with the ultimate goal to create a new and engaging, color-driven experience around our work. We envisioned this as an interactive experience where users can build their own custom color palette from our own ‘color cloud’, and then find the project that best matches their selection. This required us to develop a way to compare the user created color palette to the palettes of all our projects, and then identify the one which is the most similar.
We can calculate the similarity between two palettes by creating a matrix that contains the distances between all possible color pairs: so since we are comparing two palettes of 5 colors, we end up with a 5x5 matrix of distances. In order to calculate an overall palette-to-palette score we needed a way to condense these 25 distances into one metric that describes the similarity between the palettes. We explored multiple approaches to aggregating matrix distances into a single value, including calculating the average distance, minimum distance, or the average of all the minimum distance in each source color. Eventually, we developed a scoring metric that counts the number of times that a color-pair distance is below a threshold. The more often that happens, the more similar two palettes are.
The resulting distance score gives us a way of ranking all project palettes against user-defined palette and pick the one that is most similar.
Results
We did not only build an engaging way to explore our work, but we could also find patterns in it. The results from the color exploration of our work show that our information is blue, but not cold, as reds and yellows also dominate in our portfolio. Our information glows: it is bright and bold but is also sometimes elegant and subdued, represented in darker and muted color shades. Our information is diverse, and it crosses color boundaries, reflecting the diverse partners we collaborate with and the industries we work in.
But is this also a sign of the current information trends? How far away are we from other information channels? To answer this, we set out for another challenge. How do other information channels use color? Can we take our key learnings from building these workflows and apply them to a larger set of images beyond our portfolio?
Analyzing 500.000 media images
Analyzing the colors of our own work tickled our curiosity. How does our work align with current information trends? How far are we away from other information channels? This triggered us to see if we could take our key learnings from the approach we developed, and apply them to a larger set of images from beyond our portfolio.
So how does media paint the world? And does the information source, topic, or publication date influence color choices in media? To answer these questions we used the methods and calculations we developed for our website color research, and came up with the following workflow to analyze visual information in online news outlets:
Of course we needed images to analyze, so to build our dataset we collected images from articles written in English published over the past year, since June 1st, 2021. Our selection consisted of articles highlighted in news.google.com and recorded by thenewsAPI. For all these images we documented characteristics and metadata that we could use for our analysis, such as the title, description, snippets, URL and image URL, and extracted the color palette. We made sure to exclude duplicate images and those representing branding images (such as logos, banners, etc).
Once we compiled our data in a database, we could start exploring the overall color composition of the news. We aggregated the palettes of all images into a single annual palette, and we also looked for patterns over time, by aggregated all the image palettes into unique color palettes per day of the week (Monday to Sunday) and day of the year.
Because we also documented the metadata of the images, we could analyze our dataset from two different perspectives and see whether there are differences in color use per source and topic. To identify differences between news sources we selected a total of 45 international news sources in five categories: general news, business and economy, sports, technology, and games. To explore differences between topics we selected 24 topics and categorized the data based on related keywords in the articles’ titles, descriptions, and snippets.
We explored different ways of plotting the data in order to come to interesting insights.
What we found
We found that even though the news may seem grim, bright colors still make up 40% of the total news over the whole year (as opposed to the 60% represented by neutral colors — white, black, grey, beige, etc.). Among those, blue is the dominant color shade of the news we consume.
When we looked at time trends, we noted that weekend news is more colorful than weekday news, with neutral colors representing the smallest dominance on news published on Saturdays and Sundays (54% and 53% respectively) and the highest on Wednesdays (65%) and Mondays (64%).
Blue is represented across topics, from news about Ukraine, unrest, and Afghanistan (57%, 54%, and 30% respectively), to those regarding economics and politics (stock market (54%), inflation (53%), political summits (50%) or elections (41%)), covid-19 (43%), or energy (56%) and climate change (52%).
Red and orange are also common across all news, from covid-19 (14% and 24%), to crypto (34% and 17%), stock market (14% and 24%), sports (15% and 28%) and music (12% and 33%).
We found that while sports (cycling, football, F1) contribute mostly to greens, entertainment topics (movies, tv shows, social media) contribute to purples and pinks. Politics and conflict related topics (elections, political summits, and wars) are polarizing and contributing to the brown and blue opposite ends of the color spectrum, and crypto related news contribute the most to primary bright colors like cyan and bright green.
Looking at the results from the annual composition and topics per color analyses, we see that blue and orange hues dominate across categories and sources. However, we also noticed other patterns. The greatest difference are between outlet types. Pale colors are abundant in general news, design news outlets are amongst the brightest, and video games outlets have greater preference for dark colors. Overall, FOX Sports, Business Wire and CNET use the most intense colors, while Daily Sabah, CBC and The Times use the least intense colors. Regardless of how we look at it, blue dominates our news landscape. It is used across topics and is a preferred color by specialized news sites across all categories. However, this doesn’t mean that our view of the world is exclusively dominated by cold colors, as oranges and browns are often used across topics and sources. Entertainment news (sports, music, cinema…) are colorful, and green is the color of sports; but it really is the technology and design sector the one that brings a bright, vibrant, and saturated view of progress to our information.
Conclusion
A new perspective on colors
We see colors all around us everyday, but we often take them for granted and rarely take the time to examine them with a bit more attention. Through this research we wanted to explore and show the impact and role of colors in visual communication, something that we as a design agency pay attention to every day.
But we also wanted to unlock the potential of using colors in new and engaging ways. By introducing a novel colour-based navigation system to our website, we allow people to browse our portfolio in a way that is playful, but also opens up a new perspective on our work. Taking this thinking one step further, and applying it to the media landscape, we become more attune to how the media literally paints our worldview — and become more aware and appreciative of the colors that surround us everyday.
Bibliography:
Scott, L., & Batra, R. (2012). Persuasive Imagery. Routledge.
