styl.eti.me

Before I start working on a website I will always ensure that I have a color scheme to work with. This is important for not only aesthetic reasons but also for creating a wonderful sense of consistency and familiarity to the website. At times clients will already have a particular color scheme in mind (say, two or three colors) or they will at least have one color they want the site to work around. If they aren’t sure then I will see what their graphical content is (logo, photos, icons, etc) for their website and see if I can find something to work with from there.

The vast series of tubes that is called the internet has some wonderful color resources for ensuring your design is pixel perfect.

Whether you already have a color scheme in mind, or are looking for inspiration and guidance, here are some great colour scheme generators:

Color Blender ( I delinked this for the moment as it seems to be giving a malware warning!)

Using a color slider, or directly inputting the RGB value of your color, it will generate a color scheme. One great feature is you can download the scheme for photoshop, illustrator, or even email it to yourself.

Color Schemer Online v2

Scheme is generated based on direct entry of RGB or HEX value also has a desktop version for Windows or MAC

Color Scheme Generator 2

Enter a single value, after which a suggested color scheme is displayed. The scheme can be varied by Pastel, Dark/Light, Contrast and Pale, One interesting feature (although I am not sure how useful it might be to everyone though) is that you can look at your color scheme through various vision impairment conditions (ie. color blindness, etc.)

There are also websites that showcase user generated color schemes, much like gallery websites.

Colour Lovers

This site ROCKS!!!! While I still suggest you give each of the sites listed here a shot, if you had to stick with just one it would be this one. There are forums and groups for the social side in you, as well as palettes, patterns and individual color pages; all fully searchable, filterable and downloadable (ASE, PS, AI, GIMP, HTML and ZIP formats), there is a blog with TONS of great and useful information, as well as a TRENDS section to help keep you up to date on the latest color trends in both the magazine and web world.

Kuler

This is an adobe air based website while the approach/concept is interesting I would have to say it pales in comparison to Colour Lovers…..I am trying my best to not let my bias show through, but seriously, Colour Lovers is an excellent website.

Verlee’s Daily Color Scheme

A nice looking website that has been in BETA for quite some time – no updates since 2006/09/20 – and the main domain still says “Coming Soon”;. The site is a color scheme gallery site, and although it has been inactive there are still some very nice and inspiring contributions.

Color Combos

A color scheme / palette gallery website, to be able to extract the color from an image there are a few ways you can achieve this, you can either use a desktop application such as Photoshop or GIMP, or you can use online resources that allow you to link to your reference image.

Color Palette Generator

Enter the url of an image and it will generate a color palette based on that image

If you don’t have a particular image to work from but your client has suggested a few sites they like, or if you know of a website that serves as a great inspiration, there are a few ways you can use to find out what colors are being utilized.

If you use Firefox you can use the Web Developer plugin, it has a feature that allows you to display the color information for the website you are looking at.

There are also Website Galleries that will either allow you to filter the showcased websites by color, or even indicate the specific colors that are utilized within the showcased site.

Website Galleries that offer colour information:

Design Meltdown

Web Creme

Website Galleries that offer specific color information for each showcased website:

Inspiration Folder

Screen-a-licious

Ok, a few more for the road:

CSS Color Chart

Displays neutral and general purpose colors along with the respective HEX value of each color.

Colors on the Web

This is a very diverse website with a wide variety of color information and tools information on color theory and physics a Color Contrast Analyzer for Accessibility (it looks at background color against text colour) random three color color scheme generator. It also has a two column layout showing both the colors in the scheme as well as how text will look against it.

Color Wizard – color matching application in which you enter your own single color value, or have the application pick it randomly for you. Once the value is entered you are then shown Hue Variation, Saturation Variation, Tint & Shade Variation, as well as a suggested color scheme.Information on combining colors, color contrast, and using colors

Color Schemer -similar to a CSS website gallery, but for color schemes submitted by users.

To me color is the most important aspect of a beautiful website, don’t get me wrong layout, navigation and typography are also important but if a website’s colors are off, ugly and unpleasant to the eye then a user is going to hit the BACK button as quick as they can.

I hope the above resources are of some value to you.

All the best for 2009

This post was actually written by ‘Mark’ but I have totally lost the author details and Marks details, so Mark if you’re out there pls leave your details in the comments so I can update the post, Thanks!