Colour design: yellow

My selfie

James Turner,

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 navigation

RWD'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.

The yellow jacket of Responsive Web Design, by Ethan Marcotte.
Figure 1: The yellow of Ethan Marcotte's ‘Responsive Web Design’ is carried through to the RWD site.

This colour has been carried over into the Responsive Web Design site:

On RWD's podcast episodes page, six podcast summaries are arranged in a 3 by 2 grid. The design of each summary is simple, with black-on-white text, but accented with a white-on-yellow square giving the episode number.
Figure 2: It seems strange that a design approach should have a corporate colour, but hey, it's 2015, right?

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.

Yellow-orange (#FDC228) and steel blue (#207D9C) make up RWD's colour scheme.
Figure 3: Yellow-orange for orientation, steel blue for action.

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 navigation

Meanings 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 navigation

Names 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

Skip to navigation

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.

Three squares, each with successively lighter tints of yellow.
Figure 4: Yellow tints can be difficult for the eye 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.

Squares and circles with different tints and shades of three analogous colours: yellow, yellow-orange, and yellow-green.
Figure 5: An analogous colour scheme with yellow can have a natural, seasonal 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.

Squares and circles with different tints and shades, this time using yellow, red and blue.
Figure 6: Children's playground? 1980s fancy dress party? Or poster for an Almodóvar film?

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.

Square and circles again, this time with tints and shades of yellow and purple.
Figure 7: Matching yellow and violet can make a big impression, but notice how they seem to vibrate when they meet.

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.

More circles and squares, tints and shades. This time there are four colours: yellow, yellow-green, red-purple and purple.
Figure 8: A split complementary scheme with yellow is likely to look floral and feminine.
Skip to navigation

Legibility

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.

A patchwork of 16 squares, each with the word 'legible' at the centre, with different combinations of background and text colour, all including yellow.
Figure 9: It's important to match colours with a high contrast.

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!

A glorious, golden image of a New York skyline at sunset. Unfortunately, the text over the top is white. Good luck reading that.
Figure 10: Oops! Looks like the designer of this site forgot to make that one last, all-important quality check.

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 navigation

Other 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

Yellow is used along side cartoons and bold, black text to create a playful look.
Figure 11: Yellow, white and black are a bold combination.

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 website's landing page takes its colour cues from unvarnished wooden tabletops, the froth on a capuccino, and Edam cheese.
Figure 12: The colour of the furnishings and food clearly provide the inspiration for this café's website.

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

Wow! Yellow, magenta, cyan and violet mixed with triangles and trapezoids. There's barely a single line that's at a right angle.
Figure 13: My goodness! Is this a website for a co-working space or a kindergarten?

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

The screen is split into two: the top half is an animated train whizzing past a city under a yellow sky in the background. The bottom half is the boring text.
Figure 14: I'd ride this train.

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

A black background and white text dominate this professional site, but bright yellow, red, blue and green accents suggest a design firm that doesn't shy away from bold choices.
Figure 15: The dominant black background and white text suggest professionalism, but the colourful accents indicate the courage to make bold choices.

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 navigation

Conclusion

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