Jump to content
xisto Community
webguide

Creating A Color Combination Guide to color combinations

Recommended Posts

Ever been to a website that is barely readable because of the bad color design? Well here's some tips to make sure that you don't fall into the same trap.

* Black text on a white background, while not exciting, is the most practical color combination.

* Try and not use more then four colors on your website, too many can be disorientating for the user.

* Find out what each color represents to the users mind. For example green represents wealth while red represents daring.

* Don't use yellow for web page backgrounds.

* Take a look at Visibone or get any number of color charts that are avialble on the internet if you cannot create a suitable combination yourself.

* I've found the best color combinations to be monocrome. Which means multiple shades of the same color. NOTE: make sure there is contrast between the colors, or else the text will be diffecult to read.

Hope thats helpful

Share this post


Link to post
Share on other sites

Another nice background would be an image showing a gradient. You can make it small enough (say 800x5 pixels) and fill it from light-blue to white.Then just use it as background image.

Share this post


Link to post
Share on other sites

So for colorscheme, would this be acceptable ;)

Lindy Farms of CT

I'm working on the framwork for this site and it will be using, css, php and mySQL when done. Right now I'm just working on the color schemes and layout of the site. 3 column, with header footer and no frames unless used for data that belongs in frames. :P

Right now I'm testing the footer, It's supposed to stay glued to the bottom of the screen in the page is short like now. I'm having some trouble with the code ;) when the footer is glued to the bottom, the center context have a small hole in the bottom left hand side. As soon as I figure out what I forgot it should work...

The menu on the left side will be content driven using mySQL to populate thae data. Now it's just there as a place holder :P to see what it would look like.

I have a yellow line in the left column, right under the text... I have to figure out where that comes from (It must be in my css file)

Any opinion on this color scheme?

Nils

Share this post


Link to post
Share on other sites

one way to expose yourself to suitable colour combinations that established companies and people use on the internet is to surf around and keep an eye out for popular sites. you can be sure one of the reasons why they're popular is because of the colour combination they use - pleasant and comfortable to the eye and not at all jarring or blinding.take note of the colour combinations they use and you'll soon be familiar with colours that can be put together to enhance your site and colours that will turn people away from your site.

Share this post


Link to post
Share on other sites
;) on my site i use a purple/ black color combination.There are different shades of purple in the banner image, and the background is black, with a sort of a smoky purple iframe. The font color is black.It's not really an interesting layout, though ,so i'm thinking of making a different layout, maybe one with more graphics..

Share this post


Link to post
Share on other sites

And don't forget that any colours you use should be from the 216 web-safe colour palette, otherwise some colours would look different on different systems and browsers. I use the one in Photoshop, but there are websites like webmonkey.com that show the web-safe palette.Also, when you have a page that has white backgrounds, and coloured backgrounds (maybe the menu), make sure that the active link, unvisited link and visited link colours don't blend into either of the backgrounds. CSS gets around this easily, but always a good thing to keep in mind.

Share this post


Link to post
Share on other sites

Not only that, but when making your website with coordinated colors, your best bet is to go with complementary colors. They look good together and create a stunning contrast. The best way to find complementary colors is look at a color wheel. The color directly across from it is its complementary color! :(

 

Basic Complementary Colors:

Red=Green

Purple=Yellow

Blue=Orange

Edited by mpinsky (see edit history)

Share this post


Link to post
Share on other sites

This might be cheating, but I found this great website that helps you pick your web palette. All you have to do is pick out your favorite colour and it will pick the whole palette for you a total of five colours. You guys should really try it out. With the palette it has the html code for each colour listed.

 

http://www.website-colors.com/

Share this post


Link to post
Share on other sites

One amazing tool I've found lately (and just posted in this same forum in another thread, I just hope people don't think I'm advertising it...) lies HERE (English, v2.0). It has many options, like how many color groups, easy-to-use interface, preview of how do the color scheme would look to people with limited color vision, among other things. Up to now it's the best in my personal opinion. Try it out people, and you wont regret =)

Share this post


Link to post
Share on other sites

Although I really like to avoid using plain old white for the most part, I do agree that black text on a white background just can't be beaten.Using different shades of the same colour for your site is also a really good idea, it's what I do for the most part.I usually prefer, for example, a darker blue colour for a main tables border and heading, but shade it down slightly for inner content. It makes things look much better.Softer colours seem to go really well, like with this forum.

Share this post


Link to post
Share on other sites

Although I think black and white websites a little boring, I think that too many colors can loose focus. The worst case is that the colors causes loose in readability. There are some website out there that the background color and text color has too little contrast and extremely hard to read. The best color scheme is simple and pleasing and also focuses the viewer on the main focal point. But I would take black and white any day over website that are hard to read or a rainbow of colors.

 

The color scheme also gives the reader some clue to the type of website it is. Normally office business sites are fairly boring and simple. Personal homepages are the opposite.

Share this post


Link to post
Share on other sites

I agree that monochrome is probably the best. I don't think just using complementary colors will cut it. I don't want to stay at a website that long if it looks like a christmas tree, haha. So, green and red have always seemed difficult for me to use for website colors.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.