Website Colors


Are you doing design work? You almost certainly are working with colors if you are designing. If you are given the colors you are to design with then fine. However, if you need to pick a color or colors, there are some useful guidelines you can follow. First, Colors have meanings. Secondly, you may need to choose several colors that look good beside each other (a palate). Thirdly you might use fashion’s 60-30-10 rule that says 60% of the surface should be the main color, 30% the secondary color, and then 10% the third color. Remember that black and white are considered colors in this rule. This is not a fixed rule. I think for websites, the number would be higher than 60, forcing the other two numbers to be lower. Also, the 60% color could be green (or any color) and a few other shades of that same color.

To learn the basics of how colors are displayed on computers and mobile devices, from a software perspective, consider looking at the section at w3schools on Colors Tutorial.

Colors are displayed combining RED, GREEN, and BLUE light. RGB stands for Red, Green, Blue. How much of each color is specified with a number between zero and 255 for each of the three colors. 256 cubed gives you 16,777,216 different color possibilities. Most modern monitors are capable of displaying at least 16384 different colors.

Colors have meaning. For example, green is associated with the environment. Have a look at the Empowered by Color website for more information.

Here is a good website: rgb.to that explores color combinations and converts from RGB to other ways of specifying colour and back again. It also shows you the Pantone colors.

Additive Color

Here is what Wikipedia says about additive color: “Additive color is color created by mixing a number of different light colors, with shades of red, green, and blue being the most common primary colors used in additive color system. Additive color is in contrast to subtractive color, in which colors are created by subtracting (absorbing) parts of the spectrum of light present in ordinary white light, by means of colored pigments or dyes, such as those in paints, inks, and the three dye layers in typical color photographs on film.”

Pantone Color

Here is what Wikipedia says about Pantone: “Pantone Inc. is a corporation headquartered in Carlstadt, New Jersey. The company is best known for its Pantone Matching System (PMS), a proprietary color space used in a variety of industries, primarily printing, though sometimes in the manufacture of colored paint, fabric, and plastics.”

To see what many colors of text looks like on a particular colour background, go to w3schools and go to their Color Tutorial and click color groups on the left menu. choose a color and click on the colour name or hex value.

Solarized Color Palette

Solarized is a sixteen color palette (eight monotones, eight accent colors) designed for use with terminal and GUI applications.

Adobe Colour Palette

Another set of good color palettes are at Adobe Color Wheel. This will take you to the Adobe Color CC application. If you have an Adobe Id you can save your color themes. You can upload a picture and the app will pick out five colors from it for you to create a color theme to match the picture. There are a few different settings to choose from to alter the five colors selected.

The Meaning of Colors

Colors mean things to different people. When you are designing websites you may need to choose the colors. The website Empowered by Color provides us with the meaning behind most of the main colors – the psychology of color.