Anatomy of Colors in Web Design: Attention Grabbing Red

Colors in web design do more than just offer a presentation, they can and often do speak for the product or service, not with words, but with moods and feelings. We have previously covered the anatomy of green, blue, yellow and black, so today we are taking a look at red in web design.

As children we tend to favor the color red, and we prefer bright shades of red such as true red and scarlet. The reason for this is that from a very young age, red grabs our attention. As we mature, it is thought that our blossoming personalities dictate which color we favor, and if we become extroverts we are very likely to continue to favor bright red shades.

Definition of Red

Red is the color next to orange at the end of the visible spectrum of light. Red is commonly associated with danger, sacrifice, passion, fire, beauty, blood and anger, and in many cultures it is related to happiness.

Red

Red is visible when light has a wavelength between 620 and 740 nanometers. Light just past this range is called infrared and cannot be seen by human eyes, although it can be sensed as heat.

In traditional color theory, red is one of the three primary colors, along with blue and yellow. In modern color theory (the RGB color model), red, green and blue are additive primary colors. True red has an RGB value of 255, 0, 0 and a hex value of #FF0000. This shade of red is not possible to achieve in CMYK, but the closest value is 0, 99, 100, 0.

The Benefits of Red

Red is probably the most powerful color for expressing moods and feelings in all types of media. It is also the greatest attention-grabbing color in it's brightest shades. Red evokes strong emotions and encourages appetite.

Pales shades of red, ie, pink, give a very feminine and soft feel, while very deep shades of red such as crimson can express warmth and comfort as well as much more sinister emotions.

Red in mid shades can portray happiness and freedom, but of course, also blood, fury and passion.

It is difficult to associate any one meaning, mood or feeling with any particular shade of red, making it one of the most versatile colors of the spectrum, as well as the one color that has to be used in the correct shade for the message being sent to be perceived correctly.

Different Types of Red in Web Design

As previously mentioned, red can convey many moods, feelings and emotions. This is also true in web design, and the flexibility of red in its various shades gives it a lot to recommend it. Red is not commonly used as a main color in web design, but often serves as a complementary color in specific areas and many designers steer clear of red as a main color because of its diverse associations.

Hot Pink

Hot or dark pink is a very warm color and is associated with heat. This can be literal heat as in summer, or figurative heat as in sexy/attractive.

Emploi New York
Emploi New York

Pink

Pink is a soft and feminine color offering a certain feeling of comfort.

Dear Mum
Dear Mum

Bright Red

Bright red shades are attention-grabbing, up-to-the minute colors. When used in combination together they can give a very clean appearance of professionalism and modernity.

Revolver
Revolver

Dark Red

Dark red evokes feelings of warmth, coziness and reliability. A welcoming feeling can be achieved with the use of dark red – after all, most theaters have dark red seats and a dark red stage curtain.

Toki
Toki

Pink and Black

Used in combination, pink and black suggest femininity with professionalism.

Eggs by Ellah
Eggs by Ellah

Red and Blue

Red and blue together give a vibrant and 'happening' feeling.

New Music USA
New Music USA

Red, White and Black

This color combination evokes a lot of moods and feelings, there is minimalism from the white, attention-seeking from the red and seriousness from the black. Together they produce a clean, clear result.

PH Digital Labs
PH Digital Labs

Red with Other Colors

When red is used amongst other colors, it will usually still stand out as the most prominent color, therefore, if using red in a color combination, it should contain a call-to-action or some very important content – it will often be the first thing viewers look at.

Minimal Monkey
Minimal Monkey

Using Red to Grab Attention

Red is probably the most attention-grabbing color in website design. Here are some sites that use red elements in their design to get the viewer's attention.

Oakley
Oakley

Officeline
Officeline

Pierrick Calvez
Pierrick Calvez

Urbotip
Urbotip

Kiliwatch
Kiliwatch

Bernd Kammerer
Bernd Kammerer

Showcase of Red Identities

Here are some companies and corporations that use red in any shade as the base color for their website designs.

Trol Intermedia
Trol Intermedia

Bubblecom
Bubblecom

Rubicon
Rubicon

Pulp Design
Pulp Design

Cafe Rouge
Cafe Rouge

Codalight
Codalight

Hundredth Monkey
Hundredth Monkey

Everything Design
Everything Design

Bobadilium
Bobadilium

New Hampshire Distributors
New Hampshire Distributors

Pizza Hut
Pizza Hut

Most Wanted
MostWanted

Showcase of Freelancers

These freelancers have used red as the main color in their portfolio or website designs.

Liam Brummit
Liam Brummit

Jon Wallace Design
Jon Wallace Design

Alex Flueras
Alex Flueras

Roy Barber
Roy Barber

Florian J. Farber
Florian J. Farber

Talita Pagani
Talita Pagani

Janko Jovanovic
Janko Jovanavic

Chandu4u
Chandu4u

Jonas Lekevicius
Jonas Lekevicius

Dark Crimson (Ben Lister)
Dark Crimson (Ben Lister)

Venkat Eswaran
Vencat Eswararn

Cameron Moll
Cameron Moll

Showcase of Red in Web Design

The following websites have used red as the predominant color. Notice how the different shades of red evoke different perceptions about the site, product or service.

Fresh Ego Kid
Fresh Ego Kid

Franky Rizardo
Franky Rizardo

Lion's Choice
Lion's Choice

Green Onion
Green Onion

Codesign Studios
Codesign Studios

Revolucao do CSS
Revolucao do CSS

SJ&P Internship Program
SJ&P Internship

JWI Louvres
JWI Louvres

Cornelia
Cornelia

Ketch Studio
Ketch Studio

Boy-Coy
Boy-Coy

Fair & Lovely Fulbright Research
Fair & Lovely Fulbright Research

Aztrolab
Aztrolab

Formee
Formee

Motionoto
Motionoto

Khai Liew
Khai Liew

Bowtie App
Bowtie App

Born To Be On
Born To Be On

Hype4
Hype4

Mr. Mitote
Mr. Mitote

Zirkua Estudio
Zirkua Estudio

Les Dompteurs de Souris
Les Dompteurs de Souris

Hatha Ciudad
Hatha Ciudad

Chop Dawg Studios
Chop Dawg Studios

Mevem
Mevem

War Child
War Child

Le 28 Thiers
Le 28 Thiers

Keenan Wells
Keenan Wells

Pfister
Pfister

McMillers Sweets Emporium
McMillers Sweets Emporium

Poster Ninjas
Poster Ninjas

Kinetic
Kinetic

Yookoso
Yookoso

Plus Footwear – Big Bang
Plus Footwear - Big Bang

MKJ Creative
MKJ Creative

FontYou
FontYou

Kaus
Kaus

HAG
HAG

Stratum Management
Stratum Management

Them Crooked Vultures
Them Crooked Vultures

MiO Nights
MiO Nights

Design Studio
Design Studio

Brooklyn Beta
Brooklyn Beta

True & Co Anniversary
True & Co Anniversary

Endzeit
Endzeit

Further Reading and More Resources

The Versatility of Red

There is no doubt that red is a very versatile color in all media, including web design. It has to rank among the bravest of color choices for designers as the correct portrayal of a message requires the correct shade of red.

Red can be one of the happiest, most vibrant or most passionate colors, but conversely, it can be one of the saddest, most aggressive and most sinister colors.

It is its very versatility that persuades a lot of designers to stay well away from the color red!

What do you think of the color red? Is it your favorite color? How would you handle red in your web design? Share with us your thoughts.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.