Color theory for UI/UX Designers
What is Color theory?
In the visual arts, color theory or colour theory is a body of practical guidance to color mixing and the visual effects of a specific color combination. There are also definitions (or categories) of colors based on the color wheel: primarycolor, secondary color and tertiary color.
primary vs secondary colors
Red, blue and yellow are the primary colors and are the base of every other color. They cannot be recreated by mixing other colors together.
Secondary colors result when two primary colors are mixed together; they include orange, green and purple
Tertiary colors are the resulting color formed when an equal amount of a primary and a secondary color are mixed. The primary and secondary color must be beside each other on the color wheel. For example, a mixture of 50-percent red and 50-percent magenta would result in the tertiary color of orange.
Colors meaning in graphic design
White is associated with light, goodness, innocence, purity, and virginity. It is considered to be the color of perfection.
White means safety, purity, and cleanliness. As opposed to black, white usually has a positive connotation. White can represent a successful beginning. In heraldry, white depicts faith and purity.
In advertising, white is associated with coolness and cleanliness because it’s the color of snow. You can use white to suggest simplicity in high-tech products. White is an appropriate color for charitable organizations; angels are usually imagined wearing white clothes. White is associated with hospitals, doctors, and sterility, so you can use white to suggest safety when promoting medical products. White is often associated with low weight, low-fat food, and dairy products.
Red is the color of fire and blood, so it is associated with energy, war, danger, strength, power, determination as well as passion, desire, and love.
Red is a very emotionally intense color. It enhances human metabolism, increases respiration rate, and raises blood pressure. It has very high visibility, which is why stop signs, stoplights, and fire equipment are usually painted red. In heraldry, red is used to indicate courage. It is a color found in many national flags.
Red brings text and images to the foreground. Use it as an accent color to stimulate people to make quick decisions; it is a perfect color for ‘Buy Now’ or ‘Click Here’ buttons on Internet banners and websites. In advertising, red is often used to evoke erotic feelings (red lips, red nails, red-light districts, ‘Lady in Red’, etc). Red is widely used to indicate danger (high voltage signs, traffic lights). This color is also commonly associated with energy, so you can use it when promoting energy drinks, games, cars, items related to sports and high physical activity.
Light red represents joy, sexuality, passion, sensitivity, and love.
Pink signifies romance, love, and friendship. It denotes feminine qualities and passiveness.
Dark red is associated with vigor, willpower, rage, anger, leadership, courage, longing, malice, and wrath.
Brown suggests stability and denotes masculine qualities.
Reddish-brown is associated with harvest and fall.
Orange combines the energy of red and the happiness of yellow. It is associated with joy, sunshine, and the tropics. Orange represents enthusiasm, fascination, happiness, creativity, determination, attraction, success, encouragement, and stimulation.
To the human eye, orange is a very hot color, so it gives the sensation of heat. Nevertheless, orange is not as aggressive as red. Orange increases oxygen supply to the brain, produces an invigorating effect, and stimulates mental activity. It is highly accepted among young people. As a citrus color, orange is associated with healthy food and stimulates appetite. Orange is the color of fall and harvest. In heraldry, orange is symbolic of strength and endurance.
Orange has very high visibility, so you can use it to catch attention and highlight the most important elements of your design. Orange is very effective for promoting food products and toys.
Dark orange can mean deceit and distrust.
Red-orange corresponds to desire, sexual passion, pleasure, domination, aggression, and thirst for action.
Gold evokes the feeling of prestige. The meaning of gold is illumination, wisdom, and wealth. Gold often symbolizes high quality.
Yellow is the color of sunshine. It’s associated with joy, happiness, intellect, and energy.
Yellow produces a warming effect, arouses cheerfulness, stimulates mental activity, and generates muscle energy. Yellow is often associated with food. Bright, pure yellow is an attention getter, which is the reason taxicabs are painted this color. When overused, yellow may have a disturbing effect; it is known that babies cry more in yellow rooms. Yellow is seen before other colors when placed against black; this combination is often used to issue a warning. In heraldry, yellow indicates honor and loyalty. Later the meaning of yellow was connected with cowardice.
Use yellow to evoke pleasant, cheerful feelings. You can choose yellow to promote children’s products and items related to leisure. Yellow is very effective for attracting attention, so use it to highlight the most important elements of your design. Men usually perceive yellow as a very lighthearted, ‘childish’ color, so it is not recommended to use yellow when selling prestigious, expensive products to men – nobody will buy a yellow business suit or a yellow Mercedes. Yellow is an unstable and spontaneous color, so avoid using yellow if you want to suggest stability and safety. Light yellow tends to disappear into white, so it usually needs a dark color to highlight it. Shades of yellow are visually unappealing because they loose cheerfulness and become dingy.
Dull (dingy) yellow represents caution, decay, sickness, and jealousy.
Light yellow is associated with intellect, freshness, and joy.
Green is the color of nature. It symbolizes growth, harmony, freshness, and fertility. Green has strong emotional correspondence with safety. Dark green is also commonly associated with money.
Green has great healing power. It is the most restful color for the human eye; it can improve vision. Green suggests stability and endurance. Sometimes green denotes lack of experience; for example, a ‘greenhorn’ is a novice. In heraldry, green indicates growth and hope. Green, as opposed to red, means safety; it is the color of free passage in road traffic.
Use green to indicate safety when advertising drugs and medical products. Green is directly related to nature, so you can use it to promote ‘green’ products. Dull, darker green is commonly associated with money, the financial world, banking, and Wall Street.
Dark green is associated with ambition, greed, and jealousy.
Yellow-green can indicate sickness, cowardice, discord, and jealousy.
Aqua is associated with emotional healing and protection.
Olive green is the traditional color of peace.
Blue is the color of the sky and sea. It is often associated with depth and stability. It symbolizes trust, loyalty, wisdom, confidence, intelligence, faith, truth, and heaven.
Blue is considered beneficial to the mind and body. It slows human metabolism and produces a calming effect. Blue is strongly associated with tranquility and calmness. In heraldry, blue is used to symbolize piety and sincerity.
You can use blue to promote products and services related to cleanliness (water purification filters, cleaning liquids, vodka), air and sky (airlines, airports, air conditioners), water and sea (sea voyages, mineral water). As opposed to emotionally warm colors like red, orange, and yellow; blue is linked to consciousness and intellect. Use blue to suggest precision when promoting high-tech products.
Blue is a masculine color; according to studies, it is highly accepted among males. Dark blue is associated with depth, expertise, and stability; it is a preferred color for corporate America.
Avoid using blue when promoting food and cooking, because blue suppresses appetite. When used together with warm colors like yellow or red, blue can create high-impact, vibrant designs; for example, blue-yellow-red is a perfect color scheme for a superhero.
Light blue is associated with health, healing, tranquility, understanding, and softness.
Dark blue represents knowledge, power, integrity, and seriousness.
Purple combines the stability of blue and the energy of red. Purple is associated with royalty. It symbolizes power, nobility, luxury, and ambition. It conveys wealth and extravagance. Purple is associated with wisdom, dignity, independence, creativity, mystery, and magic.
According to surveys, almost 75 percent of pre-adolescent children prefer purple to all other colors. Purple is a very rare color in nature; some people consider it to be artificial.
Light purple is a good choice for a feminine design. You can use bright purple when promoting children’s products.
Light purple evokes romantic and nostalgic feelings.
Dark purple evokes gloom and sad feelings. It can cause frustration.
Black is associated with power, elegance, formality, death, evil, and mystery.
Black is a mysterious color associated with fear and the unknown (black holes). It usually has a negative connotation (blacklist, black humor, ‘black death’). Black denotes strength and authority; it is considered to be a very formal, elegant, and prestigious color (black tie, black Mercedes). In heraldry, black is the symbol of grief.
Black gives the feeling of perspective and depth, but a black background diminishes readability. A black suit or dress can make you look thinner. When designing for a gallery of art or photography, you can use a black or gray background to make the other colors stand out. Black contrasts well with bright colors. Combined with red or orange – other very powerful colors – black gives a very aggressive color scheme.