Best Colours To Use On A Homepage

Design Tips Please

[JonnyWarwick]

Hello out there...

I'm new to this rather wonderful site and would like some advice regarding colours to use on a homepage (its a football/gambling site).

Are there any hard and fast rules concerning what colours should either be maximised/used sparingly/avoided at all costs? I know from my time working in magazine publishing that a red masthead did the trick as far as print was concerned but I've been told that red should be used very sparingly on a web site.

Anyone got any opinions/experiences to share on this topic?

[smokeyb]

Welcome to WebmasterWorld JonnyWarwick
These are some of the things I take into consideration:
1. Keep the colours websafe
2. Try to avoid colour clashing, I set up a palette that does modulate too radically.
3. Make sure that visibility is maintained (such as text on background).
I have read some hard and fast rules somewhere, but as you can see by my lack of recollection that I didn't pay them any attention.

[mastervisa]

My nephew told me once that his school's teachers and librarians were instructed to look out for black backgrounds on Internet computers because those were porn sites. Might stay away from black backgrounds. Course those kids shouldn't be gambling so you may be safe there.

I tend to use plain old white backgrounds then my irregular shaped gif graphics don't look raggedy on the edges. Keeps them all from just being boring rectangles.

[twist]

I read on a website once where a guy gave a pretty good reason to use a black background. Went something like this,

Think of a computer monitor as a big lightbulb that you stare at for hours on end. What would rather stare at a bright white lightbulb or a dimmer black bulb.

That being said, I use a white background anyway.

As for an entire color scheme, first decide how many colors you are going to need.

1) Regular text color
2) Link text color
3) Visited link text color
4) Hover link color
5) External link color
6) External hover link color
7) Background color
8) and so on...

You can of course mix and match colors, maybe the same hover color for all links.

I think finding a good color scheme were all the factors mix together well is quite time consuming.

[Livenomadic]

I always go for pastel colors on a white background, looks modern and trustworthy.

[JonnyWarwick]

Thanks for the feedback - its much appreciated.

[larryhatch]

What I would do is look around the web at random, and find sites that are visually appealing to you.
Bookmark several of the best looking ones. Show them to friends, your wife, (but not her hairdresser).
Ask THEM which one looks the best and is easiest to read, no eye strain grey on grey etc.

Then, look as the source code for the winning page.
Hopefully everything you need to know is there.

[limbo]

There have been some great threads [google.com] about this in the past that might help you.

[numbrel]

Since the site is about sports and gambling, I immediately "assumed" most visitors would be male and since you asked about colors, I also thought about color blindness, since it's more common in men than women. Anyone know of any research into making websites accessable for color blindness? Once when I was setting up an advertisement for a local muffler shop, the owner mentioned that he was color blind and black, red, and white was a combination that was easy for him to see. He said many men in auto related businesses were color blind and that is why so many use black/red/white in their business logos.

[markis00]

And that, numbrel, is how you think outside the box
I have never heard of that before, and its pretty interesting

[smokeyb]

Yes that is interesting, and stands to reason too. But I have to say, that the first colour I decide on, has to reflect the nature of the business. Between the lines this has already been touched on here, and other examples are more obvious than others.
I once went to something called "Colourscape" that was an idea of a French guy. It was basically an inflatable building contain different coloured sections, and you had to wear a reflective toga inside. As you moved from one part to another, your whole mood changed through the spectrum (anger, calm serenity, fear etc) and it was a truly memorable experience (not only for the toga). But the real eye opener was the fact that colour helps to create emotions to some degree.
Sorry for the waffle
Smokey

[weebby]

Livenomadic, what do you mean when you say "pastel colors". I love pastel colors, I see them on various sites, they look great, but I have no idea how to get to a full list of them. Is there any list of pastel colors anywhere, or any way I could find these colors by using photoshop or a similar software?

[Livenomadic]

Search Google Images for 28248_f.jpg,

That would be a good example of pastel colors, although I don't have a full list avaliable.

[weebby]

Thanks Livenomadic. It's indeed a good reference. I'm still wondering, however, if there is any chance of understanding how to find the "pastel version" of any color.

If I would like to use a scheme of red colors, for instance, and would like them to be in pastel variations, is there any way to find the right colors?

[limbo]

One of these [images.google.com] might come in handy.

[weebby]

Which ones are "pastel" colors? So many options...

[limbo]

Weebby.

'Pastel' Colour is quite an ambiguous term describing any color that has a low saturation and high brightness (HSB colour model) making them pale. There are pantone lists of pastel colours that might be considered a bench mark to work from although they are really only useful for subtractive light media i.e. printing. However you could use Photoshop, for instance, to look at the hex reference for each pastel and work from there. A search for 'pastel colour chart' might also turn up a few more web references.

websafe

I am not sure you still need to colour match with websafe colours smokeyB. Are there any users still using 256colour monitors/machines? if so are they not used to awful screen colours by now? This is one area where my usability hat is removed and I say "Sod em, I want my sites to look good!" IMO There are only 4 colours that are worth using from the websafe pallette two of those are white and black! You just cannot get the range, especially in pale greys, oranges and blues.

[twist]

Are there any users still using 256colour monitors/machines?

I agree, if your site has any photos, fading or shading the 256 (8-bit) color person is definately out anyway. I would suggest making your website 16-bit color safe though. Many people and places around the world will probably be using 16-bit color for quite awhile so at the least turn your machine down to 16-bit and make sure your website looks the same at 16-bit color as it does at 32-bit color.

[zooloo]

"Anyone know of any research into making websites accessable for color blindness?"

IBM have a piece of free software called aDesigner (Easy to find with Google)

It shows what your page looks like with visual impairment

I don't know haw "real world" it is but I've found it useful to consider.

zoo

[smokeyb]

Funny that... I used to pay "websafe" little attention, and then I joined WebmasterWorld... After many discussions in the HTML and Browsers forum, I discovered that many of the big boys preferred to work websafe so as not to exclude any viewer, and then I looked at some of my sites on other peoples machines and was horrified at the mismatching of colours (they were 32bit systems). When you talk about photos there isn't much of an issue, but when you design all the borders etc as images, matching with background colours is essential and nearest nieghbour won't do. A gif is constrained to 256 colours and remains small in filesize which is a major consideration when designing. I soon found that it didn't make much difference to my design process when working in websafe, and no creativity has been compromised, I feel it's bit like an MP3: 90% of it is missing, but it was all superfluous to the ear ;)