Learning Session 03: Color Theory
Topic
Today, after doing some internet digging, I wanted to learn about the connection between color theory and UX design, followed by that I also learned about RGB and hex triplets, which were new to me and how they are combined to create colors.
Some designers consider color to be a purely aesthetic choice, but in fact, it is an important part of the UX, which takes into account psychological impact.
Let’s proceed.
What I learned
First I gained more information about how colors have an impact on our behaviors and mood, that’s the theory that is often called ‘Color Psychology’, but for that I need to go more in detail and write an entire article just for that.
In this session, I mainly concentrated on gaining more knowledge about color wheels and color theory.
So what’s color theory?
Color theory is a method for designers to connect with consumers through color patterns in visual interfaces.
In my own experience, I know how much color affects my mood, where these factors most of the time affect my behavior.
Colors can evoke different emotions, for example: Love, comfort, calmness, happiness, sadness and this factor triggers us to do specific responses.
Here’s a quote from Alexander Theroux:
Brent Berlin and Paul Kay in Basic Color Terms demonstrate exhaustively and empirically, the very simple thesis that anywhere in the world, as a language develops and acquires names for color, the colors always enter in the same order. The most primitive are black and white. Then red. Then either green or yellow.
What’s a color wheel?
A color wheel is an abstract illustrative organization of color hues around a circle, which shows the relationships between primary colors, secondary colors and tertiary colors.
The color wheel contains 12 hues — 3 primary colors, 3 secondary colors, and 6 tertiary colors.
The first color wheel was presented by Isaac Newton in his book “Opticks”.
As I was digging for more information, I found out that Colorcom made a research which shows that it takes only 90 seconds for people to make a subconscious judgment about a product and between 62% and 90% of that assessment is based on color alone.
This shows how much colors impacts us, crazy huh!
Primary, Secondary and Tertiary Colors
Primary Colors — There are 3 primary colors: Red, Yellow and Blue. Primary colors can’t be recreated by mixing with other palettes colors and they are the root of every other color.
Secondary colors — Unlike primary colors, secondary colors are created while mixing two primary hues in a given color space.
The pigments red, yellow, blue are blended to form secondary colors like orange, green and purple. Secondary colors are located between the primary colors.
Tertiary colors — are the combination of primary colors and secondary colors. The formed colors are red-orange, yellow-orange, yellow-green, blue-green, blue-purple and red-purple.
Wanna hear a cool quote from Marc Chagall?
“All colors are the friends of their neighbors and the lovers of their opposites.”
Color Models
I moved along to familiarize myself with additive color models and subtractive color models.
They may sound like reading a high-level philosophy book. Sure, I was also confused, But what are the differences between them?
Subtractive color model is a blend of pigments, every time a new color gets added, the mix of these pigments will reflect darker colors.
It’s called subtractive because every time a new color is added, the mix reflects less light and gets darker, tending toward black.
The primary colors of this model are red, yellow and blue. This model of color makes it possible to reproduce colors by combining these tree hues accompanied by a key color like black.
Additive colors contain primary colors that are: red, green and blue.
This term is quite the opposite of the subtractive color, when colors are combined, the mix will reflect pure white.
This color model is known as the RGB system that uses percentages of each of the three colors to create a numeric range of colors from 0 to 255 bits.
Based on the information from internet James Clerk Maxwell is credited as the father of additive color model, from his experimental work regarding light and the color spectrum.
But, what exactly is the RGB system?
The RGB is a system that we see everyday in our electronic devices like our TV, computer, smartphones etc.
As an additive colors system, it combines the three colors: Red, green and blue to create the color in an electric device
One fact that amazed me was that with only three colors combined, more than 16 million colors can be created. (16,777,216 to be precise).
Hex Triplet
I also learned about Hex triplet, which is a way to represent RGB colors. It includes six hexadecimal digits (Numbers from 0–9, letters from A-F) and it’s prefixed with a “#”. The first two digits are for the red value, the second two are for green and the last two are for blue.
Here are some examples on both RGB and HEX
What challenged me today
As I keep getting deeper into learning about UI/UX, more things tend to challenge me overall.
During this session, the thing that challenged me the most was that I didn’t know most of the terms I learned today including: Additive/Subtractive color models, HEX triplets etc.
But at the end of the day, even when I looked at some terms and thought that they are way too hard to learn, with a proper learning routine and mindset, I feel that we can learn whatever we desire.
Thanks for coming this far and following my journey. Any feedback would be fantastic ❤️
