Color Psychology of Top News Websites
How to

Color Psychology of Top News Websites

You’ll certainly find at least one news website among the bookmarks of an average internet user. Standard news sites, online versions of famous newspapers – people read all of them, ‘cause want to keep the track of events. When it goes about the choice of the favorite one, there are 3 points that affect the user’s decision: design, aesthetics and usability. You’ve definitely seen the compilations that highlight most popular trends of news-related sites, their usability, but today let’s examine them from the viewpoint of color psychology. In the focus of our attention are the following questions:

What are the most popular colors in news website design?

How do they affect the user’s perceptions of a site?

What are the color palettes of the top news sites?

What does the right choice of colors bring to the news website?

At first, let’s mention most commonly used colors in the designs of news sites. Looking through a number of such sites, you can find all of them. Here they are: the colors and their meanings/associations in the context of news sites.

Black is for formality and seriousness.

White is about newness and simplicity.

Red stimulates people’s interest.

Blue makes the viewers trust in what they read and see. It is associated with professionalism.

Gray is mostly for background of these sites and it results in better visibility.

Green has a calming effect, gives fresh and clean look.

Tertiary colors:

Yellow is considered to be most attention-getting color.

Orange makes viewers feel excitement. With other colors it helps draw attention to some points.

As you see, the choice of colors matches main ideas of each media site – communicating the latest events in a trustworthy manner (black, white gray, blue colors perform this function), focus attention on the most important of them (red, yellow, orange colors) and has an impact on the viewers (for example, red color in headings, on buttons). These sites should show a calm tone and set for serious perception of information – all this can be easily achieved due to the usage of the mentioned above colors. Along with the clean well-structured design it results in a great effect on the readers. The latter trust the information provided by online resources and return there over and over again.

And now let’s see the examples of top news websites and their color palettes.


huffingtonpost - Computergeekblog

A good example of legible layout with soft, neutral colors where green is a primary one (the title of the site and the main menu) sets up a serious and calm tone. Sharp typography above the top slider calls attention to the latest news. Most headings feature large black typography and categories are shown on tiny multicolored boards.

The Huffington Post -Computergeekblog


nytimes - Computergeekblog

Here you can see conservative and thus cool approach to online media resources. This design is clean in spite of a huge amount of content. Such effect is achieved due to simple tricolor scheme: black, blue and white. No other tints that can clutter the layout and obstruct the user’s perception of the information.



reuters - Computergeekblog

This design engages the readers with the composite color scheme of the header. Black, dark and light gray, yellow, red – all these colors are used for separating the backgrounds for various areas of the header (financial block, area with the title and social links, main menu). The block with financial information makes use of different colors for making the information easy-to-perceive.

Reuters - Computergeekblog


bbc - Computergeekblog

Large header in vibrant red color (that has a strong impact) catches the users’ attention the first time they visit this site. The easy-to-scan structure of the layout is built due to the choice of colors (blue in the headings, orange in blocks) that are used for wise separation of its parts.

BBC News - Computergeekblog


world news - Computergeekblog

The next site is designed in the classic gray-white-blue color scheme that gives calm and secure feelings that makes users believe that everything will be ok, whichever news the new day brings. A lot of whitespace on the background pushes the main content part in the focus of attention. Very pleasant-to-look-at design.

World News - Computergeekblog


nbcnews- computergeekblog

nbcnews- computergeekblog

This online media site sets up a serious tone with its dark blue header where only logo is a multicolored point. No vivid backgrounds and gaudy colors, no fancy images – the layout presents traditional way of communicating news to serious people. The interesting point of this site is the visual division of categories that is made with bars in various soft colors. It helps structure a great amount of content and show it in easy-to-perceive way.

NBC News - Computergeekblog


foxnews - Computergeekblog

Blue implies honesty and arouses the feeling of confidence. That’s what a trusted resource needs to engage new visitors and make the regular ones interested in its content. Fox knows this rule and presents pleasant on the eye layout with wise implementation of blue (in menu and headings), white (background) and red (in the categories’ titles).

Fox News - Computergeekblog


cnn- Computergekblog

cnn- Computergekblog

The header of the site is designed in vibrant red with contrasting white type that calls attention. Simple dark type against the light background makes the design look easy on the eye. The catchy element of this layout is the part with structured categories where various colors are applied carefully to divide them visually.

CNN - Computergeekblog


cbsnews - Computergeekblog

CBS web designers have chosen best color scheme for a news portal. Since the first newspaper was printed it looked as follows: yellow or white paper with black imprints. Now look at the site, it reminds the newspaper. This color combination (black and white) makes all those newspaper fans come back over and over again.

cbsnews - Computergeekblog


abcnews - Computergeekblog

It’s a well known fact that blue and its tints work best for social media sites. Here is such an example with a calm color scheme where blue plays the key role. Its mix with black and white gives clarity and sets a calm and strong tone of web presence.

abcnews - Computergeekblog

Now you can clearly see what the attentive and wise choice of color scheme brings to the news site. Colors of the graphics, typography, background make the information easy-to-read. They separate content blocks and put accents on the most valuable. Their thought-out choice makes the layout structure easy-to-scan. And what’s most important, they affect the way people perceive the information: set up a serious tone, communicate authority and intelligence, make readers trust in the presented information and give a response – interest in these media sites.

Savita Singh is the author of computergeekblog, She has a superlative knowledge of Graphic and Web designing. She is a part time and award winning tech blogger who loves to write about latest technology, social media and web design. Her blog focuses on creative things of designing and tech, providing professional opinions on designing products, performances and a variety of business.

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.