The Purpose of Color in UI/UX Design

“The craving for color is a natural necessity just as for water and fire. Color is a raw material indispensable to life. At every era of his existence and his history, the human being has associated color with his joys, his actions, and his pleasures.”

Fernand Leger, “On Monumentality and Color”, 1943  

Color endlessness is by its nature incomprehensible to human finiteness. It is impossible to fully comprehend how someone sees or feels color. The same thing with time, we can feel it, but we can’t see it, so are we blind to some colors because they are meaningless to us and yet hypersensitive to others? Are there any rules of conduct when every single person sees color differently? In both cases, we rely on our experience.

Line, Form, Color

Of course there were a lot of color theories throughout the time; Pythagoras, Aristoteles, Platon, Isaac Newton, Johann Wolfgang von Goethe, Schopenhauer, Philipp Otto Runge, Schrödinger, Albert Munsell.

Munsell Color Theory is based on a three-dimensional model in which each color is composed of three attributes, hue (color itself), value (lightness/darkness), and chroma (color saturation or brilliance).

Ostwald came to the conclusion that some color combinations can be perceived as pleasant and others unpleasant. Ostwald tried to explore colors using non-empirical methods. In place of Munsell’s three parameters, he selected an alternative group of variables: namely, color-content, white content, and black-content. Ostwald’s system left its mark: for example, the Dutch “De Stijl” movement with Piet Mondrian at its center and Mondrian’s treatment of colors in 1917 and 1918 had much in common with Ostwald’s theories.

From medieval art through impressionism and to the present day, artists and scholars have been discussing line and form versus color. Arguably one of the most iconic paintings in the world have started with a drawing or a study, basically a line, for instance: The Jeu de Paume Oath by Jacques-Louis David, Knight, Death and the Devil by Albrecht Dürer or The Parsonage Garden at Nuenen in Winter by Vincent Van Gogh. Modern applications start with a wireframe, user experience is directly related to wireframe, but if left in a form of drawing, an application would probably never be used. With the onset of the modern era, we gathered all these different options for acquiring color. One of my desires is to color-pick a pigment from my surroundings and transfer it to paper or a program, when I realize, the moment my sensation is transferred to the screen its shade has already changed.

Chroma and Contrast

Over time, color systems and the psychology of color were widely debated. Clear systems are a product of modern physics. We perceive color through texture, taste, attributes, and material which means that we feel colors through all our senses.
We can observe color as numbers or mathematical formulas, nevertheless even a physicist will connect a specific color to a childhood memory or taste of its favorite food, even love, hugs.

“It is the best possible sign of color when nobody who sees it, knows what to call it.” 

John Ruskin, 1859.

We usually identify color with their names, but what if the colors were described instead of named. “The color of the sky”, or “the color of a leaf”, “the color of mum’s apricot cake”, our look on color would be totally different. It would be just painless and too simple to study color only through the aforementioned systems.

I feel overwhelming pleasantness when the color of my clothes matches the color of my food. I once had for lunch pesto tagliatelle, the sauce was in a divine absinth color and I was wearing a Naples yellow sweater. My peripheral vision could not disregard this unplanned superposition or its complexity. My food was tastier and I enjoyed my lunch much more than usual. It can be presumed that designers are more observant, but I believe that everyone can learn to be more aware of their surroundings. The influence of color is vast, and usually, we are not even aware of their power. We first eat with our eyes, this can also be transferred to almost any industry. UI/UX is just a small part of color usage.

Those who saw thoughtfully portrayed Gabrielle Chanel in “Coco avant Chanel” are well aware of the usage of colors in frames. The aesthetics of the orphanage is presented later as an influence, while the manipulation of light narrates the overall Coco’s sensibility. Textures of the materials demonstrate Gabrielle’s position in society. She spoke like a man in a society where that immediacy is unusual, so her dresses are heavy-knitted like men’s suits. Patterns, drop-shadows, matt finish, etc. are similarly used in UI/UX design. You use shadow to draw attention to a certain function, or pattern to add depths and branding. Red is commonly used for danger or attention. There is a scene where Gabrielle is sitting in her studio and working. The whole frame is black except the red material in the center of the scene. Red would be less red if the black isn’t so black.

Contrast is one of the most important things and if done properly, it can elevate almost any experience. Contrast creates that fine line between staggering and lukewarm. At the beginning of a project, designers, artists, and animators start by looking at a white artboard or paper. Before applying any color, usually, something is first written in a random black font. We spend a lot of time looking at that contrast. The black letters aren’t genuinely black, they are black in relation to the whiteness of the background.

White is also the absence of color. We can say that white is a color that can escape color. If we design an app that consists only of white and black, will it be enough for the user, or is this the aforementioned wireframe? We can bring to life those black elements with loading, transition, or hover animations, we can add illustrations and icons and of course choose a staggering font, but even then, as will ever, the acquired taste in the user interface will prevail.

When we give attributes to the color, we give them meaning and function. Not having a separate word for something does not mean we can’t distinguish it.

Color Palette

Designers are conscious of the practical reasons for employing a color. In UI/UX design, color is associated with function and prioritization. Selection is an objective process if there are strict brand guidelines. Even so, the room for maneuver still exists. Choosing the right UI color palette is a grueling task. Nevertheless, it depends on a lot of contrasting factors, which can be helpful or lead to a sleepless night.

Applications can be divided into categories like anything else. People usually associate certain colors with a specific category. Health apps are bright, clean, usually white, with a splash of vibrant color, serious but energetic, and advocate life. On the other hand, weather apps are day-night oriented, with a substantial amount of icons, rightfully so. These factors can also be influenced by society, part of the world, or upbringing. A symbol is a marvelous thing. Color is a symbol, right? White is a symbol of purity, but is white color or anomaly?

Blue is absorbing. But what blue? Ultramarine, cobalt, indigo, Prussian blue, Egyptian blue, woad, electric blue, cerulean. For Giotto, blue represented heaven and eternal existence. Connoisseurs of the color wheel are keen on using the advantages of the analogous and complementary colors. Monet’s water lilies are painted with analogous colors. Their serenity would be compromised if we’d introduce orange or red.

In the UI/UX world, big corporations love blue. Bright, straight to the point and clean. And yet, not clean and not bright as the health apps. While health requires precision, business demands reassurance and loyalty.

If you look at the Elements of Euclid, the book would be totally incomprehensible without color. Oliver Byrne used colored diagrams and symbols instead of letters for the greater ease of learners.

Something similar is happening with the user interface. UI/UX designers illustrate functions, rather than beautifying them. Splash screens are composed of graphic elements usually in full color, solid or gradient, animation, and logo, if you are lucky, sometimes you see a sublimely drawn illustration. We can see it as a reward before the onboarding process or as a glimpse of what is waiting for us at the end of it.

There is a lot to think about before designing screens for sign up or log in process. The user will go through these screens before anything else. Frank Lloyd Wright projected small, low entryways so that the rest of the house looks more spacious by comparison. Of course, this is just one way of solving problems. You can try to transport this way of thinking into color usage, which brings us back to contrast, in size, value, and density.

Color Relativity

I recently had the opportunity to watch Abstract of Design, a Netflix series, especially an episode with Danish-Icelandic artist, Olafur Eliasson. He conducted a number of experiments regarding the color and privation of it. “Room for one color” is a walk-through optical illusion. The only colors you see when you enter the room are yellow and white. This is achieved with mono frequency lamps that reduce the viewer’s spectral range. Basically, by controlling light, he stole all other colors.

Imagine applications having a mind of their own? The color will change how our mood changes, our pulse, or depending on the location. This brings a whole new set of decisions in the field of UI color psychology. Deeper knowledge is required for an already delicate science. We are all aware of our feelings when it comes to certain colors, but how can we predict each user case. Wassily Kandinsky was a synesthete. This means that his senses are more connected than the senses of people without this marvelous neurological phenomenon. One sense, in this case, hearing triggers another sense, seeing. In other words, he could hear colors. Kandinsky threw away figures or clear objects in favor of lines, shapes, and dissonant colors in his work. It all started when he had an unusual experience while listening to Wagner’s composition Lohengrin.

So, imagine working on an application side by side with a synesthete.

Stairway to Not Understanding Colors

Everyone has once tried to mix every color in the palette in order to get white, but that doesn’t work that way. The more you mix and add color the more the mixture becomes dark, almost black.

There are two types of color mixing, additive and subtractive. Additive produces white light, which means that colored light, as a result, has white light, not colored paint. Each pigment reflects back to the eye a proportion of the available light, so when we mix and mix, we subtract wavelengths and the mixture looks black.

Simple arithmetic says that clouds are white on a sunny day, but if you look closely you will also notice a whiff of yellow and a dash of grey. The values of these colors change with every moment similar to a controlled animation, but this color randomness couldn’t be achieved through algorithms unless it is done on purpose, in which case there is no coincidence. This kind of marvelous unpredictability with a different result is virtually impossible.

Just imagine what is light capable of. So now, let’s overthink this whole choosing color thing once again 🙂