Skip to main content

Food Colour Graph for Food Bloggers

Topics:

In a side project I have been working on a WordPress website for a health and food blogger. There is a huge amount of food themes available for WordPress. Although this may seem like a big advantage, this large choice of themes also gives me stress.

Another source of stress is me being picky about the choice of fonts and colours. Although I was given free reign, which I like, the responsibility to make the correct choices weighs heavily.

Choosing colours

How do you choose colours for a website? Often a client has a logo or house style, which makes the choice a little easier. Sometimes even there is no choice at all, but preconceived ideas and designs.

Header image for Food Colour Graph for Food BloggersColor circle by Ellywa at Dutch Wikipedia

Color circle by Ellywa at Dutch Wikipedia - downsized from 600 x 600 to 400 x 400

However, more often than not a client has not really given any serious thought to design elements. So, where to start when choosing colours?

In this case I came up with the idea to work with colours linked to different food items. So, I presented my client with an overview of colours that can be associated with different types of food, like mango, lime, salmon, green apple and the like. I created a simple graph to clearly present the colours and the food names linked to them. It includes their complementary colours* as well.

Complementary colours are pairs of colours which, when combined or mixed, cancel each other out (lose hue) by producing a greyscale colour like white or black. When placed next to each other, they create the strongest contrast for those two colours. Complementary colours may also be called "opposite colours". (Wikipedia:Complementary colours)

Food Colour Graph

To my delight my 'food colour graph' turned out to be a success: when I presented the graph, the client instantly chose three colours for me to work with.

Below you will find the colour graph I presented. It's free if you want it. If you're interested in the code for this graph, that's free too! Just keep reading.

Food Name | RGB Code:Complementary RGB Code:
Seaweed | #437C17#50177C
Lime | #41A317#7917A3
Green apple | #4CC417#8F17C4
Avocado | #B2C248#5848C2
Salad | #A1C935#5D35C9
Mint | #98FF98#FF98FF
Corn | #FFF380#808CFF
Peach | #FFE5B4#B4CEFF
Macaroni & Cheese | #F2BB66#669DF2
Ginger | #C9BE62#626DC9
Papaya | #E56717#1795E5
Pumpkin | #F87217#179DF8
Mango | #FF8040#40BFFF
Salmon | #F9966B#6BCEF9
Grapefruit | #DC381F#1FC3DC
Cranberry | #9F000F#009F90
Chestnut | #954535#358595
Pink Cupcake | #E45E9D#5EE4A5
Pink Lemonade | #E4287C#28E490
Plum | #B93B8F#3BB965

Foods and their associated colours in RGB format. Their complementary colours are shown in the left and right borders with their RGB values at the end of each row.

In all honesty, I didn't come up with the complementary colours by myself. There are many very handy and sometimes downright gorgeous websites for designers. I found a colour picker at WebFX.com with a nifty complementary colours generator.

I also found a gorgeous colour scheme generator, AI powered no less, at colormind.io that will definitely come in handy later when choosing a full colour palette to match the chosen colours.

Speaking of which: the colours that were chosen for the new health and food blog are mint   , corn    and salmon    and their complementary colours.

Code for the food colour graph 

I am of course sharing with you the corresponding code for this 'food colour graph'. This post is labeled as 'tutorial' after all.

Inline style sheet

Generally speaking we would put any new CSS code in the site's main style sheet. However, because this code will only be used by this particular post, I have put it in an inline style sheet in the post itself, so that it won't be loaded with pages that don't use it. I could also have put the code in a separate external style sheet, so that it would load from an external server. Of course, that would require one additional http request*.

Latency issues can occur when many users simultaneously request one or more files. Although this blog doesn't have that many visitors and the size of this external style sheet would be less than 1.800 bytes, it is usually sensible to consider page load times to avoid latency.

CSS and HTML code

This is the CSS code for the food colour graph. The code must be placed in between the <style> and </style> tags when used as an inline style sheet: 

/* CSS code for Food Colour Graph for Food Bloggers: */
.food_colour_graph {font-size: .9em; margin-top:20px; vertical-align: middle;}
.fcg_row {border-style: solid; border-width: 0 10px 0 30px; display: inline-block; max-width: 100%; width: calc(100% - 40px);}
.fcg_row_col1 {color: #000; padding: 4px 10px; float: left;}
.fcg_row_col2 {color: #1A1A1A; float: right; font-size: .9em; margin-right: 5px; padding: 4px 10px;}
@media screen and (max-width: 968px) { .food_colour_graph {font-size: .7em;} .fcg_row {border-width: 0 7px 0 20px;} }
/* Food Colours: */
.fcg_seaweed {background: #437C17; border-color: #50177C;}
.fcg_lime {background: #41A317; border-color: #7917A3;}
.fcg_greenapple {background: #4CC417; border-color: #8F17C4;}
.fcg_avocado {background: #B2C248; border-color: #5848C2;}
.fcg_salad {background: #A1C935; border-color: #5D35C9;}
.fcg_mint {background: #98FF98; border-color: #FF98FF;}
.fcg_corn {background: #FFF380; border-color: #808CFF;}
.fcg_peach {background: #FFE5B4; border-color: #B4CEFF;}
.fcg_macacheese {background: #F2BB66; border-color: #669DF2;}
.fcg_ginger {background: #C9BE62; border-color: #626DC9;}
.fcg_papaya {background: #E56717; border-color: #1795E5;}
.fcg_pumpkin {background: #F87217; border-color: #179DF8;}
.fcg_mango {background: #FF8040; border-color: #40BFFF;}
.fcg_salmon {background: #F9966B; border-color: #6BCEF9;}
.fcg_grapefruit {background: #DC381F; border-color: #1FC3DC;}
.fcg_cranberry {background: #9F000F; border-color: #009F90;}
.fcg_chestnut {background: #954535; border-color: #358595;}
.fcg_pcupcake {background: #E45E9D; border-color: #5EE4A5;}
.fcg_plemonade {background: #E4287C; border-color: #28E490;}
.fcg_plum {background: #B93B8F; border-color: #3BB965;}

And this is the corresponding HTML code: 

<!-- HTML code for Food Colour Graph for Food Bloggers: -->
<div class="food_colour_graph">
<div class="fcg_row fcg_seaweed"><span class="fcg_row_col1">Seaweed | #437C17</span><span class="fcg_row_col2">#50177C</span></div>
<div class="fcg_row fcg_lime"><span class="fcg_row_col1">Lime | #41A317</span><span class="fcg_row_col2">#7917A3</span></div>
<div class="fcg_row fcg_greenapple"><span class="fcg_row_col1">Green apple | #4CC417</span><span class="fcg_row_col2">#8F17C4</span></div>
<div class="fcg_row fcg_avocado"><span class="fcg_row_col1">Avocado | #B2C248</span><span class="fcg_row_col2">#5848C2</span></div>
<div class="fcg_row fcg_salad"><span class="fcg_row_col1">Salad | #A1C935</span><span class="fcg_row_col2">#5D35C9</span></div>
<div class="fcg_row fcg_mint"><span class="fcg_row_col1">Mint | #98FF98</span><span class="fcg_row_col2">#FF98FF</span></div>
<div class="fcg_row fcg_corn"><span class="fcg_row_col1">Corn | #FFF380</span><span class="fcg_row_col2">#808CFF</span></div>
<div class="fcg_row fcg_peach"><span class="fcg_row_col1">Peach | #FFE5B4</span><span class="fcg_row_col2">#B4CEFF</span></div>
<div class="fcg_row fcg_macacheese"><span class="fcg_row_col1">Macaroni & Cheese | #F2BB66</span><span class="fcg_row_col2">#669DF2</span></div>
<div class="fcg_row fcg_ginger"><span class="fcg_row_col1">Ginger | #C9BE62</span><span class="fcg_row_col2">#626DC9</span></div>
<div class="fcg_row fcg_papaya"><span class="fcg_row_col1">Papaya | #E56717</span><span class="fcg_row_col2">#1795E5</span></div>
<div class="fcg_row fcg_pumpkin"><span class="fcg_row_col1">Pumpkin | #F87217</span><span class="fcg_row_col2">#179DF8</span></div>
<div class="fcg_row fcg_mango"><span class="fcg_row_col1">Mango | #FF8040</span><span class="fcg_row_col2">#40BFFF</span></div>
<div class="fcg_row fcg_salmon"><span class="fcg_row_col1">Salmon | #F9966B</span><span class="fcg_row_col2">#6BCEF9</span></div>
<div class="fcg_row fcg_grapefruit"><span class="fcg_row_col1">Grapefruit | #DC381F</span><span class="fcg_row_col2">#1FC3DC</span></div>
<div class="fcg_row fcg_cranberry"><span class="fcg_row_col1">Cranberry | #9F000F</span><span class="fcg_row_col2">#009F90</span></div>
<div class="fcg_row fcg_chestnut"><span class="fcg_row_col1">Chestnut | #954535</span><span class="fcg_row_col2">#358595</span></div>
<div class="fcg_row fcg_pcupcake"><span class="fcg_row_col1">Pink Cupcake | #E45E9D</span><span class="fcg_row_col2">#5EE4A5</span></div>
<div class="fcg_row fcg_plemonade"><span class="fcg_row_col1">Pink Lemonade | #E4287C</span><span class="fcg_row_col2">#28E490</span></div>
<div class="fcg_row fcg_plum"><span class="fcg_row_col1">Plum | #B93B8F</span><span class="fcg_row_col2">#3BB965</span></div>
</div>

Usage and download

Please feel free to use this colour graph and its code for your own food blog or to present colours to a client.

If coding is not your thing, but colours are, you can either view a PDF version of the food colour graph online here or you can directly download the PDF version here.

Adding an attribution with a link to this article is appreciated, but not necessary. If you do, you can use this code: 

Source code: <a href="//ocor61.blogspot.com/2019/07/food-colour-graph-for-food-bloggers.html?src=attrib">Food Colour Graph for Food Bloggers</a> by Ocor61

Although I did some research, I may have missed some elementary foods and their associated colours. If so, please let me know in the comments below and I'll add them to the graph and the code with mention of your name.

Comments

Post a Comment

Popular posts from this blog

Band Back to Basic

Back to Basic is a band originally from Rotterdam, The Netherlands, who play groovy soulful rock-inspired music. They've been around since 1993, which is also when I first saw them play. The last time I saw them play was in 2008 at their fifteenth anniversary reunion, also in Rotterdam. Since then, it has been quiet around the band. Too quiet. Yesterday I sort of stumbled over them at a local festival in their original home town. And again, sparks were splashing. The band were obviously having fun and the music was still top notch. New album 'Not Over Yet' I was happy to learn they recently finished recording a new album, aptly titled 'Not Over Yet', which will be released on Tuesday, June 25th * . It can be heard live on Sunday, June 30 2019 at the Facet Jazz Festival Hillegersberg , where the band will be playing on Stage 1 at 3pm. 'Not Over Yet' is the title of the new album by fusion veterans Back to Basic. Album launch: June 25th 2019 * EDI...
2 comments
Read more

Tutorial: how to display icons for external links using CSS only

In this tutorial you will learn a neat trick that allows you to display an icon after each external link with CSS only. Use case In this blog every external link is followed by an icon that indicates that it is an external link . In WordPress this is often accomplished by installing a plugin. In Blogger or other platforms admins don't get spoiled with plugins so much as in WordPress. While getting spoiled with plugins sounds nice, it has some distinct disadvantages: you tend to just search for an appropriate plugin and not consider other possibilities that may be better or faster, the more plugins you install, the more maintenance you will need to do (install security updates and check if the plugin is still maintained and does not conflict with other plugins), the more plugins you install, the slower your website will eventually get, you make your website or blog dependent on code that you have no control over other than disabling it. Don't get me wrong: plugins are a...
Post a Comment
Read more

Blogger Tutorial: the best SEO title tag, Addendum

SEO and XML go hand in hand on the Blogger platform. So do XML and learning, for me at least. After my first post on Blogger and search engine optimization, Blogger Tutorial: the best SEO title tag , I wasn't quite satisfied with the results. On search results, label pages and archive pages, the title still showed ' O'Cor | O'Cor '. I realized that these have their own objects that could be used to display a relevant title. Now, I know that these kinds of pages are not indexed by search robots, so why bother? Well, first I like to challenge myself and to learn new things. Second, it felt like there were some loose ends to tie. I don't like loose ends. Third, I don't really need a reason: it's my personal blog and I can do as I like (and it feels GOOD!). So, I set about learning on how to optimize the title tag even more. After a sleep deprived night (almost), I think I came up with a satisfying result. If you wish to jump to the code and don't...
Post a Comment
Read more