Color Families and Pallettes

Set the Mood of Your Site with Warm, Cool, and Neutral Color Palettes

Tertiary Color Wheel
Color Wheel with primary (1), secondary (2), and tertiary (3) colors. Lapiplek/Wikimedia Commons

One of the best ways to change the mood of a design is to change the color scheme. But if you’re going to use color to affect the mood, it helps to understand color families. Color families are a simple division 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 are going to have an overall feel of warmth, coolness, or neutrality.

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 are created using just the two colors: red and yellow. These are primary colors and combine to make orange. You do not use any cool colors in a warm palette when mixing colors.

Culturally, warm colors tend to be colors of creativity, celebration, passion, hope, and success.

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, forests (trees) and night. They bring out a feeling of relaxation, calm, and reserve. Designs that use cooler colors are often seen as more 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 must mix some red or yellow to blue to get green and purple. This makes green and purple warmer than blue which is a pure cool color.

Culturally, cool colors tend to be colors of nature, sadness, and mourning.

Neutral Colors

Neutral colors are colors made by combining all three primary colors together to get brown and the two colors 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 a lot of the feeling that is evoked is from the warm and cool colors that may highlight them. Black and white designs tend to be seen as more elegant and sophisticated. But because these colors are so stark they can be very hard to create effective designs.

To create a neutral palette you mix all three primary colors together to get browns and beiges or you add black to a warm or cool color or white to make the colors grayer.

Culturally, black and white often symbolize death and in western cultures white also represents brides and peace.

Using Color Families

If you are trying to evoke a mood with your design, color families can help you do that. One good way to test this is to create three different palettes in the three 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 use in the different color families:


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


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


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