Anatomy of Colors in Web Design: Yellow and the Sunshine Feel
This is the third article of our series, Anatomy of Colors in Web Design. Over the next few months, we’ll continue to cover a spectrum of colors. And one color at a time, we will be featuring web design from around the world. If you have missed past articles in the series, you may want to catch up and read our articles on the colors Green and Blue. Today’s article will explore the use of the color yellow in Web design. Please remember to continue watching this space, as we take a closer look at other colors in upcoming months.
Color is everywhere! Although it wasn’t too long ago that we lived in the era of black and white television and film, color has always and will continue to play an important role in our lives. The color yellow is most commonly associated with our sun. It’s bright, striking and sometimes overpowering rays is a symbol of our earth’s humble beginning. With this article, we take a look at the impact the color yellow has made in our lives.
Some painters transform the sun into a yellow spot; others transform a yellow spot into the sun. - Pablo Picasso
Definition of Yellow
Yellow is the color evoked by light that stimulates both the L and M (long and medium wavelength) cone cells of the retina about equally, with no significant stimulation of the S (short-wavelength) cone cells. Light with a wavelength of 570–580 nm is yellow, as is light with a suitable mixture of somewhat longer and shorter wavelengths. Yellow's traditional RYB complementary color is purple, violet, or indigo, while its colorimetrically defined complementary color in both RGB and CMYK color spaces is blue.
Image credit: Wikimedia Commons
Why Choose Yellow?
Yellow is often represented as the color of sunshine, sunflowers, and all else related to the sun. It is a color associated with joy, happiness, intellect and boundless energy.
The color yellow gives one a warm and cosy effect. It also arouses cheerfulness, stimulates mental activity, and generates muscle energy. Yellow is also often associated with food. Pure yellow is very bright and often attracts one’s attention. This is probably one of the reasons why taxi cabs are often painted bright yellow. However, when over used, yellow can create a disturbing effect; in fact, those of you planning to paint your baby’s nursery room yellow because it’s a gender neutral color, think twice because babies cry more in yellow colored rooms.
Ever notice that most warning signs are often a combination of yellow against a black background? The yellow and black combination produces the best contrast compared to any other color. Thus, this combination is often used in warning or danger signs. In heraldry, yellow is the color symbolising honor and loyalty. Ironically, yellow is also a color associated with cowardice.
Often chosen to promote children’s products and leisure or entertainment items, yellow evokes a pleasant and cheery disposition in people. Because of yellow’s talent for attracting one’s attention, it is often used to highlight the important elements in your design. Commonly perceived by men as a light hearted and childish color, yellow is not a recommended color to use when trying to sell prestigious or luxurious products – which rational man would buy a bright yellow business suit or a yellow Mercedes?
Seen as spontaneous and sometimes over the top, avoid using yellow if your underlying subtext is to portray stability and safety.
Yellow is at its best when used in its purest form and at its brightest. Add too much white and it because pale and sickly. Muddy it too much with black and it becomes dingy and dirty-looking. As such, tints and shades of yellow are often visually unappealing because it loses its best quality; its innocence and cheerfulness. No matter, remember to use a dark color as a contrast to yellow especially since pale yellow tends to bleed into a white background.
The Benefits of Yellow
The color yellow can affects us mentally and physically which includes stimulating our mental and nervous system, activates our memory, and encourages communication. Golden yellow carries the promise of a positive future, and spreads its cheer. Especially since yellow shines its optimism, enlightenment, and happiness upon us.
Yellow stands out from other colors, and with the support of other lively colors, it can spark one’s creativity while invigorating one’s spirit. In fact, people who suffer from mild cases of color blindness can usually see the color yellow more easily than other colors.
Although yellow symbolizes wisdom and wealth, and is full of creative and intellectual energy, it can also create feelings of frustration and anger as well. People are more likely to lose their temper if they are in rooms with yellow colored walls. The color yellow also increases one’s metabolism. Being one of the most visible colors, it is attention grabbing and often used on traffic signs or advertisements to attract people’s attention.
As with any color, there are both positive and negative effects, but put some yellow into your life if you want a little clarity in your decision-making process, ‘burnout’ relief, sharper memory and better concentration skills. When you’re in a panic, exhausted, or depressed, and you’re in need of a pick me up, yellow’s your color.
The Effects of Yellow
Too much or too little of anything can have an adverse effect. Yellow is most stressful on the eye because of the high amount of light that is reflected off its color. The use of yellow as a background on paper or computer monitors can lead to strain and stress on the eye and in extreme cases, even vision loss. Too much yellow can cause the inability to focus or complete one task at a time as it can be too distracting. And the lack of yellow can give one the feeling of being isolated, resulting in low self esteem, insecurity and even depression. Also, not having a sufficient amount of yellow can result in a person becoming rigid, cunning, possessive and even overly defensive.
Different Types of Yellow in Web Design
Although yellow works well on its own (it is after all a primary color), it also works very well as a companion to other colors. Use bright yellow to create excitement if red or orange is too strong or too dark for you. Yellow is the right kind of perky!
Amber is a fossilized tree resin that has been appreciated for its color and natural beauty for centuries. Amber is also the name of an orange-yellow color. In fact, was named after this fossilized tree resin because it shares similar shades it. Shades of amber can range from orange to reddish-orange and even light yellow. This is why amber often refers to a series of orange shades.
Goldenrod is a color that resembles the goldenrod plant, hence its name Goldenrod Yellow.
Chartreuse (the web color) is a color halfway between yellow and green that was named because of its resemblance to the green color of a French liqueur called Green Chartreuse. The traditional color Chartreuse is a yellow color mixed with a small amount of green and named because of its resemblance to the yellow color of a French liqueur called Yellow Chartreuse. The web color chartreuse is precisely halfway between green and yellow; 50% green and 50% yellow. It is one of the tertiary colors of the HSV color wheel.
Golden yellow is the color halfway between amber and yellow. It is a color that is 87.5% yellow and 12.5% red.
Peach Yellow is a combination of the colors pink and yellow.
Using Yellow with Other Colors
Let’s take a look at how well yellow can cope when matched with other colors.
Yellow with Orange
Use lemon yellow with orange to portray a healthy, citrus, or summer theme. Very pale yellows also work as neutrals alongside dark or rich colors.
Yellow with Gray or Black
Use yellow to perk up a subdued cool palette of black and gray. Mix yellow with neutral gray and a dash of black for a high-tech look.
Yellow and Blue
Yellow and blue when matched together creates a high contrast, making it an eye-popping combination.
Yellow with Red
Try a hot, exciting mix of red and yellow.
Yellow and Olive Green and Brown
For an earthy palette, especially to create an autumn feel, mix yellow, olive green, and brown. Although pairing yellow with bright or light greens can be part of a natural, fruity color palette, be careful not to use colors that are too close in value or they will appear washed out.
Yellow with other Colors
The color palette as shown in the following website features shades of yellow mixed with shades of red, blue, green, brown, and other neutral colors. This succeeds in creating an earthly, sophisticated, yet fun, psychedelic look.
Showcase of Freelancers
These freelancers have integrated yellow into their sites to liven up their portfolios.
Showcase of Yellow in Web Design
These web designs have used different variations of yellow to attract their visitors.
Interesting Read about Colors
- Onextrapixel: 40+ Useful Color Tools, Color Palette, Color Scheme & Background Generators
- COLORlovers: 90+ Yellow Color Palettes
- Smashing Magazine: Color Theory for Designers, Part 1: The Meaning of Color
- Write Design Online: Elements of Art/Design Color
- Color Wheel Pro: A Great Guide on Color Meanings
Walking on Sunshine
Does the color yellow brighten up your day and help light up your life? What is your personal view of the color? Is it one of your favorite colors? Or have you seen any other websites with a yellow colored theme that is worth checking out? Please share your thoughts and comments with us.