Use Color Families and Palettes for Your Site GA S REGULAR Menu Lifewire Tech for Humans Newsletter! Search Close GO Software & Apps > Design

Color Families and Palettes

Set the mood of your site with warm, cool, or neutral color palettes

By Jennifer Kyrnin Jennifer Kyrnin Freelance Contributor University of California University of Washington Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. lifewire's editorial guidelines Updated on October 28, 2019 Tweet Share Email Tweet Share Email Design Graphic Design Photoshop Animation & Video 3D Design 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 colorsCool colorsNeutral 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 Was this page helpful? Thanks for letting us know! Get the Latest Tech News Delivered Every Day Subscribe Tell us why! Other Not enough details Hard to understand Submit More from Lifewire A Designer's Guide to Understanding Colors How to Change Theme Colors in Google Slides How to Design With Blue and Complementary Colors How to Change the Color of Your Apps on Android How to Identify Aftermarket Car Stereo Wire Colors Learn About Adjacent Colors on the Color Wheel A Beginner's Guide to Contrasting Colors What Color Is Plum and What Is its Symbolism? A Designer's Guide to the Color Dark Blue Creating and Using Custom Brushes in Photoshop Elements Navy Blue: So Dark It's Almost Black The Color Cobalt and How Is It Used in Publishing Color Temperature and Your TV The 10 Best Instagram Filters for 2022 How to Change the Color of Text Bubbles on Android All About the Color Chartreuse and Its Use in Design Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookies Settings Accept All Cookies