Colour In Web Design

When we open a page, colour is the first thing that we see. Colour can evoke a memory, create a mood, grab attention, uplift, scare, excite or soothe us.

So, it is vital when we are designing a website to carefully consider the colour scheme to reflect exactly what you want to portray. In this post as an experienced colour consultant I would like to  share with you how I go about beginning a new colour scheme for a website or blog. 

HTML Colour Codes

Colour design is a creative process so it is always best to have an open mind and a blank page of white. Begin by looking at websites and designs or logo's and brand marketing on sites such Vanderley or Design Inspiration.  This will create ideas and highlight what looks good, what attracts attention, what stands out and also enable you to quickly see what you do and don’t like.

Search out websites that showcase the best designs from the previous year or current trends in design. Think about what works in your view?   Once you have an idea of what you like its time to consider exactly what your target market is going to be.

Who is going to read your site? Are they conservative, radical, traditional, cutting edge or fun?

Also think about the style you are after, is it futuristic, eclectic, technical, eco-friendly, funky or professional? Is it a personal blog or an e-commerce site? Are you after a funky, unique, fresh, vibrant,  dominant,  sleek or soft muted design?  There is a lot to consider but once accomplished it is time to have fun with colour, and the colour wheel.

The Colour Wheel 

The secret in designing any colour scheme is to choose an image from your site and pick out a colour from the image. Then use the colour wheel to choose 3-4 colours based on your first choice. By using colour schemes directly from the colour wheel you can be certain the colour palette will work. Consider; 

Monochromatic - all the same colour in different tones, 
Complementary - opposite each other on the colour wheel.

Analogous  -  next to each other on the colour wheel

Triadic -  evenly spaced around the colour wheel.

Keep it simple and apply a golden design rule of 60 - 30 - 10

Main colour  - 60%  

Contrast colour - 30%

Accent colours - 10%.

There are many web based colour tools that you can use to experiment and trial your colour choices such as Colour Scheme Designer & Colour Schemer Studio 2 Join me in my next post on 'Engaging readership through sound colour choices.'  Diyu 

Attribution Non-Commercial No Derivatives

(With the exception of the Avatar and colour code Images)

© The Avatar image is copyright to Ramneek Narang All Rights Reserved 2013
Many thanks to Ramneek Narang, HTML colour codes and Web Designer Depot for the images on this post.

New Design Look

In refining my site I first considered the visual appeal of the overall design and then researched colour trends in web design and logos for inspiration to confirm my desire for a simpler, cleaner website style. I changed the bright colour of the background to a textured neutral grey scale to highlight accents of magenta and orange. I switched the theme to a magazine style so that a snapshot of recent posts gave a glimpse of the content and coloured images immediately on opening the site. In choosing my design the main consideration was to highlight the written content and for it to have a clean, clear unadorned layout with ease of navigation yet remained colourful to reflect the content.

Tickled Pink now appears as a bright colourful site with a larger pink title, header bar and contrasting description typography with an added logo image. There is a contrasting pink date ribbon and post title in the same font as the header bar on a clean white background.  The large pink icons were added to the bottom of each page in line with current trends for larger size social media buttons.

Updates were made to the link list, Blogroll, reading list, popular posts, and other widgets.  My avatar was moved to the bottom of each post as a signoff and is also at the top of the hidden widget sidebar and in two relevant posts on my personal writing.

My choice of platform and theme restricted some key aspects of my site due to the header, widget and footer areas being disabled from alteration with CSS and html. I took this into consideration in my choice and decided that the 'look' I was after outweighed the restrictions and I have successfully adapted the site to cover all aspects I wished to feature. Lastly, I changed the Tickled Pink title so my logo is closer to the typography and I changed the description to # Colour Design. Feel free to email me or follow me on twitter or Pinterest. Until my next post Cheers Diyu

Attribution Non-Commercial No Derivatives

(With the exception of the Avatar Image)

© The Avatar image is copyright to Ramneek Narang All Rights Reserved 2013

Many thanks to Ramneek Narang and  Grant Williams Stevens for the images on this post.