In the beginning, there were no colors, only black and white, or perhaps dark green and white. Of course, in the beginning, there were no websites. Things evolved, until today when a website can have almost 17 million colors. While that&';s possible, it&';s not usually practical. And even when it&';s practical, humans can&';t distinguish between colors which are very similar. I still can&';t tell my wife&';s navy blue socks from her black socks. Colors on websites are expressed in terms of red (r), green (g), or blue (b): rgb. Today, this rgb value can be expressed as rgb(r, g, b); a hex number; or an official color name. Colors on websites can be expressed in other terms, but rgb is the basic and most common. One of the first transitions to color, allowed several colors. Those which were safe to display on websites, were those whose hex rgb values were 00, 33, 66, 99, CC, or FF. This allowed 720 safe colors. Who needs more? you might say. You might not need more, but you might need different colors. Safe colors means that these colors would look pretty much the same to anyone looking at your website, no matter their browser or device. Later, came the introduction of official website color names. There are only 140 of these and most of these are not the safe colors I mentioned earlier. So, obviously, now there were many more safe colors. I assume that since there could have obviously been more official color names, people started using their own. Perhaps they chose a color from some color standard, perhaps they just picked a color and gave it their own name. For a long time, only official colors could be used in ridge and groove borders. Now, you can use any of almost 17 million colors for anything on your website. World Wide Web Consortium (W3C) resource on colors Mozilla on website colors, including which website objects you can color.
Color Themes
Websites often have a color theme. Various types of items have different colors. Most of the colors of the theme are complimentary and/or contrasting. Lots of websites like Scheme Color have various color themes. It&';s often easier to find one you like than inventing one on your own. Even though lots of websites have various color themes that you can choose from, they often don&';t give you any clue about what to assign these colors to. My suggestion is to choose one color for your background color. Choose a contrasting or opposite color for both text and borders. (Make sure to leave some space between your borders and text. This is usually the default, so you don&';t usually have to remember to do this.) Active areas can have a different background color. Inactive areas have a background color which contrasts with the Active areas. Shadows have a color which contrasts with text and borders. Usually borders and text are dark. Backgrounds, shadows, and inactive areas are light. Active areas are bright. I usually just have one color for text and borders. I use a different color for all backgrounds. I don&';t use shadows. So, I only have to choose two colors for my websites. But don&';t let that stop you from being more creative.
How to Specify Colors on Websites
Colors should be specified in a CSS Stylesheet or in the style tag or your webpage. Colors can be specified by using the Official web color name. You can also use rgb, rgba, or hsl. rgb (red, green, blue) can be specified using a string of hex digits. The hex color string starts with # to indicate that it&';s in hex. Hex color strings are either 3 or 6 hex digits long. If they&';re only 3 digits long, each digit is repeated when it&';s displayed, so that it&';s actually six digits long. I keep it simple and use all six digits. r, g, and b can each range between 00 and FF. 00 is darkest, FF is lightest. Combining r, g, and b gives you a particular color. rgb can also be specified as rgb(r,g,b). In this case, r, g, and b are decimal numbers. r, g, and b can each range between 0 and 127. rgba is specified as rgb(r,g,b,a) where a is the alpha channel for opacity. Opacity is the opposite of transparency. a ranges between 0 and 1 and is usually specified in tenths - .7, .5, etc. Getting more precise with opacity, usually doesn&';t make any difference. Opacity of 1 is the default and is totally opaque. 0 is totally transparent. Opacity works by letting the underlying color show through. Usually that color is white (default). Opacity can be specified using rgba or with the opacity property. You can also specify opacity as the 4th hex digit of a 3 digit hex string or as the 7th and 8th digits of a 6 digit hex string. Remember, the opacity digits are in hex, so the range is 0 to FF. I&';ll stick to a decimal fraction for opacity, thank you very much! You can also specify a percent for opacity, as in 50%. hsl stands for hue, saturation, luminosity. You might want to use hsl if you&';re more comfortable using a color wheel. h is basically, the color, s is the degree of grayness or lack thereof, luminosity is the degree of whiteness or lack thereof. h goes from red(0) to yellow(60) to green(120) to cyan/aqua(180) to blue(270) to magenta (reddish-purple)(330) to almost red(359). s ranges from 0 to 100. 0 is gray, 100 is h (the color). l goes from 0 to 100. 0 is black, 50 is h, 100 is white. hsl is useful for figuring out complimentary colors. hsl explained. Converting from rgb to YIQ is also useful for figuring out complimentar colors. YIQ is a color system used on some TVs. You can find various color converters on the web. cmyk is the color system used by many printers. Luckily, colors are automatically converted to cmyk or whatever system a printer uses, when a website is printed. gradients can be used for backgrounds. Specify either the linear-gradient or radial-gradient function for the value of the background or background-image property. You can also use the repeating-linear-gradient or repeating-radial-gradient function.
While I&';ve written some javascript functions to work with colors, it&';s usually not necessary. You just need to pick a handful or two of colors for your website and stick with them.