HTML & CSS Direct Study

Concepts of Color

Colors are often associated with thoughts, feelings, emotions, and reactions.


Color Explanations:

Warm Colors:
Colors that are warm give feelings of positive, energy, or passion. Colors such as reds, oranges, and yellows that are often seen in sunrises, sunsets, fires, or fall colors often are inviting to people and are commonly used in web pages.

• Red -- It a very broad color with many meanings. Associations can be made with red ranging from violence to love, importance to danger, and mean something completely different in other worlds. It is because of the last fact that we must carefully watch what colors we use. Red is a very vibrant color that is great for small pieces or accents, however can be quite overwhelming in larger quantities.
  
• Orange is a step down from red. It is not quite as vibrant, however it has many very important meanings. Orange can be associated with autumn with the leaves changing colors, or with fruit and health. This is a very inviting color that may be a great alternative to the overwhelming Red.
  
• Yellow Yellow is the brightest color of all the warm colors and can have the most energy involved. Similar to red, yellow has a range of meanings: from cowardly to hope to mild danger. Using yellow in a web page can bring many different feels to a page such as being cheerful and happy or even a more neutral color for children.

Cool Colors:
Colors that are very opposite of warm colors, however in order to develop the cool colors you have to mix them with warm colors. Cool colors bring a sense of calm involving nature or water and can range to include being professional and colors of night time.

• Green The range of meaning for green begins with new beginnings and growth, however green can also turn into jealously or envy. Green can mixed effects like calming and energizing, however using green within a design may help to balance out the overall look of the page.
  
• Blue The meaning of blue do not come primarily from the color, but the different shades or hues of blue. Darker shades of blue are considered to be stronger and more stable. Blue can be calming, refreshing, and friendly, however it can also mean sad, depressing, or "blue"
  
• Purple is commonly associated with wealth, royalty, and luxury. Lighter shades of purple can be soft and romantic and can often be used for children or toddlers. However darker shades lean toward a wealth and luxury feel.
  

Neutrals:
Neutrals can be used as both background designs or primarily layout designs. By adding accent colors to the page the neutrals tend to be affected and can be developed and sophisticated.

• Black is one of the most complex neutral colors. Many meanings are derived from black in a good end black can show elegance, organized, power, or formal, however it can also be associated with darkness and mystery. When using black it is always important to consider the content of the page and how this page may be viewed. Black can symbolize mourning(death), Halloween, or can make a well designed and organized page.
  
• Gray can be on either side of the spectrum. Darker grays often can be a replacement for black and can show mourning, professionalism, and formality. On the other hand lighter grays can be a replacement for white and are associated to be modern and sophisticated. By adding colors to the grays a web page can really bring out elegant designs.
  
• White is normally portrayed in a positive light. White can be used as a backdrop accented by great colors. Meanings can range from angels to brides & weddings to purity and cleanliness. White is a neutral that can be used frequently and spiced up with surrounding colors.
  
• Brown is a very earthy color that can provide the feeling of stable environments, dependability, and reliability. When using brown it can be set as a background with other surrounding colors or can be used to illustrate differing textures. While using brown in a web page it is important that it does not make the page seem dull or boring.
  
• Tan/ Beige takes on the characteristics of the page around it. This color can be considered cool or warm so it can be used in many different areas and elements. By adding colors an overall feel of the page can change depending on if the colors are cool or warm. On a web page it is common to use these colors as background and paper like textures, however beware that too much and not the right layouts can cause this color to be dull.
  
• Cream/Ivory if the goal of the web site is to be cool and elegant these colors will add both feelings to the page. As a result of the coolness of the color both these colors can evoke a feeling of history. Since white can cause an abrupt layout and can be hard to blend these colors can replace white and help smooth out the overall layout.
  

Color Concepts:

• Hue is a basic term that describes the objects color. By saying that an object is blue, red, or green is to describe its hue. Hue can be very important to your web site because colors convey messages and meanings to the viewers. As described above it is important to carefully choose colors so that your message is properly received. Some hues may be more commonly used such as red, however other hues are not as commonly used like green (but they stand out more). When designing a web site you can mix hues in order to create different moods.
  
• Chroma describes the overall intensity of the color in comparison to white. The purest form of Chroma is a color with no black, white, or gray. Adding these colors reduces the Chroma. When using Chroma in a web site be sure to vary the chroma of the hues so that the page is not overwhelming. It is best to use Chroma in moderation or by using the same hue throughout the page with different levels of Chroma.
  
• Saturation is often compared to Chroma, but has a different context to it. The appearance of how hues are seen in light describes the saturation. One can often describe saturation in terms of weak, strong, pale, or pure.
  
• Value use a high and low scale in order to describe the "lightness" of a color. The scale ranges from black (lowest value) to white (highest value). By using a variety of different values in a web site a visually appealing page can be creates. Different values can also show differing sections within the page without creating abrupt lines.
  
• Tones are created when gray is added to the hue. By adding gray to the hue it creates a duller version of the pure hue, these are commonly used to change the feel of the web page. By using tones the designer can create a vintage, sophisticated, or elegant look. When tones are used throughout a page you can add gray sections that will intensify the tones used.
  
• Shades is created when black is added to the hue. When adding black to a hue you create a darker version of the pure hue. Different affects can come from using shades with tints, textures and varying other elements. The term shade is commonly misused to describe other elements.
  
• Tints are exactly the opposite of shades in which you would add white in order to create lighter version of the hue. Pastels are and example of tints. Tints are commonly used to create a more feminine, vintage or even used on toddler or baby sites.