Digital colors are mixtures of Red, Green, and Blue, with White and Black to lighten or darken hues.

Color choices are based on many factors. Will many people prefer your color, or color scheme? Greens, unfortunately, might be associated with sickness, especially mixed with too much red. Therefore, color choice should fit with associative subjects:

Landscape: autumn yellows and browns Water scene: blues, aquas (blue mixed with green), white Emotions, like anger: reds and oranges

Lighter and Darker Colors

How light or dark should my color be? At too dark, some monitors won’t pick up the color well. At too light, readers may burn out their eyes with bright background color. Choose the brightness/darkness based on the contrast between light colors against dark ones.

Hexadecimal

(Suggestion: Use a color chooser you can input hex values to see the color changes.)

For tinting colors with white or black, make the numbers associated with red, green, and blue, higher for lighter colors, and lower for darker colors. Using hexadecimal (six) numbers to represent the digital colors:

black: (red 00, green 00, blue 00) 000000 = black

white: (red ff, green ff, blue ff) ffffff = white

Hex numbers start from zero to f (0123456789abcdef). Hex colors (red, green, and blue) have two hex numbers each.

Lighter

The color aa0000 paints medium red. Lighten red (closer to white), by incrementing 3 steps, from a to d. The last four numbers remain the same (dd0000 – lighter red, without green or blue changing). Red is now brighter, and much more noticeable.

Darker

Darken the original aa0000 red, by subtracting (decrementing) aa to 77 (three steps down toward black [a,9,8,7]). Now, 770000 is still red, but darker, and less noticeable.

Increment or decrement hex numbers to lighten or darken red, green, or blue. Either move closer to white(ffffff), or move closer to black(000000). Remember all of the numbers mix with each other.

Saturation (how much hue)

Saturation is how close a color is to gray. Toward gray is desaturation. Toward more color hue is saturation (away from gray). Make hexadecimal numbers closer together in value for desaturation (gray); farther apart for saturation (more hue, less gray).

Explanation: With saturated green (00aa00), peoples’ eyes may need relief from the green intensity. Incrementing red and blue five times will desaturate the overbearing green, at 55aa55. Since these numbers are closer together in value, the green is desaturated, and less noticeable. (Remember hex is 0123456789abcdef.)

Reverse this process to saturate the green we created. Decrement our hexadecimal green (55aa55) to 33aa33. Notice how the green hex remains the same (aa). Red and blue numbers move farther away from green’s. This effect makes more green hue, and less gray.

Desaturation (how much gray)

Completely gray is hex numbers at the same value (aaaaaa). Hex gray has all the same numbers. Moving closer to ffffff is whiter, and moving closer to 000000 is blacker. Grey is really desaturation. White is just lightest, and black is just darkest.

Hex Adjustment for Saturation

Compare the desaturated (closer to gray) green, with the original green. Notice desaturating a color makes it appear lighter. Use the same technique to darken, as above, for the desaturated green (so desaturation won’t lighten):

Lower (decrement) every number, in this case 55aa55. Decrement each by one, to get the darker green color 449944. This darkens more than we want. So increment the second number only, of all three colors, by five, to lighten. Red would be 49, green 9e, and blue 49.

Original = 449944
Lightened = 499e49

The second number of each color increments a smaller amount than the first number. First numbers multiply by 16, and second numbers increment by one.

Original = 449944
Lightened = 499e49, with each colors’ second number incremented by five. Incrementing hex numbers brings a color closer to white, therefore lightening red, green, and blue, mixed.

While incrementing hexadecimal colors, the two numbers for each color are a larger increment for the left number, and a smaller for the right number. A blue color of 5555ee, is much different than a blue color of 55557e. Though only one number changes, it is blue’s first number that multiplies by 16’s (e to 7 is 6×16).

5555ee = blue
55557e = blue’s first number lowered

However, if blue’s last number changes from 5555ee to 5555e7, almost the same blue is visible. Blue’s second number multiplies by one (in this case, 6×1 values).

5555ee = blue
5555e7 = blue’s second number lowered.
This rule goes for each: red, green, and blue.

Shadows and Highlights

Shadows make elements pop out like 3-D (dimensional), instead of normally flat, or 2-D. We’re used to objects having a shadow. Shadows have a darker value than their objects. These two adjacent values contrast each other.

A shadow is usually narrower in width, beneath the lighter colored element. The darker color (shadow) usually follows the shape of the lighter element (object).

Shading is the darker color above (on top) the lighter element. Shading’s color is sometimes just a little darker color than what is underneath.

Drop shadows are darker values below (and outside) of the lighter element (to simulate the object casting its shadow on another object). Drop shadows follow the shape of the object that casts the shadow.

A dark shadow beneath a lighter element, pushes away the element. This is because of the greater contrast. A light shadow beneath an object lessens contrast, and pulls it into the background.

When coloring a drop shadow, use not the same color as the element casting the shadow, but a darker color of the background hue. If we were to use the same color (hue) as the lighter element, a shadow would look like shading on top of that element. Shadows in real life, are only darker colors of backgrounds (with desaturation).

Shade

For shading on top of an element, use a darker color (hue) of that element. Hexadecimal numbers will decrement for that color. An aqua element, 55cccc, can have its side shaded with 48c5c5. The original aqua decrements by 7, for red, green, and blue.

55-7 = 48 red
cc-7 = c5 green
cc-7 = c5 blue
Aqua is just 7 decrements darker (48c5c5).

Drop Shadow

Under the original aqua (55cccc) object, cast a drop shadow onto a white background. Darken the white (ffffff), getting closer to gray (ededed). White decrements (desaturates) by changing red, green, and blue to the same lower number. Darkening the aqua color would not give a drop shadow, but would appear to shade the aqua element’s border.

Highlight

Lighten an element’s color to show light hitting the highest part. Raise every number (red, green, blue) of the aqua 55cccc to 66dddd. Give the the lighter hue the raised part’s shape. This lighter color will follow the contour of the part of the element that’s supposed to be closer to the light source (usually at the opposite side of the shade).

Contrast

With digital coloring, it’s really all about noticeablity. Colors become less noticeable when they get closer to gray, closer in hue, and equal in shade.

Contrast is basically the difference between colors’ brightness. More noticeable are lighter versus darker, also saturated versus desaturated, hues. Even the most saturated hues, if they’re next to each other, can cancel out each’s noticeablity, and fight for the viewers’ attention.

Another contrasting element is edges. A sharper (more defined) colored edge contrasts more with its background. A softer (less defined) edge blends better, and is less noticeable.

Likewise, sharp edges make objects appear to have a reflective texture. Soft edges appear dulled or transparent. Moreover, curved corners are less noticeable, and sharp angles give more definition.

Digital web color does have many considerations. Thankfully, ample online help is available. Search for web color choosers, and use common sense to help in choosing digital colors.

by Scott LeMot.

Article Source: http://EzineArticles.com/?expert=Scott_LeMot