Page introduction!
I have been playing around in HTML for a while and have been studying the link between color and a good user experience. What I have personally learned from experimenting and observing different websites is that predefined HTML colors and questionable color schemes are not always optimal for a good user experience.
It is very tempting to use the predefined HTML color names but I strongly advise against using them haphazardly. There are many alternatives that are easier on the eyes, less limiting, and easier to read. This page is still a work in-progress but will be updated whenever I am able to get to it.
Before we begin, the one essential tool you'll need for web color design (And web design in general, in fact) is the Color Contrast Analyzer. It is used for for measuring the contrast ratio of two colors, which is the most important part of creating a readable document/webpage/etc. You will want to aim for a contrast ratio of 4.5:1 for small text or 3:1 for large text and non-text content.
General rules
- The green channel is the lightest of the three additive primaries and will make the biggest difference in contrast. Red is in the middle and will make a moderate difference. Blue, the darkest of the three, makes the least difference.
- If we are thinking of the common definitions of each color of the rainbow, yellow is the lightest color and blue and purple can be the darkest colors. But for the sake of contrast and good color schemes, it is good to play around with these rules. For example, the cool colors are usually considered darker but they have many light variations too, so they can be displayed against black or white text depending on the specific shade.
-
BE VERY CAREFUL WHEN USING FULLY SATURATED COLORS! These are the worst offenders:
#FF0000 #FFFF00 #00FF00 #00FFFF #0000FF #FF00FF
Right now you're seeing these colors constrained to a small area. If these boxes were bigger, the colors shown could get pretty overstimulating. So be judicious in your usage of these problem colors, and never use them en masse. - Going on from the previous point, you'll also run into contrast ratio issues with HSV hues at full saturation. You'll never get black to look good against a pure RGB blue, or white to look good against the other listed colors in the above example.
- Never use vivid-colored text against a vivid-colored background. It's tough to read and your eyes will hurt as a result.
- While each color has its own rules and exceptions, tne general rule of thumb is to never have less than two color channels active at once. (If one of the color channels is at 255 then all three channels should be greater than zero.)
- If it's a color you can't mix with paint then don't use it. Consider getting some samples of paint swatches from your local hardware store and try to replicate them on the screen. Many of those make for good examples of good colors to use.
Explore the colors!
There are many alternatives to the W3C colors that I think are much easier on the eyes. In fact, you can create and test different color combinations in the Color Contrast Analyzer and use them in your CSS! You can use these eleven swatches as a good reference or starting point for making your own.
Your needs are going to vary depending on the website you are creating, but each color group has some general rules to follow for good color design.