Color guide: Using Red in Your Website Design

Today we’re beginning a series on colors in websites by taking a look at one of the brightest, warmest colors in the wheel: red! Many businesses use red to get an energetic look for their website and/or logo, and it is often used by food and beverage companies to illustrate their fresh, tasty products.

The Brightest Bright
Red isn’t just a warm color, it’s hot. Such a strong color is hard not to notice when used in design. It brings attention to whatever it highlights, and it brings energy and heat to a page. Red is also an emotional color, conveying love, hate, and most everything in between. Because of this, many activist groups and charities will use red in their color scheme. Along these lines, red can be used to show pride and strength, which is why it is often adopted as a patriotic color on flags, team uniforms, and sports cars. It has a bit more strength than its neighbor orange, so if you like warm colors but you need something with more kick to it, red could be right for you.

It is important not to use too much red, and to be wary of the shade of red used. Red also has been used in mainstream media and worldwide culture as a sign of danger or a signal to stop, and this can turn away viewers. Too much red is like a wall greeting your customers as they enter the site; it’s just too harsh, and not worth enduring to get to your awesome info. You’ll see in our examples that some organizations do make use of red as their background, using it to fill up the page. But this must be done carefully, with light contrast and clearly legible text. Using a bright orangey-red background and white text can be a little too much for the eyes, but using a darker red can ease the effect.

Examples

Truf

Truf Creative: Let’s start off with something light. You don’t need to have your site filled with colors to bring energy and personality to it. This business artfully uses an orange-red shade to bring attention to the logo, points of interest on the page, titles and links. It uses enough red so that there’s consistency in the design, but also keeps the page looking clean and orderly with a cream background, black text and grayscale images. It’s not a rainbow, but it still feels warm and inviting.

Mirror

Mirror Communications: This company uses a lighter shade of red, which makes the page brighter and more inviting. It can be difficult to find a good text color that contrasts this shade without being overwhelming, and I think the white is just legible enough to work. The logo contrasts perfectly due to the bold, large letters, but the header links are a bit harder to read. I actually like the white background with red text on the lower half of the page better. You’ll notice the white is less of a true white, and a bit more of an off-white or cream. This dims the harshness of the white, while still creating a clear background. This is a good lesson for all: you really want to make sure that viewers can clearly read text without straining their eyes. Color can be a great addition to your site, but you don’t want it to take away from  the clarity or cleanliness of the page.

RedCross

American Red Cross: The Red Cross is iconic, both in its message and its logo. Simple, yet strong, the bright red on a white background immediately stands out, and they make sure to prioritize this on their website. This site may not have a lot of red in it, but it uses enough to bring attention to important points on the page. Namely, the logo and the donation button. The American Red Cross has it’s priorities, and isn’t afraid to show it. Of course, using images that complement the page and go with the color scheme helps, but the message here is that you don’t need to drown your site in color to get people’s attention.

Chelan

Chelan Fresh Marketing: Again we see only a bit of red in the website design scheme, but what it lacks in the background it makes up for in images. The apples, cherries, and pears are all warm colors, and make the center of the page jump out at the viewer. I also like how the use of red in the layout is subtle, just accenting the apple in the logo, and giving a splash of color to the header. Here we see how dark red works wonderfully with various shades of grey and black.

TheWalk

Take the Walk: This site uses a darker shade of red with an even darker black background. Grey and white text brings enough contrast into the page so that everything is legible, and not too harsh to read. Some businesses are hesitant to use a lot of black in their website, but I think this group has succeeded by using red to bring a bit of color while still keeping a dark tone. In this case, the dark hues with a splash of red illustrates emotion and the severity of the situation. It’s not grungy or depressing, yet it still makes the viewer feel the message of the site, rather than just reading it.

Surefire

Surefire Pizza: It doesn’t take much effort to imagine a hot, fresh pizza covered in melted mozzarella when you look at the colors on this site. The deep shade of red is nearly the color of bricks, which has multiple subtle messages: a hot brick oven, an open hearth, and flavorful tomato sauce. Complete with a brown-beige background, a bit of texture and a clean bright space for the main panel, this shows how the right colors can instantly put a picture into the viewer’s head.

Taami

Taami Berry: Time to cool off after those pizza visions. This site uses a similar shade of red as Surefire, but instead lays it over a light grey background with a touch of dark grey for texture. Finally, using a brownish green brings a feeling of nature, but still conserves the energy of the red. This site is promoting a specific fruit and the color scheme illustrates the freshness and sweetness of the fruit. Notice how this site and Surefire are both advertising food, but change the colors they use to create different moods surrounding their products.

BigData

Oglivy One: Here’s something a bit different for you. This page uses a very light shade of red over a light brown center panel, and finally a white background. It’s very simple, very clean, and the red brings something we haven’t seen yet: calm. It’s nearly a pastel shade, and that gives viewers a peaceful vibe, but it still brings warmth to the site. This is a creative way to use red, and the company has pulled it off beautifully. This is a fun site, but it’s not in-your-face colorful.

CubicleNinjas

Poster Ninja: Hooray for gradients! Using a gradient with a bright color like red is a great way to keep the fun of color while not overwhelming viewers. A gradient that lightens at the center draws the eyes to the center panel, where your information lies. I think this shade of red might have been too much for viewers without the gradient. This company also uses some contrasting colors that we haven’t really seen yet, such as the blue-green in the center panel. It works nicely with the bright shade of red, and plays into the idea of edgy, artful design. The one thing I don’t like about this site: the main logo is orange. It doesn’t really fit in with the rest of the color scheme, and as a result the color scheme doesn’t make a lot of sense. It looks great, but what does it have to do with the business? Consistency is key.

CodeButton

Code Button: This site has a pretty simple color scheme, but it adds something to the center panel by using textured patterns of a lighter shade of red. Using texture helps bring another element to a bland background, and in this case helps dim the effect of the bright red. Again we see red being paired with black and white, which both contrast well for legible text. You may notice, however, that this scheme looks a bit industrial. Keep this in mind if you’re more focused on creativity, personality, or a light and airy atmosphere.

Comments are closed.