Colour design: yellow
Tags: Design
Glorious golden sun. Sandy beaches stretching for miles. Dropping my McDonald's French fries into my lap. This is what comes to mind when I think of the colour yellow. And now, of course, it's Ethan Marcotte and Karen McGrane's Responsive Web Design site. Yes, this time I'm turning my attention to a more designery topic: RWD's fantastic colour scheme.
Skip to navigationRWD's Colour Scheme
As we all know, ‘Responsive Web Design’ refers to a number of things: the seminal article by Ethan Marcotte published in 2010, and the subsequent approach to web design that has revolutionised the way websites are built. But it's Ethan Marcotte's influential short book of the same name which is where yellow and RWD were first united.
This colour has been carried over into the Responsive Web Design site:
The slightly desaturated yellow-orange accent reinforces the hierarchy of the site beautifully. First, there's the line across the top of the site logo, which tells us that yellow-orange is an important brand colour. Next, the line under the currently selected main menu item informs us where we are on the site. The square episode number indicators clearly tell us that there are six episode summaries on this page. Finally, the symbol for the RSS/iTunes subscription links in the bottom right corner gives the colour a further utilitarian use. On the other hand, blue is clearly for the buttons.
Each of the two colours has its assigned role — yellow-orange (#FDC228) tells us where we are, and steel blue (#207D9C) tells us what we can do.
Skip to navigationMeanings and associations
Different cultures have different associations for each colour, and yellow is no exception. The following information was taken from Color Design Workbook by Adams & Morioka (2006, Rockport), among other sources.
Positive associations
Optimism, radiance, joy and idealism: As the colour of the sun, yellow definitely has a positive, energetic influence.
Intellect and wisdom: Some sources suggest that yellow stimulates memory and mental processes, and encourages communication, though I'm not sure if this stands up to scientific scrutiny.
Negative associations
Cowardice: In some Western cultures, yellow is the colour of cowardice.
Warning: Especially when mixed with black, yellow is often the colour of warning. I've read that governments often advise using yellow in warning signs because it is because it is always the first colour that the eye sees. Yellow and black warn you to mind your head, or inform you that there are toxic chemicals nearby, an area is under quarantine, or the site is under construction (remember that?). And don't forget warnings in nature: many venomous animals, such as bees, wasps, toads, and snakes are yellow. Coincidence? Pah!
Cultural associations
Buddhist cultures: Priests wear saffron-coloured robes.
Egypt, Burma: Signifies mourning.
India: Merchant and farmer castes.
Hindu cultures: Spring festival.
China: Ming and Qing dynasties.
Japan: Courage.
France: Traitors and criminals were once painted yellow.
USA: New York cabs and schools buses.
Nazi Germany: Jews wore yellow armbands.
Skip to navigationNames of yellow colours
Below is a selection from the list of CSS colour names on W3Schools, that are more or less yellowish. There are many light yellow tints, each mixed with different amounts of blue (moving towards yellow-green) and red (moving towards orange or brown at the darker end of the spectrum). Learning a few colour names has improved my appreciation of colours, and I'd recommend anyone (web designer or not) to learn a few. Of course, CSS isn't the only colour naming model out there, but it's a start:
CSS NameRGB Value
Yellow#FFFF00
Ivory#FFFFF0
LightYellow#FFFFE0
FloralWhite#FFFAF0
LemonChiffon#FFFACD
Cornsilk#FFF8DC
PapayaWhip#FFEFD5
BlanchedAlmond#FFEBCD
Bisque#FFE4C4
Moccasin#FFE4B5
Gold#FFD700
NavajoWhite#FFDEAD
OldLace#FDF5E6
LightGoldenRodYellow#FAFAD2
Linen#FAF0E6
AntiqueWhite#FAEBD7
Beige#F5F5DC
Wheat#F5DEB3
Khaki#F0E68C
PaleGoldenRod#EEE8AA
BurlyWood#DEB887
GoldenRod#DAA520
Tan#D2B48C
Peru#CD853F
DarkGoldenRod#B8860B
Building a colour scheme
Tools like Paletton are a fantastic way to try out different colour schemes. Here are some ideas about matching colours with yellow, based on using the colour wheel to pick colours.
Monochromatic: Using only one shade of yellow in a site is a great way to make an impact, especially if it's contrasted with black (see below). However, using a combination of tints and shades of yellow can be problematic because they're often difficult to distinguish.
Analogous: This means using yellow alongside its neighbours on the colour wheel, orange and green. These colours work quite well together, and can create a distinctly seasonal (spring or autumn) feel.
Triadic: Red and blue complete yellow's triad. These three colours are collectively known as the ‘artist's primaries’, because they're the primary colours that are used as the basis for mixing paint. As a colour scheme, yellow, blue and red isn't very sophisticated. It might work well on a site aimed at very young children, one that aims for a 1980s, retro feel, or one that evokes Mediterranean holidays.
Complementary: The complement of yellow on a CMY colour wheel is violet. Complementary colours can look good together, but the edge between them tends to ‘vibrate’ when they're put side by side. Yellow and violet are no exception. If they're used sparingly, though, they can make a huge impact.
Split complementary: This uses four different colours. The first is yellow, then we choose a colour nearby such as green. Then we go to the other side of the colour wheel, and choose two more neighbouring colours, in this case violet and purple/pink. The overall effect in this case is floral and feminine. Split complementary schemes can be quite sophisticated, but only if one colour dominates and the rest are used sparingly.
Skip to navigationLegibility
Pure yellow doesn't have a high value. The image below shows what happens to legibility when white and yellow are used together — thanks to the low contrast between them, it's almost impossible to read. Similarly, yellow with light green or light orange is a poor choice. On the other hand, the contrast with black or other dark colours is much higher, and the type becomes easier to read.
One problem I sometimes notice is when a site uses white text on top of a background image that contains equally light colours, such as yellow. Always check your final product for legibility!
As we saw at the beginning of the article, RWD just about get away with it in their ‘episode squares’. The darker yellow-orange has a sufficiently deep value that the contrast between the background and the text are within acceptable limits. Users with visual impairments might have problems, though.
Skip to navigationOther yellow websites
To finish, here are some successful uses of the colour yellow that I found in the field. All were yellow at the time of publication!
Creative Spark
This is the homepage of UK design company Creative Spark. The yellow, black and white colour scheme, along with the cartoons and case studies involving beer and bicycles, make a playfully professional impression. The image at the bottom left shows the studio's employees splattering each other with yellow powder. There's definitely trust there. I'm not entirely sure if the words ‘UX and content’ at the top would be readable by everyone, but I think this is a good example of how black text on a yellow background is a strong combination.
Mea Cuppa
This stylish, one-page website for Dutch cafe Mea Cuppa makes good use of colour in its photography, rather than its CSS. Images of pine furniture, the froth on a cappuccino, the off-white exterior of the café, and a fierce cheese salad sandwich all cohere to bring a distinctive, desaturated yellow colour scheme. Again, black and white make a bold impression, and the serif headings and sans serif body text give it a classy feel.
The Enterprise Foundation
Here's a website that revels in colour. The Enterprise Foundation's home page combines the subtractive primaries, cyan, magenta and yellow, with violet (yellow's complement) in a crazy helter-skelter of colours, shapes and text. This bold design suggests a youthful co-working space that nourishes creative thinking and bright ideas.
The Daily Commute
Norwegian online survey, The Daily Commute, uses a fun colour palette and witty animations to guide the visitor through a series of (otherwise dull) questions about travel habits. Once again, yellow, black and white are the colours of choice. This time, the gradient for the sky ranges from desaturated yellow for the skyline formed by the buildings, to bright yellow, to the darker yellow-orange of the upper atmosphere. This is an example of effective use of different tints, shades and hues of yellow.
Sullivan NYC
US design company Sullivan NYC also chose primary colours for their front page: yellow, red and blue, along with green. These colours, though, are used as accents with black being the dominant colour, giving the site a more mature feel than the Enterprise Foundation.
Skip to navigationConclusion
Yellow with black and white. Yellow with primaries. These are such strong palettes for the web that they crop up again and again. Yet none of the sites I've looked at are similar in any way, including RWD. The trick, I think, is to select hues and shades that make a site stand out and help it to own its colours. RWD has certainly owned its colour palette; I for one find it difficult to think of responsive web design without also thinking about the jacket of Ethan Marcotte's book and the logo of the RWD website.
Skip to navigation
Comments
comments powered by Disqus