Web Design & Development

[ Web Design & Development Topics ]

Color Usage

A Bit About Color

In nature, light creates the color. In the picture, color creates the light. -- Hans Hofmann

Specifying Color

One thing to know right away is that there are a number of ways to specify the same color. Red, for example, could be specified as:

1. red
2. #FF0000
3. rgb(51, 51, 255)

Each means basically the same thing, it is just a different way of writing them. the text version, such as "red" though only work with standard colors. The other two can be used to specify almost any color you want.
Addressing Color Blindness

Addressing Color Blindness

Approximately 10% of all males have color vision deficiencies (aka, color blindness). The most common is the inability to distingusih between red and green hues. Learn more at http://www.colorcube.com/illusions/clrblnd.htm

Try Web pages in a color blindness checker at http://www.vischeck.com/vischeck/vischeckURL.php

Try images in a color blindness checker at
http://www.vischeck.com/vischeck/vischeckImage.php

Some design tips relating to color:

• Exaggerate lightness differences between foreground and background colors
• Use contrasting colors
• Use lightening with caution

Learn more at http://www.lighthouse.org/color_contrast.htm

Color Palettes

• Color Schemes (listed thanks to Josh Bercy)
  http://wellstyled.com/tools/colorscheme2/index-en.html
• Color Schemer Online
  http://www.colorschemer.com/online.html
• Slayer Office Color Palette
  http://slayeroffice.com/tools/color_palette/

Size and Texture

Size is simply the relationship of the area occupied by one shape to that of another. Texture, on the other hand, is the surface quality of a shape. Texture can be physical (tactile) or visual: rough, smooth, soft, hard, glossy etc.

Visual Texture is the illusion of physical texture created with the materials you use.

Visual Texture

• Graphics displayed on the web will only exhibit visual texture
• Contrasting the coarse texture of the bricks with the regular pattern of the iron roof keeps the surface of this work interesting.
• Smoother areas of relief provide a resting place for the eye and stop the composition becoming too cluttered and confused.

Color in terms of HSV

In HSV, any color is decomposed along three axes

• Hue: a pure rainbow color from the color wheel
• Saturation: the proportion of this pure color vs. colorless gray
• Value (also called luminance): the overall brightness of the color

Color or Hue

• The color wheel is based on the three primary colors ( Red, Yellow and Blue ) placed evenly around a circle.
• The secondary colors (Green, Orange and Violet) are mixtures of the two primaries they sit between.
• The tertiary colors fall between each primary and secondary. Between yellow and orange, for example, is yellow orange, between blue and violet is blue violet and so on.

"Drawing is of the spirit; color is of the senses." - Henri Matisse