Color plays a crucial role in digital design, affecting everything from aesthetics to user experience. In this blog post, we provide an in-depth introduction to color in digital design, exploring the history of color theory, the properties that shape color, and how we perceive and understand color. By understanding the fundamentals of color, you can create visually captivating designs that effectively communicate your message and resonate with your target audience. Join us on this journey as we dive deeper into the world of color and its application in digital design, ensuring that your creations are both beautiful and functional.
An introduction to color in digital design.
Color can make designs more visually interesting and aesthetic, and can reinforce the organization and meaning of elements in a design.
if applied improperly, however, color can seriously harm the form and function of a design.
Foundational knowledge
Back in 1666 Isaac Newton created the color theory while inventing the color wheel. Sir Isaac Newton back then already understood that colors are human perceptions, not absolute qualities of wavelengths of light.
This is important to know as it is a core principle in explaining color blindness and therefore a big subject in accessibility, more about this in a later blog.
This also implies that anyone who perceives a color can think or feel differently about this color. An example of this is cultural beliefs and this then stretches out to the individual beliefs within one culture.
Isaac Newton created a system to categorize colors, defining them in three groups:
Primary colors; red, blue, yellow
Secondary colors; mixes of primary colors
Tertiary colors; or intermediate, mixes of primary and secondary colors
In 2022 this system has changed but the core principles are still the same as the study of color advanced to cover the two main use cases of color: screen/light and print/paint.
The new formula is divided in two categories:
Red, green, blue or in short (RGB) which is used for screens.
Cyan, magenta, yellow and key (black) (CMYK) for print.
In the digital design world there are three main properties that shape color:
Hue's, presented in designtools as (H), how the color appears (e.g., "is blue").
Brightness, presented in designtools as (B), how pure the color is: i.e., if it has tints (white added), shades (black added) or tones (grey added).
Saturation, presented in designtools as (S), how pale or bright a color appears.
A quick overview of the color properties
Hue's
Hue's are the actual color presented to us on a color scale (as seen below)
When we change the Hue's in our design tools the raw color changes.
In the image above the slider represents red, green and blue and the secondary colors in between: cyan, yellow and magenta.
When we move from Figma to Illustrator we can actually control the Hue's, Saturation and Brightness specifically with the sliders.
Brightness
Brightness is the absence or presence of light in color. In the daily life this represents artificial light or the sun, in design this is simply the absence of colors in different metric.
There is no white color, there is only a full 255,255,255 combination of red, green and blue which, together, create white.
The same counts for blacks with a value of 0,0,0. This way we can conclude that 0,0,0 (black) represent the absence of light and 255,255,255 (white) the full presence of light.
Saturation
Saturation is the amount of color that is present in the current combination of Hue (H), Saturation (S) and Brightness (B). A lower saturation presents a more bland color and a higher saturation will represent a more aggressive and brighter color.
How we understand color.
First I have to clarify that color has no bound meaning in and of itself. There is no substantive evidence that implies there is a global system to understand color, talking about the meaning of color.
Colors in and of itself have no specific meaning, but we assume some colors do certain things and culturally we assign a meaning to them as well.
There are some colors that we see as symbols globally for example; the traffic light. Red means stop, yellow means caution and green means go.
White and black are a more controversial color, in some countries black is associated with mourning and in other countries its white that is associated with mourning.
Therefore it is very important to do research which audience you are creating design (with color) for.
This can also apply within the same culture. In the end every person has different associations with a specific color and therefore bind a whole different meaning to what they observe.
This we simply can't control, the only thing we can do is to design as user friendly as possible to ensure our design communicates the right message.
One of the ways to do this is to research what colors are globally associated with a certain purpose, we will go deeper into the psychology of color in a later blog.
My perspective on color.
Color is a very valuable asset for us as designers. It can help us communicate a message, clarify hierarchy and link the use of color to our specific design style.
On the journey of becoming a designer I was convinced that at the start it was a wise move to focus on the user experience and keep the UI minimal and clean, translating in a minimal use of color and minimal color palettes.
I now find that I want to explore the topic of color more and more so this is where I am starting. What is color and what is the function, and then: how do I apply it as best as I can to increase emotional response and aesthetics.
On this journey I bring you with me, fellow designer. And its a given that there will be mistakes made, but that's how we learn.
This series is more of a journey than a guide, for now. Over time it will become a complete set of absolutes.
But again, for now, its a compression of the information I am absorbing and my current perception of what color is in digital design based on the research I have done and the experience up until this moment.
The thing that motivated me to start this series is my mission to create the best possible user experience for the customers of my clients and master the art of digital design.
Normally I saw color as part of user interface design, and it is, but with the recent "trend" around accessibility there is no denying that we need a good knowledge of color, and specifically how we can help people navigate and use our products (for the full-stackers at least).
As always it can be beautiful, but if it is not useable its useless.
What's next.
This was a general overview of what color is. In the next blogs of the series "Color in Design" we will dive deeper into the specific subjects around color: the psychology of color, Color schemes & palettes, creating a color palette, color hierarchy and color and accessibility.
