Choosing colour ideas for websites can be overwhelming.

No-one wants to get it wrong!

Many people shrink from making bold colour decisions because they need inspiration they can trust. They end up with a bland looking website because they don’t feel confident in themselves to choose strong and effective colour combinations.

Probably all you will need however, is a little confidence, and some great ideas to inspire you.

I have a secret stash of bookmarked websites that inspire me with colour ideas for my website. Below I have shared a few of my favourites and I hope you find them useful.

Colour Lovers

The palettes on the Colour Lovers website are chosen by users and consist of 5 colour hues or in some cases shades of a hue. By joining the website and becoming a user, you are given the option to use their color palette maker to create and share your own favorite color combinations.

I like to browse this site when I need inspiration because of the strong colours that people choose. Most websites pages are going to be pastel through to white, because it is easiest to read. The website frame however does not have to be pale or dark – it can be strong and bright – or subtle and sunny. These colour choices can enhance your brand’s message or make a new statement all of their own.

When you are dependent on another person to make something you like, remember that the more open you are about what you want, the less chance there is that the designer will get it all wrong.

It is far easier for a webdesigner to create your theme, when they have a good idea of what colours a client likes and wants to use.cotton_candyGiant_Goldfish

I loved these 2 palettes I discovered browsing the website while  writing this. Blue and orange combinations really appeal to me.
Color by COLOURlovers

ColourZilla Colour Picker

Browser Addon For Firefox & Chrome.
With ColorZilla you can get a color reading from any point in your browser, adjust this color and paste it into another program such as notepad. You can also analyze a web page and inspect its colour palette. This makes it an ideal tool for “collecting” ideas for website colours.

Install the add on to your web browser (sorry, only works if you browse the Internet using FireFox or chrome). When you see a website with a colour scheme you like, the ColorZilla tool helps you to discover and note the colour names (which are numerical, or hex codes) that your designer needs to utilize these colours.

The next three websites are not just about colour but have very useful image enhancing ideas!

Colour Zilla’s Gradient CSS Generator

Flat colour is the norm, but colour gradients lend depth and variation to websites and gradients are becoming well supported now in most browsers, meaning that most people can see them now. This is an advanced tool, but it is so useful, it seemed a shame to leave it off the list.

Ideas For Patterns & Backgrounds

flower backgroundAnother colour variation is to use a patterned background either as it is or overlaid with colour. This website has a select range of  Lined, Dotted, Squares, Classic, Dirty, Funky and Real patterned designs you can download that are fantastic for backgrounds.

Backgrounds can show behind the website frame, or under text if used in sidebars.


Making A Favicon

Small icons called favicon are often used to distinguish and brand a website. If you look in the web address bar while reading this, you will see my url in text and on the left side an image of a golden key. I chose a key because I believe a website is like a key to people being able to get in contact with you.

The website favicon is also on the tab if you use tabbed browsing, and helps distinguish your website from any other website pages you may have opened. This website allows you to make a favicon from an image, and it also makes an animated favicon. Included in the download when you finish is a small text file that instructs you in how to add it to your website.

A favicon needs to have an .ico extension rather than a .jpeg or other image extension. These images are very small, so you need a clear picture to start with that holds its meaning when it is reduced to 16×16 pixels wide. Just another thing to think about!  I started with a picture this size, knowing it would not be clear, but just to show you what happens.


Tagged with:

Filed under: Website Ideas