This is a guest post submitted by a member of the Crayon community. Thank you!
Crayon has a database of more than 100,000 landing pages that range from university websites to personal blogs to marketing lead capture pages. Our platform has an extensive library that offers a plethora of design ideas. This post is the first in a series analyzing the most popular landing pages of 2016 based on votes & saves by Crayon users. This first post focuses on color.
As anyone will tell you, choosing the right color for any kind of project is a challenge. In the case of webpage design, choosing the right color for the right audience at the right time is an even more daunting exercise. Not only do you want to make sure your color choice conveys your webpage’s mood or philosophy, it must also speak to your target audience and grab their attention immediately.
While you can find a plethora of information on how to choose webpage color combinations on the internet, we’ve decided to make things simpler for you and give you a starting point in this article. We’re going to list the top color families that were used in the top 500 landing pages of 2016, and we’re going to review the top 5 based on usage and popularity across industries.
1. The Most Prominent Colors
- There were 16 primary color families that were used across 25 industries on our list: Black; Blue; Brown; Gold; Green; Grey; Orange; Purple; Red; Sienna; Silver; Sky; Teal; Turquoise; Violet; and White.
- Teal was used by 20% of webpages in our dataset, making it the top used color family of 2016. Grey came in second at 16%; then Black at 15%; Sienna at 14%; and Silver at 9%.
- Grey was used by 17 out of the 25 industries, making it the most used color across industries. Sienna came in second with 14 industries, while Teal was third at 13 industries. Black and Silver were tied at 11 industries each.
- Sienna was used by the most popular webpages in the dataset. In other words, the webpages that received the highest popularity scores (total votes + total saves) had sienna as their dominant color. It was followed by teal, black, grey, and silver.
- The least used colors were red (1%), violet (1%), and blue (0.34%).
2. The Top Color Choices by Industry
- It was the top color within the industries that utilized it as a dominant color.
- It was the top choice for the B2B Services, Internet, Legal, Education, Marketing, and Software industries.
- It was in the top three choices for all industries on the list except Internet.
- It was the top choice for construction and consumer services.
Sienna was the top choice in Education, Consumer Services, Internet, and Media.
Black was the top choice in B2B Goods, B2B Services, Internet, and Non-Profit.
Silver was the top choice in Software, B2B Services, and Entertainment & Lifestyle industries.
B2B Services, Marketing, and Software industries were the most dynamic in their color choices, using 12 of the 16 colors in our dataset.
Marketing was the only industry on the list that used violet, using its bright hue for impact rather than emotional connection. These pages were simple: white text, logo, and a lead capture form.
3. How Were the Colors Incorporated?
Teal (Hex color #008080):
- Teal is a mix between blue and green. According to internet searches on color psychology, it is a perfect expression of blue’s calmness and serenity, and green’s creativity and connection to nature.
- Blue, surprisingly enough, was used in less than 1% of webpages. It is regarded as a “safe” choice by most webpages because it is liked by both men and women and across cultures. It seems that teal’s welcoming vibrancy has replaced it as the go-to color.
- Teal was usually paired with complimentary blues and greens, and used brightly colored elements in oranges and yellows to accentuate action items and key messages.
Example Page: https://www.crayon.co/page/14934578/
Grey (Hex color #808080)
- Grey was the second-most used color on the list and with good reason. It is a neutral color that generally projects a sense of formality and elegance. When darkened, it is dramatic, and when lightened, it is soft and illuminating.
- These webpages included black, white, or varying gradients of grey as secondary colors, while the action elements stood out in reds, greens, or oranges. Red was particularly elegant; the grey tones softened red’s intensity, while red provided an energizing splash of color. Grey’s emotionlessness seems to be a good way to take advantage of red’s strong hue in a way that does not overwhelm the page or the visitor.
Example Page: https://www.crayon.co/page/21963089/
Black (Hex color #000000)
- Black is another neutral color that was popular on the list. This a powerful color that radiates strength, sophistication, leadership and expertise.
- The webpages that used black tended to be impactful and full of action-oriented language. These pages projected an aura of
- Text and secondary colors were usually a grey, white, or silver, but the action and messaging elements were vibrant greens and orange.
Example Page: https://www.crayon.co/page/39797206/
Sienna (Hex color #8b4513)
- Sienna is a brown, earthy shade that feels wholesome and natural.
- These webpages made a concentrated effort to connect with directly with visitors; images of people were used to establish this intimate feeling.
- The brown tones were emphasized by the lower-key shades of grey and silver, while the text was always in white. The action elements kept the natural theme with their bright rusts (a mix of brown and orange) and earthy greens.
Example Page: https://www.crayon.co/page/9648021/
Silver (Hex color #C0C0C0)
- Silver is a softer version of grey. It is elegant and formal, just like its stoic sibling, but its lightness makes it a shinier and light-hearted option. Silver is popular in the corporate world and amongst men and women in positions of responsibility because it maintains their formality but softens their image with an air of accessibility.
- Silver was the most versatile because it was paired with a wider variety of colors. Text and design elements were in shades of complimentary hues of blue, white, black, and teal. Blue and teal contrasted beautifully with silver, making them a popular combination.
- Like sienna, most silver webpages had images of people. These pages felt the most intimate as many of the pictures were close-ups of individuals happily engaged in an activity. This personal connection is probably why the education and consumer services industries used sienna the most.
Example Page: https://www.crayon.co/page/9648019/
- Teal may be the modern alternative to blue. It is serene while connected to nature and the environment (through its green parent). It is an easy choice across industries.
- Action elements were predominantly green or orange. Red was sometimes used, most especially in grey and silver webpages.
- Grey is the most neutral color
- Sienna and silver are strong choices if you want to portray a feeling of intimacy and connection. A lot of these webpages included images of people, and silver pages were especially versatile when paired with a variety of color.
- B2B Services, Marketing, and Software websites are more apt to take use unexpected colors. Between them, they also used violet, turquoise, purple, gold, green, and orange.