WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: DGEC on January 24, 2007, 10:22:49 PM

Title: How to create a color/colour scheme
Post by: DGEC on January 24, 2007, 10:22:49 PM
What's the biggest problem (other than layout) that web builders typically agonize over?

A colour palette, of course. "I'm a programmer Jim, not a designer!" (Americans, please excuse my Canadian/English spelling. I have to spell it for y'all your way all day, so  :-P  :wink:)

And of course, typically it still doesn't look so great when it's done. Just like, I'm afraid to say, some of the palettes of our WB templates.

So, in the hopes of increasing the "colour-sensititvity" of the community, some information, and then I present a few culled links from my browsing!  Please contribute your own ideas as well (just check for duplicates first)

Oh, before I get to that.... template authors!! 

Please consider releasing several various colour variations of your templates, especially the graphic components.  There are some great graphics with your themes, but just changing the element colours would leave the graphics out of place, and others might not be able to accurately recreate your images... thus degrading your theme's "brand" if you will.
If you decide to release the PNG/PSD/etc and not just the gif/jpg, that would be great for customizing.  Remember that you should use lots of layers so it can be modified easier in the future too!

Anyway, on to some theory and/or discusion by those more learned, as well as some tools:

One idea is to
1) write down a short, emotional or evocative phrase that will describe your site and its contents. Just a couple words even: what you want your visitors to think as their first impression.

2) There's lots of colour theory about the emotional connotations of colours and what different colours suggest to people (look that up yourself, I've lost my links). You can choose one or two and jump to 4) or,

3) Look for photos that contain the subject/emotion/colour you are going for and pick out a colour that reinforces the emotion for the main colour

4) Generate a palette keyed off the main colour. Either use a tool, or pick out a bunch of colours and start eliminating ones. Tweak.

Another tool mentioned in comments on the link above is your images editor itself (if you're using photos).  Some suggest pixelating the main image gradually to help see what the dominant colours are, if its hard to determine, and potentially using that as one of the key colours.  Or instead use an accent colours in the photo, to more subtly tie the colours together.

One suggestion if you are doing it for someone else: go to their place and just look around. See what colours they like. Start with their logo's palette.  See what kind of paintings they like: pastel, bold, dramatic, etc.

Also, note that the tools below are JUST TOOLS to suggest colours that may fit in with your site, as the theory and discussions will tell you. I used one of them for a site I was working on... as a start. After that, I still had to tweak it until it looked right, and also was good on all the monitors I had access to (don't forget that LCD & CRTs look radically different, and various CRTs will look different again... and users can adjust the settings too, don't forget. 
Just because the colours contrast nicely doesn't mean text will be readable on them either!

(Secondary rant: Don't Use Font Pixel Sizes!! Especially in templates you're offering to the public. IE can't resize text if you do that! If you must specify a size make it relative percents or 'em's if you are getting really fancy. You can use ems for fonts, padding, etc. Keeps it all scalable! If at all possible, of course. see http://www.awprofessional.com/articles/article.asp?p=397663&rl=1 for some info)

lot of palette methods all at once   http://design.geckotribe.com/colorwheel/   ***
lot of real-world collections   http://easyrgb.com/matching.php   ***
several methods with swatches   http://wellstyled.com/tools/colorscheme2/index-en.html   ****
info on different "styles"   http://www.adampolselli.com/getthelook/   
paint company's tool, just like in the stores!   http://www.behr.com/behrx/workbook/index.jsp   ****
pick 1, get other shades fast   http://www.colormatch.dk/   *
related to colormatch, better   http://traumwind.de/blog/trw_colormatch.html   **
nicel, some free&$ offline tools   http://www.colorschemer.com/online.html   ***
colortoy in flash, tints & tones   http://www.defencemechanism.com/color/   *
lots of good info & links, discussion   http://www.mezzoblue.com/archives/2004/05/14/colour_schem/   ****
basic color theory-annoyingly animated tho   http://www.public.iastate.edu/~design/ART/ARTVS208/colorwheel.html   *
various discussions on color   http://www.stuffandnonsense.co.uk/archives/creating_colour_palettes.html   ****
different picker, adobe basis   http://www.triplecode.com/munsell/   ***
from Adobe   http://www.adobe.com/products/adobemag/archive/pdfs/9611febf.pdf   **
see the charts if nothing else!   http://www.visibone.com/colorlab/   ****
spin the wheel of color!   http://www.webwhirlers.com/colors/spinwheel.asp   **
get gradient between 2 colours   meyerweb.com/eric/tools/color-blend/   **
blend gradient with 3 colours   slayeroffice.com/tools/color_palette/   **
some color theory   http://www.hypermedic.com/colors/colortable.htm   **

---- the stars are my impressions/opinions of how many/how good the features are. * is still useful but simple. sorry about the inability to format anything :|   

Enough of my babbling. Your turn.
Title: Re: How to create a color/colour scheme
Post by: chio on May 05, 2009, 08:48:45 AM
Hmmm, a lot of theory. But its not so easy, for example to find good photos you can use in a free template. And mostly the colors depend on a photo.

Jo, my english is too poor to say what I mean.