{"id":387,"date":"2015-05-29T16:37:48","date_gmt":"2015-05-29T15:37:48","guid":{"rendered":"http:\/\/www.websites4christians.com\/our-blog\/?p=387"},"modified":"2015-05-25T11:06:03","modified_gmt":"2015-05-25T10:06:03","slug":"4-steps-to-colour-your-website","status":"publish","type":"post","link":"https:\/\/websites4christians.com\/our-blog\/4-steps-to-colour-your-website.html","title":{"rendered":"4 steps to colour your website!"},"content":{"rendered":"

Colour and your website<\/strong><\/p>\n

Think about colour! \u00a0Everywhere in life you’re bombarded with colour. \u00a0Colour shouldn’t just be restricted to what you can see but used to really bring your website to life. \u00a0The way you use colour is important. \u00a0So pick picking a great colour scheme is something to put some effort into. \u00a0This post explains how to pick an effective colour scheme.<\/p>\n

Colour schemes<\/strong><\/p>\n

A colour scheme is a series of complementary colours that you will use in your site.\u00a0 So rather than have everyone design their own page with the colours that they like, you pick a set of colours for everyone who updates the site to use.\u00a0 This includes finding photos that have those colours in them!<\/p>\n

When thinking about a colour scheme for your site a good place to start is with your logo.\u00a0 It\u2019s likely that your logo will appear on every page so the colour scheme will need to at least match that of the logo.<\/p>\n

Picking your colours<\/strong><\/p>\n

A website should be filled with colours that are sympathetic with each other.\u00a0 This might sound complicated but don’t worry you don\u2019t need to be a trained designer to work out what colours to use.\u00a0 Instead you can use one of the many colour wheel sites on the web.\u00a0 For example:<\/p>\n

http:\/\/colorschemedesigner.com\/csd-3.5\/<\/a><\/p>\n

There are lots of other sites but I\u2019d recommend this one.<\/p>\n

The site works on the basis of a colour wheel which and allows you to put in one colour and get a colour palette (group of colours) back that are all in sympathy with each other.\u00a0 This is achieved by taking colours that are close to each other in the colour wheel \u2013 to the left and the right of your main colour or that are directly opposite the colour in the colour wheel.\u00a0 For example our logo looks like this:<\/p>\n

\"logo\"<\/a><\/p>\n

You can see that the core colour is blue.\u00a0 It is not just any blue but actually it is a solid blue.\u00a0 The html colour is #2175a4.\u00a0 You can find this colour by using a drawing program and using the colour picker tool.\u00a0 For example if you are using windows open up Paint.\u00a0 Next open up your logo\/image.\u00a0 Now click on the dropper tool and hover over the colour you want to use and click on it:<\/p>\n

\"screenShot1\"<\/p>\n

Colour 1 (see arrow) changes to match that colour.\u00a0 Next click on the edit colours and you\u2019ll find the Red, Green and Blue colours ( in this case 34,117, 164) which you can convert using a website like https:\/\/www.easycalculation.com\/colorconverter\/rgb-coder.php\u00a0to an Html colour.<\/p>\n

\"screenShot2\"<\/p>\n

Now you have your core colour return to the colour wheel site and put that html colour in as the main colour.\u00a0 You\u2019ll now be given a set of colours that match and you have your basic colour scheme.\u00a0 I generated the scheme shown using our website logo colour and the analogic option.<\/p>\n

 <\/p>\n

\"screenShot3\"
\nIf this was your site then this would be the colour palette for it.\u00a0 Our site does use some of these colours but we use other colours too.\u00a0 If you\u2019d like to know why then please give us a call.<\/p>\n

Four easy steps to a colour schem<\/strong>e<\/strong><\/p>\n

Although this might seem complicated at first it is actually only for steps.\u00a0\u00a0 These are:<\/p>\n

    \n
  1. Get your core colour from your logo.<\/li>\n
  2. Next put it into a colour wheel site.<\/li>\n
  3. Pick an option that generates a set of colours you like.<\/li>\n
  4. Grab and publish the colour palette.<\/li>\n<\/ol>\n

    It\u2019s really easy and pretty straightforward to build a site colour scheme.<\/p>\n

    Once you have the scheme add it to the site style guide and make sure you give it to anyone who is producing content for the site.\u00a0 If you do this you\u2019ll find that you build a Website that remains consistent in look and is pleasant for your visitors to look at.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Colour and your website Think about colour! \u00a0Everywhere in life you’re bombarded with colour. \u00a0Colour shouldn’t just be restricted to what you can see but used to really bring your website to life. \u00a0The way you use colour is important. \u00a0So pick picking a great colour scheme is something to put some effort into. \u00a0This […]<\/p>\n","protected":false},"author":1,"featured_media":390,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[21],"tags":[13,34,31,37,35,36],"_links":{"self":[{"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/posts\/387"}],"collection":[{"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/comments?post=387"}],"version-history":[{"count":2,"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/posts\/387\/revisions"}],"predecessor-version":[{"id":393,"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/posts\/387\/revisions\/393"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/media\/390"}],"wp:attachment":[{"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/media?parent=387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/categories?post=387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/websites4christians.com\/our-blog\/wp-json\/wp\/v2\/tags?post=387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}