Page introduction!
So, I've played around in HTML and have been studying the link between color and a good user experience, and have seen a few websites that have been using predefined HTML colors, which in my opinion are not always optimal for a good user experience.
It's 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 luminance 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 (like the ones I'm making) to the W3C colors that I think are much easier on the eyes. But for now, you can use these eleven swatches as a good starting point for making your own.
Once released, each color will be grouped into the 11 basic color groups (And the subgroups they encompass):