Want to become a better UX Designer in 2021? Know the science behind color theory.
Top 10 questions about past, present and future of colors.
Q1. What’s the job of a UX Designer?
You might have a really cool and valid answer for this question (applause for you). But the truth is that the stakeholders around me, be it product managers, be it developers, even designers, most of them assume UX Designer as a creature who deals with just the colors. That UX Designer is an artist with some jute bag of magical paintbrushes and colorful crayons.
No! They are dead wrong.
I’m not going to put some official definition of UX Design here but I need to state that UX Design is nothing less than science. Yes! Much like everything we do to solve problems, everything that a UX Designer does, it is and should be based on reasons and logic.
Even the colors UX Designer choose have science behind them.
2. What’s the Science of Color?
Let me tell you an indigestible fact. Colors don’t exist!
Color is a property of light. Humans are only able to see a small part of the big electromagnetic spectrum.
Color is created when our brain tries to make sense of the light signals it receives.
If that doesn’t happen, our world would probably look like a monochromatic scene from the Matrix movie.
It’s all in your head. Nothing fun about it unless you are into physics.
3. What’s the deal with the Color Wheel?
Did you guys know that Sir Issac Newton (remember Newton’s Laws) is credited with the discovery of the color wheel? During the 17th century, he published a lot of his work related to experiments with the white light and its visible spectrum. Prism was his toy and he played with rainbows like a demigod.
What would happen if you join the visible spectrum end to end?
Correct! You would get a color wheel. This may sound really easy and not so cool but back in the days, Sir Issac Newton spend hours discovering and describing this phenomenon to the world.
If you think you are too cool for this, answer this question.
When you rotate a color wheel, how come all the colors disappear and you just see the white colored wheel?
If you don’t know the answer, pay some respect to that great Scientist. Even if you know it, still do it for he is the one to discover it.
4. What are the Subtractive and Additive Color Models?
Most of us aren’t able to answer it. But then this question often haunts us. The answer lies in the science of colors!
Ideally, we should try to understand how do humans perceive all the colors. I can talk about rods and cones in our eyes as photoreceptors but let’s leave that to some good time over a coffee *wink*.
I’ll try to explain this in very simple science. We all know that the biggest source of light is the mighty sun and it gives us the good light. This white light has all the possible colors in it. (Remember the color wheel?)
When this white light falls on a branch of leaves, a part of this white light is absorbed by them (photosynthesis?)and rest is reflected straight to your eyes. The light reaching your eyes has a wavelength of just green color and so you see green leaves.
Basically, the white light got subtracted and leaves become green emitting objects. The leaves absorbed everything other than the green wavelength. The same is applicable to everything around you.
And this is called Subtractive Color Model. Boom!
Are you looking at some source of light itself?
If you are looking at your monitor now, it’s fooling you. You aren’t looking at some beautiful and spotless white colored snow mountain. There are LEDs behind that glass. RGB (red, green, blue). All of these are emitting respective wavelengths and on addition of all these, we see white light.
If it needs to show us green colored leaf, it would only activate the green part of LEDs and hence we see a green color. I know it’s an illusion but this is how it works.
Welcome to the modern world of Additive Color Models.
5. RGB vs CMYK? How are they different?
Let’s go back to the era of just printing. No modern time sucking monitors! Those weren’t some easy days and they had to extract colors from natural sources.
They used just three color pigments to get all the possible colors using Subtractive Process. RYB (red, yellow, blue).
These great men called them primary colors and combined them to get secondary and tertiary colors. But as humans advanced, so did color printing. We started using CMYK (cyan, magenta, yellow, key) as this color combo enables printers to produce a wider variety of colors on paper.
CMYK is for the printing world. Subtractive Color Model.
Subtractive systems start with white and continue to add color until the
result is black. (White= C0+M0+Y0+K0)
Now you may ask, why don’t we use the same for the computer world. Well! you need to consider the constraints of technology and benefits of technology together. Our great scientists worked hard to figure out LEDs (light emitting diodes). Let me tell you this straight, it ain’t easy!
Scientists actually received Nobel prizes for inventing them.
In brief, our hardworking scientists invented LEDs and with the help of technology, they are able to create a wider gamut of colors on these devices. They use RGB (red, green, blue) as primary colors and add them to get secondary and tertiary colors.
RGB is for the digital world. Additive Color Model.
When there is no light we see black (Black=R0+G0+B0) and as we add more, we move towards while light (White= R255+G255+B255)
6. Primary Colors vs Secondary Colors vs Tertiary Colors?
It might sound a bit complex to you but believe me, it actually is really simple. Go and read the above five points. I’m kidding!
It depends on what language you are talking about. RGB language or CMYK language! Additive Color Model or Subtractive Color Model! Printing world or Digital World! I wasn’t kidding. You need to go and read those points if you don’t understand this.
When you combine primary colors, you get secondary colors. And when you combine secondary colors and primary colors, you get tertiary colors. Isn’t it simple?
7. Hue, Luminance, Saturation. What are these jargons?
Don’t you worry! We’ll break them down together and we would look straight in the eyes of these jargons. They are nothing but ways of describing a color.
You are already using these in your language to describe color. Try recalling when you said “bright blue flame” or “dark red apple”. See! you already described the color.
Hue: The actual color of the object is called hue. Red of apple is hue as are green, orange, etc.
Luminance: It’s just the amount of brightness in a color.
Saturation/Chroma: It’s the degree of purity of hue. Pure hue is highly saturated. When you add grey to it, it becomes de-saturated.
8. What are Tint, Tone, and Shade?
Once you have absorbed that there is nothing to be scared of and that these are just some fancy names to describe the properties of color, life becomes damn easy. Remember your childhood when you just had 12 crayons! And in that box, you just had one red crayon. What did you do to color an apple dark red?
Exactly! You added black crayon to it to make it darker. The output on that white sheet was a Shade of red.
What if you wanted to make it bright red? Correct! You would have added white to it. The result on paper would be a Tint of red.
Or were you the child that would add both white and black (grey) on that red because you just wanted to play with them? If yes! you successfully achieved a Tone of red.
Do you still have that creation with you? *applause*
9. What are various Color Schemes or Color Pallets?
We have come a long way. You have learned so much about the science of colors and delicious apples. Don’t you feel like just jumping to the designs and putting buckets of beautiful colors over them?
Hodor!
You can’t just pick any buckets and throw them here and there. It ain’t no abstract art. As I told you above, everything we do has science behind it. Yes! Ever heard of color harmony?
Our mother nature is the epitome of color harmony. You won’t find a tree which has green leaves but blue branches and then a creepy yellow colored trunk. Mother nature takes care of it.
She knows what should be what. She is absolutely the biggest source of inspiration.
I don’t want to throw any pseudo design concept at you.
“Did you know Orange color stands for youthful and love and sex and this and that?”.
No! This is bullshit. Different cultures have different meanings of colors. So, it is supposed to be based on context and strong meaning.
Now, let’s talk about some color schemes that you can actually use in your creations. Get ready to roll and rumble, round and round the color wheel!
“All colors are the friends of their neighbors and the lovers of their opposites.”
— Marc Chagall
Warm Colors vs Cool Colors
Have you ever seen a blue colored Sun or red colored ocean?
No, right?
The objects that we observe in our mother nature, we associate some sensation with them. Red with hot fire. Blue with cold water. And those sensations are connected to our emotions.
Based on this, our color wheel is divided into two halves, warm and cool colors.
Monochromatic Colors
This is the simplest color scheme. Just one hue with different tint, tone, and shade. It’s harder to create an ugly or jarring scheme using this. (Though both are still possible)
Complementary Colors
Just pick two colors that are opposite to each other on the color wheel and what you get is a complementary color scheme. It’s vibrant with high contrast and makes things stand out. Please don’t use them for text. It could be jarring.
Analogous Colors
Colors that are next to each other on the color wheel are analogous colors. Their combination creates serene and comfortable designs. If you look around, you would find them in nature and are pleasing to the eyes. When you talk of harmonious colors, you talk analogous colors.
Triadic Colors
Colors that are evenly spaced on the color wheel would give you a combination which is called Triadic color scheme. It’s going to be really bold and vibrant color palette. Carefully balance it by making one as primary and other two as accent colors.
There are other color schemes as well such as Tetradic, split-complementary, etc but I believe you understand the basic concept now and you can go ahead with your crazy experiments.
But don’t forget these beautiful lines.
“Color can overwhelm… One must understand that when it comes to color, ‘less’ is often ‘more’ — lesson taught us by the masters but ignored by many artists.”
— Joe Singer
10. How big is Color Blindness and should you care for it?
This is the last question but not the least whatsoever. Your design should be accessible by everyone regardless of their abilities. It might sound not so cool but it actually is. You may ask — Why? Well! It’s the right thing to do. Not just that it’s good for business and it’s the law in many countries. So, don’t discriminate!
Let’s take this color blindness test. What number do you see?
Those with normal color vision see 3.
Those with red-green color blindness see 5.
Those with total color blindness see nothing.
Color blindness affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. Try to design keeping in mind that there are people out there who are dependent on your design for their lives. Imagine an emergency fire alarm button or a traffic light and life of a color-blind person dependent on it.
Our world is beautiful and colors play a major role in our lives. They give it meaning and much more. Colors make every day worth living. So respect them and don’t forget to play with them.
All the best for your beautiful designs.
