Content

Contact

Contact OakenDoor to request a phone or in-person consultation, services, or more information by filling out and submitting the following form. All information submitted is strictly confidential.

Name:

Email Address:

Your Message:

Downloadable Whitepaper

Making Color Choices for Web sites (PDF)

Color Wheels


Links

Color Psychology

Everyone is familiar with color, yet it is difficult to define the true impact of color on eye, brain, and mind. Although color is very real and concrete, we are compelled to reach for abstract terms when we want to grasp its inherent nature.

We talk about color when we have a particular sensation of the brain, caused when light radiation of a certain wavelength reaches our eyes. This definition is built up from two parts that are respectively quite different. The first one is of a psychological nature. It deals with the way the sensation of color is processed by the mind. The second one is merely the eyes detection of physical radiant energy. So, color is in fact a psycho-physical phenomenon. It interrelates both a psychological and physical process.

Artists and designers have a wealth of knowledge concerning the complicated interaction of color: how colors are affected by the environment in a composition; how they can create harmony, contrast and rhythm. Color can be talked about in subjective terms: hue, saturation, and brightness. The terms hue and saturation are collectively referred to as the color's chrominance. The hue of a certain color is its intrinsic nature. When we observe a colored surface, hue is that attribute of visual sensation that makes us say a surface is red, or green, or whatever color.

The saturation of a given color is expressed in chromatic color intensity. A vivid color is highly saturated, as opposed to a pastel color of the same hue and with the same brightness. The colors of the rainbow have the highest saturation a color can ever have, whereas the complete absence of saturation results in a shade of neutral gray, regardless of the hue. The shade of gray depends upon the brightness. Brightness relates to the sense that a color appears to be reflecting more or less light energy. We talk about bright colors, in contrast to dim colors. Black is the complete absence of brightness for any hue. Every horizontal cross-section of the cone is a color wheel over which the different hues are spread The highly saturated colors are located on the circumference of the wheel. Moving along the radius towards the center of the wheel, the saturation of every hue decreases, with a certain shade of gray as absolute minimum. The brightness, at last, is represented by the height of the cone. The apex corresponds to the absence of any brightness, thus black. The base of the cone is the color wheel that corresponds to the highest possible brightness.

How Can I Get My Page to Look Better?

Following is a list of tips to help you improve the look and feel of a Web page:

  1. Use fewer colors. A limited palette is a good palette. Think of Coca-Cola - a powerful graphic with very few colors. The most potent colors are red, black and white. Red in particular seems to work as a retinal trigger (in our culture, red causes us to stop, be alert, and take notice), while white is a readable background, and black the most readable text color (later on I discuss the importance of choosing a font based on the type of media delivery). The Coca-Cola logo is red, black, and white. Is this a Coincidence? Ultimately, you can choose any colors you like; just understand that, the fewer you choose, the more your page will cohere. If you build your color palette from the 216 web-safe colors, that's a plus, since your page will look better on most computers. (Lots more on this below.) As a bonus, .gifs rendered in the same color palette will generally load faster and will not dither on most machines, even low-end machines. Using a limited color palette can also help unify your entire site. Look at most good sites and you'll see they stick to a few well-matched colors.
  2. Use a few images well rather than many images randomly. That goes double for animations. If you throw pasta at the wall, some of it will stick - but the result is a sticky wall.
  3. Use a few images well rather than many images randomly. That goes double for animations.
  4. Less is more. Tread lightly with animations, scrolling text, java clocks and other gizmoids. When you learn a new trick, the tendency is to throw it into the mix. Fight that urge! I add a lot of animation and scripting to my site because I want people to see my diversified talents in designing Web pages (just in case you want to hire me).
  5. Match your HTML colors to the colors in your images. The result will be a more coherent page. If you're creating everything from scratch, color matching is pretty straightforward. But what if you're working with images you did not create? (For example, images from a client; or digital snapshots from a road trip.) Not to worry. You can use any number of programs, including JASC Paint Shop Pro, Adobe PhotoShop, and Adobe Imagestyler, which contain the "eyedropper tool" for selecting the color from an unknown color source.