WD4PD: Color Me Tricky
If you are jumping into web design today or tomorrow you are lucky because you get to skip what we like to call the “creative-period-that-must-not-be-named.” Not many years ago (time sure flies) most designers were limited to 256 (not pretty) colors – far fewer than your handy-dandy Pantone book. It was a painful time of burning retinas and handcuffed creativity.
the infamous 256 color palette
Fast forward a decade – great monitors are cheap and have beautiful displays, browsers are much more advanced and flexible, there are powerful web editing tools and the push for breaking creative barriers online continues on a daily basis.
There has never been a more exciting time, with more valuable resources for technical documentation and creative inspiration than right now. Today is a new day to expand your mind, unleash your creativity and say “Hello, World!”
There is not such limitations in your print world, we know. The web is definitely more restrictive on many levels and color is one of them, but once you figure out what works you’ll see that there’s a lot of room to flex your RGBiceps. Besides, we think that when posed with restrictions, designers are challenged to really think of ways to push their designs further.
The Skinny.
The basic difference between color for print and web (as you might already know) is that print uses CMYK colors, or Cyan, Magenta, Yellow and Black. Any color that you see in a print piece will be a combination of all or some of these 4 colors. The web uses RGB, which stands for “Red, Green and Blue”. If you were to create a design in Photoshop with the color settings on CMYK, and then changed it to RGB when you got done, you would notice a slight difference in color. Since most users don’t go through this exercise, the difference will not be perceptible to them − unless they find a print version of the same design to hold up against the screen, which is slightly lame.
The right use of colors can add a lot of value to your design, and help kick it up a notch. There’s no magic formula and no silver bullet, but with a little observation and common sense you will be in good shape. Of course, our tips will probably be massively helpful! 
Here is a quick breakdown of some things to remember:
On The Big Screen.
We don’t expect this to create any big “a-ha” moments, but it is important to remember that this means the colors you choose and use could potentially look different for every user. Each monitor types, brightness level, contrast setting, and even angle at which you view the website could cause a shift your website’s colors. Even some computers using dual monitors show slightly different variation between shared screens – yes, they use the same computer and same video card AND same settings, but still render slightly different. And while it’s nice to dream of telling people how exactly to configure their monitors so they can have the color experience you want them to, this is clearly not a feasible option.
So this is good and bad news. Bad news is that there is nothing you can do about it so users will see you site slightly different. Good news is that most people do not view your website on multiple monitors at the same time so the variations are not very apparent and usually unnoticeable.
Don’t blind your user.
With print you have all kinds of selections between matte and shiny colors, paper types and textures. Online, not so much.
We have had many clients hand us a color palette that looks fine in small quantities but when plastered into the background of a website, or even used for typographical components just explodes off the page (and not in a good way). Again, color will vary slightly between monitors so make sure that even if you are designing on “Way Back Wednesday” you leave the neon pinks, greens and other very bright colors to smaller components of your site.
We have found that earthy/matte colors work very well and provide a solid foundation for any website. If you think it is too bright, just dial it back a little bit and see if that helps.
Color can inform functionality.
Unlike the world of print, changes in color as the user travels through your website can be informative. Some simple examples:
- Using different colors for hyperlinks vs. normal text will help the user identify which words are “clickable”, and will help the eye scroll through the text faster to pick out the operative words.
- Changing the “hover” (when your mouse is hovered on something) state of an item’s color can inform the user they are in the hot zone and if they click something will happen.
- Highlighting in the navigation can inform the user of the section, sub section, etc where they are in the site to give them some sort of orientation in your site’s architecture.
- Colors can also help enhance headings and help to call attention to anything you want to highlight on a web page.
- Besides these practical reasons, color by way of graphics, page header/footer images, buttons etc. will definitely help make your site look more attractive, and draw the attention of the user to those elements you need to POP!
When you are done choosing the colors for your site, play the “ordinary user” and evaluate your color choices for readability and visual appeal. You don’t want to go overboard, and use a different color for every element. In this regard, a web page behaves almost like a print piece in that the information has to be legible and easy to follow, and color is only used to enhance and accent the design.
We would recommend the following:
- Keep all text flowing in the same color and make sure that it stands out well against the background
- Use one consistent color across the site for all hyperlinks
- Use color and font size variations to differentiate between hierarchical headings
- Choosing different shades within the same color family is an easy and effective way to tie the look of the site together while still achieving the usability you want
HELPFUL COLOR HINT:
Make sure you are in RGB mode.
Before you get started designing in your design program of choice, make sure you are in RGB Mode. We prefer Adobe Photoshop for creating webpage layouts because it is a pixel based software, and since pixels are the active unit of measurement in web browsers, it makes translation a lot easier. Here’s how to make sure that you’re in the right color mode:
Open a new document in Photoshop, and when the dialog pops up, you will see an option for color mode in the left column. When you click the down arrow, it will show you Bitmap, Grayscale, RGB, CMYK and Lab Color. Select RGB and specify the dimensions of your webpage, and you should be good colorwise. Set the resolution at 72 pixels/inch or screen resolution. (We will discuss resolution in more detail in another article.)
Selecting RGB Mode in Adobe Photoshop CS4
If you insist on using Adobe Illustrator to lay out your page, do this:
Open a new document, set the units to pixels, specify the dimensions, and click ‘Advanced’. Under color mode, choose RGB, and set Raster effects to Screen (72 dpi) and click Ok.
Just to warn you, Illustrator is a vector-based application, and ideally works better for print pieces, and to create illustrations and graphics. Using Photoshop to lay out your web page design will be much easier for the long haul, trust us.
Selecting RGB in Adobe Illustrator CS4
Be Kule.
If you are generating a color palette or need to play with some web colors, check out our favorite online color matching tool.
Next Topic: Font and Type and All the Hype.
