Solved

Use of color on Web Pages?

Posted on 2001-06-22
38
247 Views
Last Modified: 2013-12-25
Does anyone have specific books and / Web Site which will help me get a better feel for the use of colors on Web Pages?  My color sense is not good, but my HTML is great!  Web Sites are preferred over books, but I need some theory as well as practice.

If there is more than one "best" answer all the people who provide good reference works will get points!
0
Comment
Question by:Ernest022699
  • 12
  • 10
  • 5
  • +5
38 Comments
 
LVL 18

Expert Comment

by:mgfranz
Comment Utility
0
 
LVL 1

Author Comment

by:Ernest022699
Comment Utility
Thank you, mgfranz.

That is a very nice Site for displaying background colors.

When the developer adds files to get rid of the 404 errors and fixes the JavaScript errors (especially in the "Use Web Safe Color") it will be even better.

Hints for everyone about what I want: The combinations of colors which people find pleasing often elude me.  For example, black text on white background is easy to read and reasonably restful to the eye.  Yellow text on white is definitely neither of the above.

There obviously are going to be cultural differences.  If I were doing an Irish Festival Site, for example, green would be used a lot, with orange and white being a very close second and third.  (No arguments, please.  That was just an example.)
0
 
LVL 18

Expert Comment

by:mgfranz
Comment Utility
Sorry... I misunderstood what you were getting at...

Heres a thought, learn good by looking at bad... http://www.webpagesthatsuck.com
0
 
LVL 1

Author Comment

by:Ernest022699
Comment Utility
The "Web Pages That Suck" Site and its author's other opinion Sites should be required reading for anyone who thinks about creating or modifying even a single Page.

It is very gratifying to see a respected (I hope!) authority voice the same opinion I have about Flash.  It is wildly over-used, a resource black hole, and usually does not add content to the Site.

Thanks for the reminder, mgfranz, but I'm still looking for GOOD color advice.
0
 
LVL 18

Expert Comment

by:mgfranz
Comment Utility
I tend to build all my sites on a white background unless a client specificies a different background and text, if he pays the bills, I am not going to argue.

But what I have seen and know, black on white, arial 10pt should be adhered to always...
0
 
LVL 1

Author Comment

by:Ernest022699
Comment Utility
Thanks, mgfranz.  I, too, use white as a background for nearly everything.  Years of reading black text on whitepaper have lead most people to expect it.

0
 
LVL 19

Expert Comment

by:webwoman
Comment Utility
It's not the colors as such (though color is a consideration) it's the CONTRAST between the colors.

Because you can't tell what the color is going to look like on everyone's monitor, even if you use 'web safe' colors, it's better to concentrate on the contrast between the colors. If your monitor is old and the color guns are going, the colors will always be off. Somebody might have a more red cast, somebody else might have more of a blue tinge, Macs and PCs display colors differently (different gamma for the monitors), etc.

A good, cheap, easy to reference source for presentation colors (which is pretty much what web pages are) is Powerpoint. The color schemes there have been designed to take advantage of contrast -- because they've been designed to be PROJECTED not printed, they have to take into consideration exactly the same things you take into consideration on a web page. Dark/light, colors that aren't what you expect, etc.

To get an idea of what I mean, take a graphic (or a screen shot of a web page) into Photoshop and make it a grayscale. Can you still read it? If so, everybody should be able to differentiate between the items, whether they have a lousy monitor, 256 colors, or are color blind. Of course, you want the colors to also look nice together...

For that, you might also want to look at a designers color wheel. There are tons of them, you can find one in almost every basic design book. It's pretty much the standard way to pick colors that go together pleasingly.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
A while back we did a series of layout using various color combinations as a PAQ builder in the CSS TA:

http://www.experts-exchange.com/jsp/qShow.jsp?ta=css&qid=20116418

It is worth the 25 points, for tha range of combinations that were presented.

Cd&
0
 
LVL 1

Author Comment

by:Ernest022699
Comment Utility
Thanks, webwoman and COBOLdinosaur!

webwoman: You've brought up several good points.  Using 'Web-Safe' colors is important, IMHO.  Is there a specific book you'd recommend?  I've been told by several people to get a good basic book, but nobody is willing to go out on a limb and suggest a specific title.

COBOLdinosaur: The PAQ is worth much more than 25 points!  You've started a great tradition, IMHO.  I'll try to follow in your footprints here.
0
 
LVL 18

Expert Comment

by:mgfranz
Comment Utility
The link I posted earlier to Webdeveloper.earthweb.com will build web safe colors for you.  And as far as a good book goes for designing, there are hundreds of books written on the subject, I cannot recommend one in particular, but I have the BlackBook "Web Design and development" book that was quite helpful at times of these type of issues..
0
 
LVL 19

Expert Comment

by:webwoman
Comment Utility
IMHO, I think the 'web safe colors' thing is bunk. It was useful a few years ago, but most people now have systems that are set for much better than that.

Photos don't have 'web safe colors' -- unless you're on AOL they will show up fine. (AOL tends to double compress everyting) I refuse to limit myself to 216 colors just to accommodate a miniscule part of my audience, and one that WILL see pretty close to what I design even if I DON'T use 'web safe colors'. You don't have ANY guarantee that what you set up on YOUR monitor is what anybody is going to see anyway -- so why get caught up in an (IMHO) outdated idea that doesn't really help much?

Now, the named colors are a bit better, since they're supposed to be cross platform/browser compatible -- but again, you have ZILCH control over how the user's system is set up, what type/quality of monitor, how it's set, etc. And that, more than 'web safe colors', defines what the user is going to see.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
I generally do PAQ builders every 5 or 6 weeks mostly in HTML.  If you see one feel free to contribute.  The more the merrier.

Cd&
0
 
LVL 18

Expert Comment

by:mgfranz
Comment Utility
I do agree with you to a point webwoman, 216 colors is not a very broad spectrum, however, if you are building a basic site with background, table, tr and td tag colrs embedded, it is a safe bet that if you use web safe colors your target audience will not have any issues with colors.  Named colors is the same as websafe, except there are fewer.

I try for the most part to build my sites on websafe colors, at a 56k download speed
0
 
LVL 18

Expert Comment

by:mgfranz
Comment Utility
I do agree with you to a point webwoman, 216 colors is not a very broad spectrum, however, if you are building a basic site with background, table, tr and td tag colrs embedded, it is a safe bet that if you use web safe colors your target audience will not have any issues with colors.  Named colors is the same as websafe, except there are fewer.

I try for the most part to build my sites on websafe colors, at a 56k download speed
0
 
LVL 19

Expert Comment

by:webwoman
Comment Utility
No, you don't. There will STILL be issues with color. You STILL have no CLUE how the colors are going to display. The only thing you know is that they won't 'dither' -- maybe.

I can use websafe colors, and you STILL won't see the same thing *I* see -- because you don't  the same system, monitor, ambient lighting, monitor controls set the same, etc., etc., etc., ad nauseum. My 'grass green' might be your 'lime green', my 'red' might be 'crimson' on your screen -- and to a color purist or print designer, this is a HUGE problem.


And if there's not going to be any consistency, why limit yourself?

We won't even go into how it looks onscreen compared to how it PRINTS... ;-)
0
 
LVL 18

Expert Comment

by:mgfranz
Comment Utility
There are standards in place that are suppose to be adhered to by the manufactures of video products, but just like the color specs on your TV, the range will vary...
0
 
LVL 1

Author Comment

by:Ernest022699
Comment Utility
webwoman has a valid point within limits.  Her focus is far finer than mine.  She's a color expert; I'm a color not-even-novice.

Please, everybody, keep in mind the context of the question.  I don't care about the distinction between grass-green and lime-green.  Let me repeat that: I don't care!  I am not asking about Pantone-type color matching.  <em>I do not care.</em>  If you see green and I see green and J. Random Visitor sees green, and the colors are pleasant and well-matched, and aren't garish, eye-straining, or otherwise obnoxious, then I'm happy.

I am telling everyone that I have a poor color sense and I need a book and/or extensive examples of coordination of color for Web Pages.  I am positive I shouldn't put yellow text on a white background or vice versa.  I know (I think) that I shouldn't put red text on a green background for normal use.

"Web Sites That Suck" has some good examples of what I don't want to do with color.  ("Duh!", you say.)  What I'm despirately seeking is the name of a specific book which will help me use color well on the Web.

Everybody who has contributed so far is guarenteed to receive points!  (I'll create pseudo-questions to distribute points.)  There has been some good discussion, and an excellent PAQ pointer.
0
 
LVL 18

Expert Comment

by:mgfranz
Comment Utility
Ernest,

It would be difficult to say which book is a good resource for this issue, there are hundreds written on the subject of color and it's use, you can even use the same thinking in Marketing, Publishing and home decorating.  Take a look at some of your favorite magazines, look at those commercials on TV that catch your eye, look at publications that deal directly with the use of color.  Visit your local bookstore, there are ideas and suggestions everywhere without even opening a cover.

There are no hard fast rules of the use of color, it's all in your imagination and what the audience is pleased with.
0
 
LVL 18

Expert Comment

by:mgfranz
Comment Utility
Heres some ideas.  Check out the Top 100 web sites from PC Mag; http://www.zdnet.com/pcmag/stories/reviews/0,6755,2394477,00.html  See if there are any similarities.  While the Best Of The Web site hasn't been updated since 98, http://www.botw.org/1998/awards.html  you can still see a few repeats of the best sites... again, check out the similarities for content and the use of color.
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 19

Accepted Solution

by:
webwoman earned 200 total points
Comment Utility
>> I am positive I shouldn't put yellow text on a white background or vice versa.  I know (I think) that I shouldn't put red text on a green background for normal use.

See, you've got a better sense than you think! In both cases, it's the same thing -- contrast. There's not enough difference between yellow and white, the eye has to strain to tell the difference. Red and green actually are OK -- it's just that to most western eyes, they scream Christmas. And if they're about the same value in brightness, they can easily clash.

However, a deep green and a bright red can work... or a pale green and a burgundy. The color depth/brightness isn't as close, so they don't 'fight' so much.

Some basics...
contrast is important. There shouldn't be any problem differentiating between colors.
color depth/brightness should be different. The colors with the most contract tend to 'pop' -- your eye goes to them first. Too many similar color values and your eye doesn't know what's important (that's the red/green problem).
On a light background, dark colors pop out, on a dark background, light colors do. That's why black text/white background works, as does black background/white text -- or yellow text, since yellow is close to white in contrast value.

Does that help some? For the color combinations, a color wheel that shows complementary/monotone/etc. colors is good.
If you want to be REALLY cheap, go to a big hardware store or paint store. Pick up some of the combinations they have on paint chip cards and some of the giveaway brochures/flyers with color combinations. That should give you lots of ideas... ;-)
0
 
LVL 18

Expert Comment

by:mgfranz
Comment Utility
I like the idea of going to Home Depot to check out the color charts...

And don't forget to buy stuff... (I'm a share holder too.)
0
 
LVL 7

Expert Comment

by:CJCraft
Comment Utility
I think the Secrets of Web Color Reveled series on CNet.com is one of the best articles on basic color theory I have read as it applies to Web site design.

The color harmony section is what I used to set up the user customized color settings for my site. And the colors are all Web safe too (can't hurt).

Pretty handy site for me, at least since I have no clue when it come to color coordinating. You should have seen what I came up with on my own. :P

Here it is if you want to check it out:

http://builder.cnet.com/webbuilding/0-3883-8-6309338-1.html

Chris Craft
http://www.cjcraft.com/
0
 

Expert Comment

by:teacher_mod
Comment Utility
CJCraft,

I have noticed that on all your posts you include a link in your signature.  The link properly belongs in your profile.  Posting your link in threads where it is not relevant to the question is a form of advertising and is not permitted under the user agreement.

As an expert myself I understand that self-promotion is part of the reason for being here but please don't post the link in every thread.

teacher_mod
Community Support Moderator
Experts-Exchange
teacher_mod@experts-exchange.com
0
 
LVL 1

Author Comment

by:Ernest022699
Comment Utility
Chris Craft's Site will not permit viewing without accepting cookies.

No matter how important the designer of a site thinks cookies are, I will not visit any site which demands that I accept them.  I encourage all Web users to reject all such sites.
0
 
LVL 18

Expert Comment

by:bruno
Comment Utility
http://www.visibone.com/colorlab/

this site will let you view websafe colors next to each other, a combination of up to five at once i think....
though it is running slow for me right now...

http://www.colorschemer.com/online/

will give you a bunch of colors that go together, when you select just one....


and my two cents - i agree that web safe colors no longer matter.  i had done some research on the fact a while back, and i do remember that most any system this day will look with most any color, and even the WEB SAFE colors looked different on different systems and different browsers, so if THOSE are going to look different, might as well not limit yourself.

the article is located here http://hotwired.lycos.com/webmonkey/00/37/index2a.html  and the page to REALLY pay attention to is page 5.

good reading.


BRUNO
0
 
LVL 1

Author Comment

by:Ernest022699
Comment Utility
Because it has been two weeks today, on Monday the 9th I'll accept a comment as an answer and post pseudo-questions for the other contributors so that they can also glean deserved points.  Anybody have any (semi-)final thoughts?
0
 
LVL 18

Expert Comment

by:mgfranz
Comment Utility
Be creative, and realistic.  No one wants to see lime green text on an orange background with red mouse-overs

Always bounce your ideas of other people for opinions... good or bad.
0
 
LVL 18

Expert Comment

by:bruno
Comment Utility
sure.


you can please some of the people all the of the time, and all of the people some of the time, but not all of the people ALL of the time.

whatever you do, there will be people who would rather see something different.  if MOST people like it, and you do as well, go for it.  just remember there will be people who don't.....
0
 

Expert Comment

by:AlexisP
Comment Utility
Hello Ernest,
I think what you are looking for more precisely is about the psychology of color and the perception of color.  To start off a search try search for under "complimentary colors" and "color theory" For instance, Blue and Orange are complimentary Colors.  Thus a site that is primarily blue can have a touch of flavor added to it using orange.  Likewise, for a very unified calm look you would use monotone colors, or colors close to each other on a normal color chart:  blues, blue greens, and greens for instance can create a nice display.  Imagine the numbers of possibilities you have when you take a single blue color, vary its saturation (the amount of color in it in balance with the amount of grey), hue (the actual color whether it is blue-green or more blue-purple), and intensity (how bright it appears on the monitor).  Also you will want to look into the effects of juxtaposing colors.  For instance, A Purple square next to a grey square will change the perception of the grey, making it a yellowish grey.  This is definitely appearant in print, though I have seen it happen online as well.

You will want to study the color wheel and as funny as it sound, books of colors. I did a research project (small science project in highschool actually) where I studied the concepts of color perception and color theory. I have also taken courses in color theory at a major University and at an Art School.  I am willing to help you individually find things, though at this moment I am searching for good resources (usually they are single chapters in a book).

Check the library for the Pantone Book of Color.  ISBN 0-8109-3711-5.  This book I used for my original research and it had some good information.  Also handy at the time is Tektronix Computer Graphics book Picture Perfect: Color Output for Computer Graphics, which also went into the basic design principles.  ISBN 0-927489-00-7.  Although these may seem dated in the computer terms of time, the true concept of color theory has been understood and tested long before we had to worry about web safe colors.

Feel free to email me if you would like to begin a post or thread on color theory or would like to individually get any information I can give you. I will try to find more resources in the mean time.

Also, this link has some educational links for graphic design including color theory:
http://www.worldwidelearn.com/graphic-design.htm

some are payed for, but if you scroll down you can find some free tutorial sites. I haven't reviewed them but you may be able to find something. :)

~Alexis Parker
email@alexisparker.com
0
 
LVL 1

Author Comment

by:Ernest022699
Comment Utility
AlexisP: Thank you for your contribution!  I am rejecting your answer because I can accept only one "answer", not because the information you have provided is not valuable.  Because of her multiple contributions, webwoman will be awarded the status of answerer.  EVERYONE else will also receive points!

A pseudo-question will be posted in a few minutes which will give you points, as pseudo-questions have been created already for the other contributors here.

Important: It is considered good Experts Exchange etiquete to use "comment" rather than "answer" when posting here.  The questioner can always accept a comment as an answer (such as I will do after rejecting your answer).
0
 

Expert Comment

by:AlexisP
Comment Utility
No problem. :) I am new around here. How do I work with the psuedo questions?

~Alexis
0
 
LVL 1

Author Comment

by:Ernest022699
Comment Utility
webwoman: Thank you for your contributions to this question!  Your help and observations are much appreciated.  I found your real-world approach to color on the Web refreshing.
All other contributors' comments were very helpful as well.  Points have been awarded to other contributors through the use of pseudo-questions.

Thanks especially to COBOLdinosaur for the concept of creating PAQs for the good of all and the betterment of Experts Exchange!

If more references are found to be useful I will post them here as comments for those who pay for PAQs.
0
 
LVL 1

Author Comment

by:Ernest022699
Comment Utility
~Alexis: Welcome!  I don't think anyone was offended, certainly not me!

Just look at the other questions in this category to find the question labeled "points for AlexisP".  Just add a comment (or an answer) and I'll accept it as an answer.  That will automatically give you the points.

Any other questions as to Q & A convention here?  Just post 'em as comments to your pseudo-question and I'll do my best to answer them.
0
 
LVL 18

Expert Comment

by:mgfranz
Comment Utility
Good comments all around!
0
 
LVL 18

Expert Comment

by:bruno
Comment Utility
AlexisP,


Welcome to Experts Exchange!  As you are new, you might not understand the rules quite yet.  In the interest of the site, please post comments only.  The questioner can choose to accept your comment as the correct answer.  Proposing an "answer" locks the question, and generally stop the question from getting the attention it deserves.  ALSO, please keep ALL relevant discussion IN the thread, and not on email.  As the questions are PAQ'd (previously asked questions), and some people even pay for a service to access these questions, it would not be fair to have a solution posed over email instead of in the thread.

for more guidelines check here http://www.experts-exchange.com/jsp/cmtyQuestAnswer.jsp

Thanks, and I hope you enjoy your EExperience.


BRUNO
0
 

Expert Comment

by:AlexisP
Comment Utility
Thanks Bruno,
I have been trying to find more information on points and such, but not finding them easily. Thanks for your help. :) Hope I prove an asset once I figure out the system :)
~Alexis
0
 
LVL 18

Expert Comment

by:bruno
Comment Utility
Alexis,

No problem!  :-)  Any other questions, feel free to ask!

BRUNO
0
 
LVL 19

Expert Comment

by:webwoman
Comment Utility
Thanks Ernest! There certainly was a lot of good info in this question, hopefully others will also find it helpful!
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Read about why website design really matters in today's demanding market.
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to dynamically set the form action using jQuery.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now