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!
[...] Visit Source. [...]
One of the sites above links to malware:
http://www.colorblender.com/
Norton Internet Security detected it when I browse it using Mozilla Firefox, while Google Chrome warns that the page contains malware. Looks like a PDF vulnerability exploit.
Nice article!
I just have to disagree with this sentence: “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”.
Unless the user is a graphic designer like the people reading this article, it is not quite true. Not everyone is sensitive to good graphic design, some really ugly websites seam to work and have good traffic.
All in all, good article, and thanks for the ressources!
Hey if you just want to get a random 5 color palette quickly, try this http://dealfreezer.com/demo13.php
Great! I like that colour scheme Generator 2.0. Thank you for posting it!
The terms of the 10-year agreement give Microsoft access to Yahoo’s search technologies. Yahoo will receive a lucrative 88 percent of the search-generated ad revenue from its own sites for the first five years of the deal, much higher than is standard in the industry.
After the takeover bid failed, the companies renewed talks about a partnership last summer. The talks included discussion of a large upfront payment from Microsoft.
[...] Color Scheming for Designers | styl.eti.mestyl.eti.me [...]
[...] Color Scheming for Designers | styl.eti.me. [...]
My antivrus application denies to open COLORBLENDER – it includes an trojan…
hmm sometimes happens that a site gets flagged as malware when its not but I'll delink it for now, Thanks for the headsup!
Hey Roger, thanks for sharing the COLOURlove
+D
Great lesson. Thanks!
Hi, I also have developed simple site for color combination. Try http://colorbe.com . The Color combination can be implemented on several web. Thanks
Interesting post. Glad to know that I've used a couple of these myself (Colour Lovers & Colour scheme Generator 2). Thanks
[...] Color Scheming for Designers [...]
Thanks for the article. But please… it's not “MAC”, that's “Media Access Controller.” It's “Mac”, or more precisely in this context, “Mac OS X.”
Also, it's not “BETA”, just “beta.”
[...] Color Scheming for Designers [...]
[...] Color Scheming for Designers | styl.eti.me [...]
thanks fot this info.
You are very right in saying that a color scheme is helpful when handy. You will save precious time in searching and therefore have more time in other ways.