Divi Colour Palette

When you are editing a website, particularly when carrying out formatting it is useful to have a colour palette handy so you can apply the colours used in your website. 

If you have a Divi based website it is possible to set these up so that they are available whenever you want to do some editing. 

Home-Start Colours

In or around 2007 Home-Start had a very comprehensive guide for styles for websites and printed materials. It has changed over the years, but some of the colours are still commonly in use. 

I will create the palette below with the hexadecimal RGB values and also show you how to add them to the website palette built into Divi. 

Please note the guidance at the bottom of the image. The ultimate source for guidance on Home-Start branding is from Home-Start UK. Not from me. They will frequently change their guidance for branding. If in any doubt contact your sources at Home-Start UK.

The values that start with the hash (#) symbol are hexadecimal numbers. They are in three groups of 2 numbers representing Red, Green and Blue values. There are many ways of representing colours, in the web world it is usually done with hex values unless you also with to indicate transparency of the colour. RBD Decimal, CYMK and other forms are also in use but beyond the scope of this article. 

Log into your Divi site and look for the  Divi in the menu on the left and choose Theme Options. You will see a group of coloured dots.

Now a word of caution.  If your site has other colours in here (these are the default colours) do not make any changes. If you do they may alter the colours used on your site.  In the image below I have clicked on the red blob of colour and a colour palette has appeared below. It shows the hex value for the red colour: #e02b20.  (note the 0 is a zero). 

I am going to sequentially click through the colours from red to purple in the selection above and change the numerical values to the six colours I have selected from the Home-Start palette. All I need to do is paste in the new value and then move to the next colour. 

The values you need are:

  • #e05206 for orange
  • #a21a7e for raspberry
  • #4f2e7f for grape
  • #d52b1e for red
  • #efab00 for gold
  • #e36eb2 for pink. 

Of course you can substitute your own set of colours here if you wish.

Here is my new palette. 

The last step is to scroll down to the bottom of the page and then Save Changes. 

If you now go anywhere in your website and start editing within the Divi Framework and go into an element and start to style it, you have the colour palette to hand, so it is just a matter on clicking on the colours to apply the scheme. 

For other users such as Child Contact Centres, you can do something similar by capturing the colours used in your website and building your own palette.