Digital Web Magazine

The web professional's online magazine of choice.

The Business of Blue

Got something to say?

Share your comments on this topic with other web professionals

In: Columns > DigiSect

By Stephen Van Doren

Published on April 5, 2001

So this is how it's gonna be, eh? The client wants blue, so you give him blue. However, that blue isn't quite right, so you give him another blue. Can we please stop associating blue with business? I like blue. I liked it before it was used as branding material. I still like it.

Personally, and I don't think I'm completely alone in this particular feeling, when I think of bluetones, I think of water. Call me silly, but water and the color blue just seem to go together. Well, here's a revolutionary idea: you're welcome to use as much blue as you want for the month of April, but you have to use something new--something that will evoke another emotion other than "dammit, another blue website?"

Assumptions

In this article I'm referring to colors that in many cases are not websafe, meaning that users with particular hardware configurations will see something different than what I've intended. For this reason, I include the hex codes as well as the Pantone Coated(tm) swatch labels with my examples, to assist you in the creation of the mythical "Perfect Colour Scheme." As always, these colours aren't meant solely for web usage, or solely for print projects. They can be used in any format, over any platform, so long as you keep in mind some key factors: saturation, visibility, and hierarchy.

Saturation is important to strong colour scheme because it is the primary criterion by which a reader or viewer will assess the work. Stronger saturations call for a much louder voice, where desaturated schemes lend themselves to a much lighter touch.

Visibility, of course, pertains to how the colours "jump" from the page. It is important to note that not all colours need to do this; they can be as transparent as you wish. At the same time, if you place a premium on visibility the choice of colour must be evident to the viewer, or the implied message is lost.

Hierarchy refers to the levels of colour utilized in a scheme: in each swatch combination, there are three colours. The first is the primary colour, used in major washing of objects and blocks to give the first "punch." The second is the subordinate colour, which is used to substantiate the claim the primary colour holds on the viewers attention. The third the accent colour, which should be used sparingly within reason so that the viewer's eye can jump from place to place to ascertain what is truly important about a particular project.

I have options?

The first scheme at hand is probably the most traditional of the ones presented in this article. These tones of blue are are obvious but muted, so as to suggest a calming sensation upon viewing. Of course, with all muted colours, you're welcome to saturate them up a touch. The point isn't to yell blue! at the beginning, but instead to mention "eh, blue" once the viewer has had some time to survey the project.

1
2
3
1 :: #7D9DC0 2 :: #2F4F88 3 :: #7EB8A2
1 :: 645 CVC 2 :: 653 CVC 3 :: 556 CVC

One figures that the immediate concern that you've already got with this scheme is the obvious tie-in to the institutional greens and blues. However, it's important to realize that these colours would not have been chosen if they didn't work for their intended purpose. While you may have personal feelings against them, they are by themselves quite lovely to look at.

An important thing to remember when chosing a colour scheme is the closeness of one color to the others. In this we have succeeded. The green, the only colour that doesn't fit the "all blue" palettes of the business world, exits with 72% saturation in blue. Imagine that. Of course, we all know that the composition of green is, in fact, 50% yellow and 50% blue. In this scheme, a green with 72% blue isn't by itself odd. It's important to this scheme to allow for a maximizing of blue inside of green to maintain clarity.

Examples

I know it's busy, but this site uses colour quite effectively. Of course it's a business, so yes, it's using blue. However, this site gives us plenty of whitespace to complement the over-saturation of the images. The background colour on the right side is a wonderful departure from convention, since it's totally desaturated and faded back.

Thank you sir, may I have another?

The second scheme inverts the direction of the implied gradient (from lightest or least saturated to darkest or most saturated) that many colour schemes follow. The reason for this is two-fold: first, I want you to be able to utilize a darker colour as the main colour, and second, to see that darker colours as a base do not automatically imply a conspiracy-theory site. Sometimes, it's okay to take this approach with comparatively pedestrian content.

1
2
3
1 :: #00313A 2 :: #5E9EB7 3 :: #AACFDE
1 :: 546 CVC 2 :: 549 CVC 3 :: 551 CVC

The first color immediately grabs the viewer's attention with its richness. This scheme evokes a darker feeling than any of the other schemes discussed in this article, since it could easily be used to create a project that doesn't come across as overtly business-like but maintains some of the stigma attached to such projects. The blue isn't in your face at first, but it's close enough to black that the viewer will want to strain just a little bit to figure out what the company is all about.

The joy of the second colour allows for variation in the palette. It's barely desaturated enough to not yell blue. The final strike that makes this scheme business-like is the accent colour, which could be omitted completely. Its lightness and frivolty as an accent is paramount to the success of a business-like appearance.

What about a whimsical blue scheme?

These colours, by themselves or with together, create an immediate "neon" experience. This isn't actually a bad thing; the primary colour balances everything out by being extremely saturated and not as light as the rest of the colours. The balance it achieves can lend itself to a very pleasing experience.

1
2
3
1 :: #2175D9 2 :: #86E4F0 3 :: #75EEB0
1 :: 285 CVC 2 :: 3105 CVC 3 :: 353 CVC

Until now, we've been dealing with colours that are more closely associated with black or gray. Now we venture into the realm of colours that are closer to white than anything else. Enter light colours.

Light colours are what you see on your monitor; all of the colours in the RGB spectrum when combined make white. If you had the same amount of colours on an ink palette, when you combined them you would get black. That's the difference between spot and light colours. It's important to remember that if you're using light colours on a print project, you're likely to encounter a "lack of substantiation" when you're finished. When using spot colours on a web project, however, you won't have the freedom to use the richness of mingled colours to create new and inventive colours. It becomes a give-and-take proposition.

Okay. What if blue is the subordinate colour?

I'm glad the question's been asked. The final scheme discussed in this article does include blue, but at a subordinate level. The dark green on the front is the more powerful of the colours, so it is used as the main colour.

1
2
3
1 :: #4C6956 2 :: #00245D 3 :: #907882
1 :: 5615 CVC 2 :: 654 CVC 3 :: 437 CVC

My first instinct is to run: this shows that blue can be paired with colours other than others containing blue, and black. As we all know, the deep blue colour is very close to black in many respects. Therefore, the immediate partner to blue is black. However, that approach lends itself to the same old boring projects. Here we've tried something new.

You'll also notice that each of the other colours (the burgundy and the green) are quite close to gray: this is no coincidence. Because of dark-blue's closeness to black (which, as we remember, is half-gray), it's important to use other colours that reach into the tones suggested by that tone of blue.

1
.
.
3
.
.

Too Dark for Government Work?

...Of course not! This government web site uses these colours. Is this odd? No.

It's like a blue deck of Bicycle playing cards, something you want to sit down with at a coffeeshop and fiddle with for a while. It's comfort. However, it can easily be overdone. With the richness of the blue as a subordinate to the grayish green, it is easy to mistake any usage as too strong. This scheme is not meant for children's sites, nor hospital flyers. It's obviously meant for something that has a powerful, strong message in need of communication, while at the same time catching the eye of the viewer before a single word has been read.

No URLs Were Harmed in the Making of This Article

IBM, Iomega, MSNBC, Phillips, United Airlines, SSC, Inc, Newfoundland Government

Got something to say?

Share your comments  with other professionals (0 comments)

Related Topics: Color, Business

 

Stephen Van Doren is a software developer and graphic designer from Denver, Colorado.

Media Temple

via Ad Packs