How to Apply Color Theory to Web Design(1): Color theory & Color psychology

Airbnb






















Have you ever wonder why you feel comfortable with some websites? and why you don't?
Is there any magic inside the colors?



For example, how do you feel about these websites?

Maggi















Masterclass















Riiotlabs















Kikk















Do you feel any different when you look at these websites?
When you look at the Maggi, you might feel energetic, probably it stimulates your appetite.
However, Masterclass seems like more elegant, luxurious and mysterious.
Some make you clam and feel peaceful, like the last two websites.

How does it happen?

Color is powerful. It is stimulating, healing, soothing and fun. 
It seems like we have an innate reaction to color.


Hypothalamus, Pituitary gland, Thyroid gland

















According to Kissmetrics,
when we view a color, our eyes send a message to a region of the brain called the hypothalamus.

In turn, this sends further signals to the pituitary gland and then onto the thyroid glands
This then signals the release of hormones which cause fluctuations in our mood, emotion and as a result, our behavior.


It's really fascinating topic for me, including biology, psychology, marketing art and design.
Today, I'm going to give a brief introduction about 
1. Color theory
2. Color psychology 
3. Color harmony (lots of web design examples)
3. Trends & Tools

Before introducing these topics, you might want to know the basic color theory.
Here are some brilliant websites I highly recommend:

1.Basic color theory for presentations
2. Intro to Color Theory (Youtube Video)



– Color Wheel, HSV model























In short, color is the visual byproduct of the spectrum of light
Color is the light wavelengths that the human eye receives and processes from a reflected source.

Basically, a Color Wheel (also referred to as a color circle) is a visual representation of colors arranged according to their chromatic relationship. All colors are created from the three primary colors (red, yellow and blue). 

Color consists of three main integral parts:
1. Hue:
it general refers to a specific of the color wheel

2. Saturation:
the purity of a color 
It is a measurement of how different from pure grey the color is.
(by adding the opposite color on the color wheel)

3. Value:
the lightness or darkness of a color (by adding white and black).
It indicates the quantity of light reflected.



– Color Psychology















Color psychology is the science of how color affects human behavior.
Certain colors have been associated with increased blood pressure, increased metabolism, and eyestrain.

In my opinion, every color represent a person. It's just like us.
You and I and she and he, we all have different personalities.

Before creating a website or any design, we should understand them to make the best use of them.
















The palette is roughly divided between these two groups of color: Warm and Cool colors

Warm colors are made with orange, red, yellow and combinations of them all. 
They tend to make you think of heat and sunshine. 
They attract attention and are generally perceived as energetic or exciting


Cool colors such as blue, green and light purple have the ability to calm and soothe. 
They remind us of ocean and sky.



Let's take a look for web examples:























As you can see, Colourpixel combines with reds, oranges, yellows.
They are are bright, vivid, hot and stimulating, probably make us feel delightful too.
The designer wants to show his passion and hospitality.


Masterclass






















Masterclass it uses blues, purples and black that make it calm, professional, trustworthy.
A large portion of black implies self-control, independence and a strong will,
and giving an impression of authority and power.



Contrast: warm colors and cool colors
















It's more obvious when I change McDonald's colors into cool colors.


While blue is considered an appetite-suppressing color, 
researchers often point to warm colors as appetite-stimulating.

Red is a powerful color that increases blood pressure and heart rate.
it is often used in restaurants and is an excellent choice for dining rooms in the home.



Color meaning























As I mentioned, I view every color as an unique person. 
They have their behaviors, attitudes and goals.
I collected information form several websites and make this diagram. 
It shows every color's distinct personality. 

Below you can find links to other helpful resources :)

1. Color Theory for Designers, Part 1: The Meaning of Color
2. How color impacts emotions and behaviors



Company logos with colors
























What's more, Brands and color are inextricably linked
because color offers an instantaneous method for conveying meaning and message without words.
Some colors are formed/associated with certain emotions that the designer wants to convey. 

Warm colors are the chief food colors, evoking the tastebuds and stimulating the appetite
The fast food industry has claimed this combination for a good reason—because it is effective. 

Red is the most successful color in our consumer society and
found in such icon products as Coca-Cola, Ferrari, and red lipstick.

Green suggests growth, natural, organic and healthy, a good color to use for environmentally friendly products. Green stands for trust, prosperity and balance. Therefore, there are lots of organic, environmental companies they prefer use green as their logo designs. 

Cool blues are the most popular color for business and tech companies. Blue is said to conjure thoughts of precision and intellect. Blue is also considered to symbolize justice, loyalty and perseverance



In conclusion, 
Color has value beyond aesthetics. 
Color can be easy, also can be complicated. 
Certain colors are tied to cultural, emotional, and social connotations. 

However, I love colors so much. I value it as one of the most beautiful thing in the world.
Let's go on a color adventure in next article. 
I will explain more about color harmony and give tons of examples of beautiful web designs.






References:
1. Basic color theory for presentations
2. Intro to Color Theory (Youtube Video)
3. Color Theory for Designers, Part 1: The Meaning of Color
4. How color impacts emotions and behaviors
5. INFOGRAPHIC: TRUE COLORS: WHAT YOUR BRAND COLORS SAY ABOUT YOUR BUSINESS?
6. The Psychology of Color in Marketing and Branding
7. The complete guide to understanding consumer psychology CH4: the psychology of color

Comments

  1. Excellent ! I personally like your blog and waiting for more articles like this. Some really great points have been made here. Thanks for share.
    The Best Logo Design Service in NZ

    ReplyDelete

Post a Comment