There are many different building blocks to designing and building a web site. Content/product has always got to be at the forefront of your mind in the initial stages of planning, followed by layout and then comes the styling… this is where the difference between good design and bad is determined. For the most part it is straightforward, but coming up with a harmonious color scheme is tricky. We have to look at many aspects of the website we design to achieve this, the product, the company/shop, the content, target readers…everything.
In this article I hope to make this easier for you.
I don’t pretend I have a perfect color scheme for this site, all I use is three main basic colors. The reason behind this is that I designed the logo first and the colors followed. I was happy with the sites results,it does what I want it to do: a minimal approach with focus on content, and colors used to highlight certain aspects. Over elaborate doesn’t always work.
First of all list all aspects that you know of of the new website that you can think of (I always put the logo at the top of list), extract as many colors as you can in your image editor or color picker. Lay them all out in a single image and play about them. If your lucky and you find a scheme you like test it first in all the main browsers (colors can be slightly effected in different browsers). If you are unsure then we need to find a different way of doing this…
…below are a list of my Top 10 Resources To The Perfect Color Scheme for Web Designers.
Website: Color Lovers
You can browse, comment, submit, and rate other designers color schemes on COLOURlovers, and take inspiration and ideas from them. You can join this online comunity by simply registering.
This is by far and away my favourite, and it also a great visually looking site as well. Worth a look.
What they say: “COLOURlovers™ is a resource that monitors and influences color trends. COLOURlovers gives the people who use color – whether for ad campaigns, product design, or in architectural specification – a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews.
Website: http://kuler.adobe.com/
Browse through all of these wonderful color schemes, rate them, leave a comment, you can even download them to use with Adobe Creative Suite. For the true pro.Great use of colors in the web design.
Website: beta.dailycolorscheme.com/
In the title it says daily, not strictly true. Hopefully the authors will start updating soon, because this could be a great site. Currently you can browse through all the color schemes taken from various sites from around the web. You can also download the schemes in every format you could possibly use.
Website: http://www.colorschemer.com/
I love this site not only does it offer a great user submitted color gallery, it offers great software like: ColorSchemer Studio (for Windows and Mac), ColorSchemer ColorPix (Windows) and ColorSchemer Galleria (Mac). Very useful.
Website: Unsafe Colormatch
Specify a base color in decimal (R,G,B) or #hex, choose the target for which you want to set a new color. And then you have examples of how your links and different colors will look on your site. Simple, but useful.
This site might be a little bit dated, but the information and help is excellent. Not so much inspiration, more the color theory. Features include: Web-Smart Colors, Grayscale, 216 color Browser-Safe palettes. As well as a chart defining all names of colors. Useful information.
“1 in 12 people have some sort of color deficiency. When you’re designing for the web, this means that 1 in 12 people might not be able to see your site. That’s alot of people. This tool helps you simulate the appearance of our site’s colors for people with different color visions. Select text and background colors from the palette below, then choose a color vision mode.”
This site offers very important information regarding color blindness, its best to check your color schemes before publishing.
I like this site, I have used it a couple of times to extract a scheme from an image. Its simple you upload an image and it generates a color scheme for you. Handy.
Pick a color value format, input two valid CSS color values in the format you chose, and pick the number of midpoints you’d like to see. The palette will show the colors you input as well as the requested number of midpoint colors, and the values of those colors.
If you’d like to have the Color Blender for offline use, just view source and save to your hard drive.
This utility will help you select a matching 6-color palette for your website, define a single color that you like, matching colors will be calculated, and then click a color in the palette to promote it to the primary color.
Of course the amount of color generators out there run into the hundreds, I’m not going to list them here. The aim of this article was to give designers an easier way to find the perfect color scheme, maybe inspire. Hope it helps.
