Advertise here with BSA

Creating the perfect color palette for each design project can be a time-consuming task. We might settle on a color scheme, only to change our minds five minutes later.

Sometimes we’ll feel like we’ve found a solid set of colors, but don’t know how to make them work together in the project we’re working on. Sometimes it seems like we don’t have enough colors or too many colors or the wrong combination of colors.

How is it that some web designers seem to be able to come up with the perfect color combinations in the work they produce? How much of a role does choosing the right color palette play in web design?

We’re going to explore some of the most popular colors being used in modern web design in the hopes of understanding why certain colors are used for particular websites. At the end, we will conclude with a list of tools to help you select colors.

Why Color Matters

Color is a strong influencing factor in design and in the world around us. Each color has its own meaning to us based on culture, education, personality and a myriad of other factors. Thus, colors can strongly influence us in subconscious, natural ways.

Some people may trust a company more simply by their brand colors. Certain emotions and feelings can be evoked simply by seeing colors, such as "danger" for red, "cleanliness" for white, or "tranquility" for green.

An experienced designer knows that choosing the right colors isn’t just essential for aesthetics; colors can be used as a tool to convey a certain message.

When Color Doesn’t Matter

Most of us intuitively know why color matters, so before each design, we painstakingly develop a color palette, and then we adjust it, and then we adjust it some more.

We obsess over our color selections ad nauseam. Sometimes, the "perfect" color or set of colors never feels right. It needs to be a bit darker or a tad bit lighter or more saturated and a bit more blue.

Before we know it, it’s midnight (and we’ve been up since 6:00 AM) and we still haven’t come up with a color scheme.

It’s at this point when color doesn’t matter so much; the point in which we lose productive time over picking colors instead of just deciding and tweaking later if need be. It’s when we strive for perfection that picking colors becomes an act of futility because we find that there’s no such thing as a perfect anything; we’ll always find a flaw in our decisions.

Usually, your first instinct on color selection will be to get as close to "perfect" as you can get. Your instinct is smarter than you think, so trust it and see where it takes you.

The goal, then, is to put together a color palette based on intelligent decision from what you know about the design project, and then work with it.

Color Is Powerful

The hue, saturation, darkness, lightness of a color can affect its intended meaning and message. And if color can mean something, then it has the power to influence those viewing it.

If you would like to learn more about the meaning of popular colors, read A Look into Color Theory in Web Design.

Next, let’s go over some popular colors in web design, as well as briefly discuss their commonly held meanings in western culture.

Red Web Designs

Bright red gets attention pretty fast, and it can be used in elements at top levels of the visual hierarchy in a design.

In terms of visual weight, some studies conclude that it’s one of the heaviest colors.

However, because red is such a powerful and heavy color, it shouldn’t be overused, because it can invoke a sense of urgency, and in most situations, you don’t want to make the viewer constantly feel this way.

Some believe red can enhance metabolism, increase blood circulation and stimulation.

Whether by culture, standardization or psychology, red is oftentimes used in situations warranting your attention, such as in stop signs, ambulance and police sirens, stop lights, fire trucks, and so on.

Red is used in many fast food restaurants because it’s believed to stimulate appetite.

Café Rouge

The red website of Café Rouge below works well as the site is food-related, and as stated earlier, red has been credited with being able to increase appetite. The darker red also creates a sense of luxuriousness, passion and quality.

Carrot Media

Sharp lines and creative angles make the Carrot Media web design more intense. The strong intensity of these features complements the bright red used throughout the majority of the design.


Using red may make users more actionable as highlighted in the LBi web design. The bright color creates strong emotions and the type of heightened feeling that can make users move. This design is for a marketing and technology company that focuses much of their content around "powerful" marketing methods and highlighting case studies indicating strong change in their client’s lives.

The darker red of the design below isn’t quite as intense as some of the ones above, although it’s still powerful. A set of productivity tools for developers are featured in the design; since red can indicate action, this site’s usage of red symbolically is effective.


RedWeb is a design agency that provides practical design solutions. The company focuses on what a design needs for efficiency and usability. Red for their design works well for the company’s straightforward, productive approach to design.

Orange Web Designs

Orange is like a muted form of red, giving energy but not at such an intense level. Orange is great for creative designs, or designs that need to give off a very positive and active energy.

Orange is often seen in web designs that attract a younger audience. It’s also great for portraying any emotion in design that require energy, as well as alertness and happiness. You may notice that many productivity apps use orange as an accent color.

Copimaj Interactive

The Copimaj Interactive design is very energetic, and uses orange to help convey that theme. Another thing to note is that the brand surrounds technology, and would thus do well if they appealed to a youthful audience.

HALO Creative Agency

This website uses hints of orange to help create a sense of motion and energy. The orange compliments the young, energetic, and creative feel the company is going for.

Eighty 8 Four

Eighty 8 Four is another creative agency using the same principles to attract the right kind of clients. Their work is targeted at clients who want fresh, innovative, energetic and useful designs. The darker orange gives a more professional feel while still maintaining the playfulness.


Being such a bright color, orange works great as a contrasting color with a dark color like black, as can be seen on this website. This company site also tries to focus mostly on creative and innovative methods — something orange is great at representing.

Citrus SEO

"Citrus SEO" was branded around the theme of bright and energetic feelings, and the Citrus SEO website uses orange to enhance that point. We often think of orange when thinking of the word citrus, so the website color matches the brand well.

Yellow Web Designs

As we move to yellow, we can see that because the color is still close to orange, at a psychological level, it retains many of the same properties. Yellow can mean energetic and youthfulness. Yellow is a happy color, and creates feelings of energy without stress or alertness.

Like orange, yellow can be used in designs that require a positive energetic feeling.


Below, on the ESPIRA website, yellow is used for a creative portfolio, and gives off the impression that working with this designer would be a pleasant experience. There’s a lot of happy and positive energy in this web design.

Strange Native

Yellow can be a very bright and bold color, but the Strange Native website design uses a pastel yellow for a very happy and carefree feel without being too intense. The feel of the color works well with the minimalist approach to the layout as well.

Gareth Dickey

Like orange, yellow makes black or dark colors stand out well as shown on this site. It can even make colors of other hues and intensities more vibrant. The content is really focused in this design and gains more attention by simply being placed against a yellow background. Also, the design gives off a great impression for this designer — youthful (innovative), creative, and happy (easy/pleasant to work with).

Showcase of Undergraduate Research

On this subsection of the University of Central Florida site, the yellow in the middle of this page brings attention right to that point, and helps the text and imagery in the middle of it stand out more. Hints of yellow throughout the site provide the overall design with a unique feel, while still maintaining professionalism and a light and innovative feeling.


Youthful and bold — exactly the impression BeerCamp needs to make. The play on different shades of yellow creates a lot of good contrast in the design as well, and while it may all be yellow, the various shapes and shades make it interesting.

Green Web Design

Green in design is a safety net of colors. Because it’s so closely tied to nature, it’s very calming and relaxing. Nature-inspired websites have been a trend in recent years, and while there are many colors that can come from nature — earth tones — green is the most popular.

Green in almost any shade can be calming — even in the brightest shades. Brighter shades act like yellow — happy and playfully energetic. Green can also convey energy, yet in a more calming way than yellow.

Some great types of websites that would benefit from a green color palette are websites that relate to health, the environment, self-improvement or growth.

Acupuncture Wellness Solutions

Note that this website is related to health, and nature is very closely related to health. Also, acupuncture is an alternative healing method, that is also more natural than modern healing methods. The website above gives off a calming sense of wellbeing and encourages self-growth.

Clear Left

Clear Left uses a bright green to create an energetic and forward-thinking appeal. The energetic green color helps create that tone, while using such a bright shade implies positivity and creativity.

<h4><a href="">Lesy