Web Color and Adding Color to Your Website

Color is very different for the mediums of print and web. The color model for print is CMYK (cyan, magenta, yellow, black), which is affected by the printer and surface of the print. The color model for web is RGB (red, green, blue), which is affected by the screen’s calibration. Both are affected by the audience (color blindness for example). So why the different color models, why aren’t they the same? The easiest answer would be because they are represented differently, a monitor or device (generated by light) vs a tangible object (physical). RGB is an additive color model where a number of colors are mixed together. CMYK is a subtractive color model where the color is filtered through a white light.

Choosing a Color Scheme

Color is often an early decision in any design project. Choosing a color scheme can be an arduous task especially if the brand is yet to be created and the audience yet to be established. It may even be worth taking a look at the psychological effects of color, though it is highly debated if this is relevant. Read more about Color Psychology.

Fortunately there are many tools and websites that make choosing a color scheme a relatively painless process.

Using Color in Your Website

There are several different methods to add color to your website—RGB, RGBA, Hexadecimal, HSL, HSLA, color name. Let’s look at how you would represent white, black and red with the first three methods in your CSS as these are the most widely used.

White

Black

Red

RGB

Here you would specify 3 values for red, green and blue between 0 (no color) and 255 (full color).

rgb( 255, 255, 255 ) – white
rgb( 0, 0, 0 ) – black
rgb( 192, 57, 43 ) – red

RGBA

This is exactly the same as RGB but takes 4 values, the last representing opacity. This method is not fully supported by all browsers.

rgba( 255, 255, 255, 0.5 ) – white, 50% opacity
rgba( 0, 0, 0, 0.4 ) – black, 40% opacity
rgba( 192, 57, 43, 1 ) – red, opaque

Hexadecimal

This is by far the most used method. Here you would specify 6 values, three sets of two values for red, green and blue. The hexadecimal number system uses sixteen different symbols (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). FF represents full color, 00 represents no color. Any color with equal r, g, and b values (besides black and white) is a shade of grey, such as #121212, #5A5A5A, or #C0C0C0.