Color Families and Palettes

One of the best ways to change the mood of a web page design is to change the color scheme. If you’re going to use color to affect the mood, it helps to understand color families and what they represent. Color families are divisions of the color wheel into three types of colors:

• Warm colors
• Cool colors
• Neutral colors

While it is possible to have a design that uses colors from all three families, most designs have an overall feeling of warmth, coolness, or neutrality.

Energize With Warm Colors

Warm colors include shades of red, orange, and yellow and variations on those colors. They are called warm colors because they evoke a feeling of sunlight and fire — things that are warm. Designs that use warm colors tend to be energizing and uplifting. They imply passion and positive feelings in most people. Warm colors tend to be colors of creativity, celebration, passion, hope, and success.

Warm colors are created using just two colors: red and yellow. These primary colors combine to make orange. You do not use any cool colors in a warm palette when mixing colors.

Relax With Cool Colors

Cool colors include shades of green, blue, and purple and variations on those colors. They are called cool colors because they evoke a feeling of water, trees, and night. They bring out a feeling of relaxation, calm, and reserve. Designs that use cool colors are often seen as professional, steady, and businesslike.

Unlike warm colors, there is only one primary color, blue, in the cool colors. So to get other colors in the palette, you mix some red or yellow with blue to get green and purple. This makes green and purple warmer than blue, which is a pure cool color.

Neutral Colors

Neutral colors consist of brown, which is a combination of all three primary colors, and the two remaining colors: black and white. The more muddied or gray a color is, the more neutral it becomes. Neutral designs are the hardest to define because much of the feeling they evoke is from the warm and cool colors that influence them. Black and white designs are considered elegant and sophisticated, but because these colors are so stark, they can be challenging when creating effective web designs.

Another way to create a neutral palette is to add black or white to a warm or cool color to make the color grayer.

Using Color Families in Web Design

If you are trying to evoke a mood with your web design, color families help you do that. One good way to test this is to create different palettes in the three color families and compare your design using all three. You may notice that the entire tone of the page changes when you change the color family.

Here are some sample palettes you can try with your web page in the different color families:

Warm

• #cc333F, #eb6841, #edc951
• #ffd573, #ff773d, #f73e3e
• #ffe545, #fefbaf, #c2a34f, #fbb829
• #ffab03, #fc7f03, #fc3903, #d1024e

Cool

• #69d2e7, #a7dbd8, #e0e4cc
• #2a044a, #0b2e59, #0d6759, #7ab317, #a0c55f
• #8ca315, #5191c1, #1e6495, #0a4b75
• #8fbfb9, #6493a7, #bddb88, #e0f3b2, #eefaa8

Neutral

• #d9ceb2, #948c75, #d5ded9, #7a6a53, #99b2b7
• #e6cba5, #ede3b4, #8b9e9b, #bd7578
• #d8d0c8, #d2d0c8, #cbd0c8, #c4d0c8
• #182009, #464b35, #757661, #d1ccb9