Food Colour Graph for Food Bloggers

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.

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.