Color In Design: Yellow

Last week we took a look at the warm and vibrant orange in design. Today we’re staying on the same side of the color wheel with the color yellow. Just like orange and red, yellow is a warm color. It has connotations of nature, sunshine and spring and is generally considered to be a happy and hopeful color. Having said that, it can be a difficult color to work with and does not seem to be as popular in web design as the other colors we’ve looked at.

Yellow is a high visibility color, hence its use in health and safety equipment and hazard signs. This high visibility is obviously eye-catching, but possibly too eye-catching on screen. Yellow sitting on a white backround is extremely hard on the eye. As mentioned yellow has many positive connotations, but it does also have associations with cowardice and deceit, “yellow-bellied” and “yellow journalism”.

Using Yellow

There are several shades of yellow, ranging from cream to lemon to golden. Yellow works extremely well as a companion to darker colors. It can brighten up a dark design enormously and can have a similar effect to red and orange in terms of catching the eye without being as bold. Yellow and blue are a popular combination, the yellow perking up more subdued blues and creating high contrast. Purple is the complementary color to yellow and it is also a high contrast combination. For more earthy color schemes, mix yellow with brown and moss and olive green. Combined with light green and orange, yellow creates a citrus or fruity palette. Black and yellow can be combined to create an industrial look.

Yellow in logo design

Here’s a few internationally recognized logo designs featuring yellow:

image image image

image image image

Yellow In Web Design

Below you’ll find a selection of web site using yellow either as a main background color or to highlight particular areas of the site.

Gareth Dickey

image

I-amonline.com

I Am Associates

Creative Spark

Creative Spark

Helveticons

image

4-5 Lochside Avenue

image

Strange Native

image

Agent 89

image

Twist Systems

image

Ward Design

image

Design Charts

image
What do you think of the color yellow in design? Is it a color you like or avoid? Have you seen any well designed yellow sites that you really like?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.wedeking.org bradical1379

    I always think of http://www.kiewit.com when I think of yellow.

  • Squiggly

    I’m not fan of yellow. Very hard to carry off effectively, but these examples are having reconsider. Thanks great info.

  • Zoe Feast

    Yellow is a very hard color to work with, it can be brash and unforgiving but it certainly has it’s time and place.

    My most prolific use of yellow was on a complete branding project for a Mexican restaurant where it succeeded it creating a huge pop. Check it out here. By teaming it with red the end result was a sunny high energy feel. Color teaming is definitely the secret of getting the full potential from yellow.

  • Niubi

    Some really nice designs here. I shy away from the brightness of yellow in my own creative designs, since it can be rather offputting – I think that more muted colors are a better way of going about it. Having said that, some of the designs shown here are really making me reconsider this. Certainly, yellow can make a design more vibrant – just check out DubLi’s logo for an example!

  • http://brianswebdesign.com skunkbad

    Yellow is easy to overdo. I think you’ve got to be careful when implementing yellow into any design.

  • joybells

    In doing research on designing in yellow a couple years back, I could not find much. Its interesting to see what has to be said about the color yellow in web design. I find that it is hard to design in yellow alone. I notice several of the logo’s use yellow and red combinations, but most of the sites use black and yellow. Preen.com is another site that uses yellow in conjunction with a second color – they have a green logo. You can see their product packaging is yellow. This site is more of a mix between yellow and green.

    I think the effect of a color can never be taken in isolation, you have to consider the colors it is playing with or against, any textures in the page, and the size and form of the colored objects: this affects the weight of the color on the page.