Website Colors

White space, fonts and graphics can all affect engagement with websites, but there’s another factor that’s especially powerful: color. Keep reading to learn more about how color choices affect perceptions of websites, and what can be done to make online destinations as impressive as possible for the people who visit them.


Yellow and Red Cause Strong Emotions

When designing or viewing a webpage, your eyes are probably initially drawn to the respective colors because you think they look attractive, ugly or somewhere in between. People who study color psychology say certain hues may affect us more than we realize, because they encourage specific emotions. Red and yellow are two colors that usually incite powerful feelings.


Red is associated with love and warmth, while yellow triggers cheeriness when used carefully. Consider how yellow is also used to symbolize caution or attention, especially on road signs. With that in mind, you might want to include yellow in a section of a website that features a call to action. It’s the most visually fatiguing of all colors, so when using it, try to balance your approach by using the hue sparingly.


Purple Is Associated With Royalty

Since ancient times, people have thought of purple as a hue related to royalty. The reason why it got that reputation is because the ingredients used to make purple dye came from a rare kind of sea snail. In some cases, a pound of purple wool cost more than people made in a year, so it’s easy to understand why only royal subjects could afford clothing or other items that featured that color.


Even if you’re not familiar with the color’s history, you may unconsciously relate it to royalty, especially if you’ve seen kings, princes and similar characters wear it in films or television shows.




As far as websites go, purple is frequently used on the official website of James Madison University, an academic institution in Virginia. Once you learn a bit about the school, the use of purple makes perfect sense, and not just because purple and gold are the university’s official colors. Its sports teams are called the Dukes, and the mascot is the Duke Dog. Fittingly, the beloved mascot wears a crown and a purple cape.


Blue Could Help People Feel at Peace

Color psychologists have also discovered blue is a calming color. On a related note, scientists at Michigan State University found that when people looked at natural blue spaces, such as oceans, they experienced reduced psychological distress.


Blue is the color of harmony and reliability, so it would be a good style guide to utilize for companies who want to convince their audience that they’re trustworthy. Consider adding similar shades of blue across your whole site for the full effect.


Pink May Generate Fond Memories of Youthful Innocence

You can probably remember carefree weekends and summer days from your childhood, when it seemed like your biggest worries were figuring out how to make the best use of your allowance money or how to stay occupied on rainy days. Pink is often a color web designers use to spark those happy memories, because it’s a color that signifies innocence, youth and sometimes, feminism.




Take a look at this website for an online candy store that also has a physical location. Even if you don’t have a sweet tooth as an adult, this whimsical color scheme – which features lots of pink, and probably not by chance – is enough to make your mouth water as you recall blissful visits you took to the neighborhood confections shops as a kid.


What Not to Do When Choosing Colors for Your Website

You’ve just learned several reasons why certain colors may help you get desirable results. For the purpose of thoroughness, it’s also necessary to briefly look at things to avoid when picking a website’s color scheme.


Think of readability, and how particular colors could help or hinder that aspect. Light-colored fonts on light backgrounds aren’t ideal, because neither of the colors gives the visual pop that’s needed to capture attention.


Avoid very harsh colors, such as neon hues, especially when designing menus or user interfaces. As was evident in the above example of the candy store, bright colors are excellent at conveying certain things if used carefully. In that example, pink and green were two of the main colors, and they complemented each other enough to give pleasant results.


It’s clear that colors have psychological principles behind them. The associated insight could affect the experiences you have with the websites you see, or the reactions others have to the websites you build. Recall the examples above and take the tips to heart while browsing the web and getting inspired.



Lexie Lu is a designer and writer. She loves researching trends in the web and graphic design industry. She writes weekly on Design Roast and can be followed on Twitter @lexieludesigner.