Navigation

How to Calibrate Color for the Web

Branding, How To, Web Design | Apr 26, 2010

When is orange more like red? Web designers, even picky ones, sometimes ignore color shift across monitors.

How is a web designer to manage color when the screens of their users could be any size or color or could be viewed under any lighting conditions?

Unlike fixing HTML errors, which affect browsers as the page is loaded, getting accurate color is part of the designer’s work process.

Maintaining colors across projects is possible once the problems are understood. Read on for the challenges—and solutions—to getting consistent color on the web.

Can you spot the difference between the photos below?

two slightly different photos

One of the images is slightly more blue than the other. This “color shift,” or overall tint of a particular hue, might go unnoticed by the casual observer. After all, a slight change in hue doesn’t make this any less of a flower or detract from the dewdrop’s detail. It’s a cumulative change.

Over time, maximum-quality JPEG images and 256-color PNG icons eat up precious bandwidth. Complexity in HTML increases the browser’s workload with each page load. Unlike these problems, which add up as visitors browse the website, color management is a problem with the design process. Images created on an uncalibrated monitor become inconsistent over time.

Color shift could go by another name: inattentiveness.

When can we say that a graphic’s color matches the page close enough? At what point is a photo’s color too inaccurate? What details don’t matter to the project as a whole? Everyone may have different answers, but no one who takes digital images seriously can ignore color calibration.

The print industry has struggled with getting accurate color for decades. Ensuring that the exact same colors appear at all stages of production—including in various monitors, office printers and high-end presses—has spawned its own industry of calibration devices, software solutions and even ISO standards.

The web design community generally doesn’t worry about press checks. But maybe it should.

 

The Web Has Had Color Issues Since It’s Had Color

In the 1990s, getting accurate color on the web meant using a palette of 216 “web-safe” colors. These hues and shades were (mostly) guaranteed not to dither when displayed on monitors that could not handle more than 8-bit color.

illustration of a dithered image

Above is a gradient with and without dithering. Today, the vast majority of computers can show 24-bit color or better (according to these browser display statistics and Google Analytics tracking of websites, including Webdesigner Depot). That is, each pixel can show one of millions of colors, making calibration both complicated and more critical.

The web has long relied on hexidecimal codes, like #F35C23, to define colors. These six-character strings can display a wide variety of hues and values with great precision. An image that has #F35C23 and a CSS background in #F35C23 will match perfectly.

The problem is that the code defines a combination of red, green and blue but does not always result in consistent color. Display screens account for the difference.

 

White Is White, Except When It Isn’t

Many factors affect color accuracy when creating and editing digital images. As with print, color on the web depends on the environment in which the image is created. Unlike print, web-based images can change every time they’re displayed because the monitors of users will vary, and no press check can catch problems that crop up.

Although many modern web browsers can display CMYK images, most images for the web are based on the additive RGB color model. This model applies a mixture of red, green and blue to each pixel.

But not all monitors are built the same, and so a particular shade of orange could be inconsistent across different screens. Here are some of the causes of color change:

  • Slight changes between manufacturers and models account for slight inaccuracies in shade and hue.
  • Many screens (especially CRT monitors) change color over the years and even as they warm up over the course of a day.
  • Until recently, Mac OS X and Windows used two different “gammas,” which meant that images on Macs appeared brighter than ones on PC. Mac OS X 10.6 (Snow Leopard) uses the more common gamma of 2.2, which is the same as Windows and many televisions and camcorders.
  • People browse the web from many different locations and in many different lighting conditions. The effect of overhead lights and the amount and color of natural light all affect the appearance of color on the screen.
simulated color shift across different displays

Above, different calibration shows that “white” is often an assumed color:

  1. The original image, shot under fluorescent light with a point-and-shoot camera.
  2. Approximate color shift on a Mac before Snow Leopard.
  3. Approximate color shift on an aging CRT monitor.
  4. Close to true color, as seen on the laptop on which the photo was processed.

A slightly red monitor might show an otherwise perfect blue as slightly purple, or show a green with a yellow tinge. Monitors set too bright will wash out shadows and highlights; monitors set too dark will muddy shadows and increase the chance of color shift in highlights. For designers who care about these details, quality control is definitely a challenge.

 

PNG Color Shift

Simply put, the gamma value changes the luminance of a displayed image. Designed for digital display, the PNG image format enables designers to add gamma correction to each image. But without knowing the luminosity of the output device (that is, without knowing the type of monitor the image will appear on), designers have a hard time adding accurate gamma correction.

This characteristic has become PNG’s most notorious problem. On the web, an image will sometimes match the hex colors specified in the CSS, and other times it won’t—even though it was created with the correct color.

Programs such as PNGCrush (Windows) and PNGenie (Mac) can remove excess information from PNG files, including the gamma setting, which makes color more reliable.

 

Other Issues

Preventing color shift can require changes in the way designers work. Poor color calibration will stand out over time. It’s one of those design details that doesn’t get talked about and shouldn’t get noticed.

 

Industry Solutions

Various solutions have taken much of the guesswork out of managing color and preventing color shift.

The International Color Consortium (ICC) was created in 1993 to establish a platform-independent standard for color management. The goal was to ensure consistent color across all devices, including monitors, scanners and printers.

ICC profiles are files that contain information on how various devices display color. Printers and most computers ship with ICC profiles built in, because their manufacturers know precisely how they work. But custom ICC profiles can adapt a particular device to certain conditions—say, when a monitor is used under fluorescent lights, as opposed to next to a large window.

In addition to matching colors across screens (and in print), Adobe Flash Player 10 supports ICC profiles, enabling color management between Flash and printers (assuming that the end user’s printer uses an ICC profile).

In 1996, Hewlett-Packard and Microsoft defined the standard red, green, blue (sRGB) color space as a convenient standard for devices that use additive color models. Although more limited than other forms of RGB (its colors can’t be quite as saturated as Adobe RGB, for example), its popularity grew as monitors, scanners, cameras and camcorders adopted the spec.

These technical solutions are industry-wide responses from professional organizations. But designers can also take steps to keep their work consistent over time.

 

Tips to Prepare a Room for Color Work

What kind of light are you using right now? If you’re reading this in your primary workspace, and if accurate color is important to you, then you can take steps to improve your workspace right now.

  • Ten seconds per half hour
    Take a quick break and stare at an 18% gray card. Looking at the same card under the same lighting conditions is a good way to “reset” your eyes. (Note: purists recommend 12% gray cards. They’re fine, too, as long as you use the same card every time. The point is to look at something consistent and neutral.)
  • Ten minutes
    Move your monitor out of direct light. Never let a light source directly hit the screen.
  • Fifteen minutes
    Remove colored desk accessories (calendars, markers, photos, folders—anything not gray) from your line of sight. If your monitor is reflective, do not keep colorful items directly behind you.
  • Ten minutes per day
    Let your eyes adjust to the environment before starting work. Give your eyes time to adapt to the workspace, especially if you’ve just come in from sunlight or exterior night lighting. If necessary, use a timer.
  • Ten minutes per week
    Clean your monitor. Use a lint-free cloth to gently remove dust and fingerprint smudges, or refer to your owner’s manual for cleaning instructions. Do the same to your eyeglasses, if you wear them.
  • A day or so
    Cover nearby windows with thick screens or curtains. The primary benefits of natural light are accuracy—it’s hard to get more natural than sunlight—and availability. But natural light varies. It changes throughout the day, with the weather and with the seasons.
  • A weekend
    Surround your workspace with neutral gray. Paint the walls, and replace dark furniture with something bland. Ideally, your desktop should reflect only about 60% of the light that strikes it. GTI Munsell Neutral Gray Paint is popular among photographers for creating neutral backgrounds.
  • A weekend or shipping time
    If you’re not able to adjust your office lighting, purchase or assemble a monitor hood to prevent glare and changing conditions.
illustration of a workspace ready for accurate color work

 

Tips to Calibrate Your Monitor

The purpose of calibration is to eliminate color shifts and optimize the tonal range of your monitor. Shadows should be rich but still show detail. The brightest highlights should be neither too warm nor too cool. In the long run, this makes for accurate, consistent color.

Here are the general steps:

  1. Warm your monitor up for at least 30 minutes.
  2. Select gamma (5000–9500° K, gamma 1.8–2.2).
  3. Find the best white and black points.
  4. Balance red, green and blue to prevent color casts.
  5. Repeat this process monthly.

Many programs will walk you through this process. Adobe Gamma is a popular quick solution for calibrating CRT displays. Aside from being easy to use, it’s free with the purchase of Photoshop or Photoshop Elements. Other solutions are QuickGamma (Windows) andDatacolor’s Spyder hardware calibrator.

 

Color Me Picky

Accurate, consistent color is one of those minor details that most people—including web designers—choose to ignore in the face of parsing errors, web standards, client misinformation and good ol’ deadline pressure.

But it’s also one of those elements that make for a better overall experience. Once designers start to notice deviations in hue and muddy shadows, not wanting to do a better job will become unusual.

Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance web designer who solves communication problems with better design.

Share this post
Comments (no login required)
  • http://www.webguide4u.com Photoshop Tutorials

    Thanks for the share. Color combination is one of the most important thing and if you are a designer it is much more important for you to take care of it

  • http://pollyfolio.com/ Polly

    No wonder this is getting re-tweets all over the place…

  • http://www.natashastorm.co.za Storm

    As always, awesome post. I think a lot of people overlook color calibration, and it really is super important. Great to see a post on this!

  • http://www.kadom.net Thomas

    Nice post, We forgot often about the other’s screen setup

  • http://www.behance.net/leventegaal Levi

    Very useful article again!! Thank you WDD!!

  • Ferdinand Salis

    Maybe I am missing something but what is the point to calibrate your monitor when the majority of web users do not, and how can one account for all the different monitors out there anyway?

    Still a informative article. Thanks.

  • http://twitter.com/hexacreative Hexacreative

    I think, the first point to make better web colors is find a great and relax place.
    Web color combination same as with colors on daily life, that you can compare what’s looks good or bad for colors combination.

  • http://www.orphicpixel.com Mars

    is it possible to print a gray image instead buying gray card?

    • http://benthinkin.net/articles/tips-for-calibrating-color-on-the-web Ben Gremillion

      Depends. How well can your printer print a consistent grey?

  • http://www.creativeindividual.co.uk Laura

    This was a very interesting read. And thanks for the tips of how to “reset” my eyes – I have never heard of that before. I’ll have to give it ago. And I’ll have to give “greying out” my office a go too.

    One question, why do purists suggest 12% grey and you’ve suggested 18%? What’s the difference (apart from tone of grey), and why? After all 6% is a decent about of difference to take into consideration.

    Cheers,
    Laura

    • http://benthinkin.net/articles/tips-for-calibrating-color-on-the-web Ben Gremillion

      I learned to use 18% gray cards in photography, but in researching this article I read that 12% gray cards are more effective.

      That may or may not be true for photography; I haven’t tested. But for “resetting” your eyes, any gray should work as long as you use the same card. In a pinch, I sometimes stare at my Wacom tablet for five seconds.

      • http://www.creativeindividual.co.uk Laura

        Ah ok, cool thanks for the reply.

        I will have to give it a go. I’ve been getting more and more involved with wanting to improve the colour-balance in photographs recently, and hopefully this will really help improve and speed up my learning process.

        Many thanks,
        Laura

  • http://www.rocksolidpr.co.uk Olly Bowman

    So to create colour accurate websites I have to block out all natural light, paint everything grey and remove everything colourful from my workstation? Sounds like a great working environment!

  • Ixo

    OK, so I can understand the need for precise screen calibration and proper work environment when preparing images for print. But whats the point of such an excessive preparations described in tips paragraphs if we have absolutely no idea what the end result will be on the user side?

    Sure, being aware of the differences and problems (and adjusting your colors to take that into account) is important, but we still can’t help for poorly calibrated screen or badly lit workplace of the website viewer. Hell, even I have 2 screens that I can’t calibrate to match since they use different technology, so colors, gamma etc. vary slightly between them…

    • Ferdinand Salis

      I would love to get a comment on this too

  • Marie

    Thanks for the article. I’m always looking for help in calibrating my monitor for print and web jobs.

    PS
    It would be great if you provided a print option for your articles. I try to save the best articles in a binder but your articles always get cut off at one page.

  • http://www.simonklink.nl Simon

    Nice post, its quite important that you calibrate your monitor if you want to use acurate colors.

  • http://www.bebop-ad.com BebopDesigner

    Wow! I had no idea. Web colouring can be really tricky, but it seems to have become an art.
    Guess the web is just another canvas.
    Really enjoyed this reading.

    Cheers

  • http://www.jordanwalker.net Jordan Walker

    Very informative, these tips are sure to help me when creating a website.

  • http://www.bertrandlirette.com Bertrand

    This problem plagued our Flash work when we used the PNG format to export images from PS to Flash. A lot of people never realized the color change problem until they heard from it on the Web.

  • http://lenatailor.designerteam.info Lena Tailor

    very nice article.. These will come in handy. Most of the designers are not aware about these. very good.

  • Trace

    I’ve calibrated my monitor.
    Tried to calibrate my second monitor – its not quite the same as my first monitor.
    I develop sites to look good on those monitors.

    Then I see the sites on other monitors, in friend’s houses, my mom’s house etc.
    They look REALLY bad.

    Informative article – but is it really that important to calibrate your monitor when no end user will have a calibrated monitor?

    How can work best we can to make sure our design’s look good on every monitor?
    Are there any rules of thumb?

    I find any site with a vibrant colour can look really bad on other monitors.

    • http://padillabowen.com Nathan

      Trace,

      Your question is exactly what brought me to this site. I am still searching, but I think maybe you nailed one piece of the puzzle. The more saturated a color is, the more likely that it will look garish or “off” on a variety of monitors. The fact is that the vast majority of computer monitors are not color managed even in the slightest, and therefore your site WILL be viewed in every possible way except how you saw it on your calibrated screen.

      So, while I do some more studying, I am short on time to waste, and I need a color scheme. I really like http://colorschemedesigner.com. No affiliation. If you stay below 50% on your saturation, and set your color palette there, then you should end up with something that looks reasonably okay even on dramatically color-shifted systems, since complimentary and contrasting colors are generated mathematically relative to the center, not by eye. Photographs are another thing entirely. Nothing that I know can be done about that except to aim for the middle and manage your embedded profile. That or only show B&W conversions. ;-)

  • http://benthinkin.net/articles/tips-for-calibrating-color-on-the-web Ben Gremillion

    We can’t always account for users’ screens or work environment, but we can create consistency in our own work.

  • http://nathanielks.com Nathaniel

    I really enjoyed this post but gosh, I don’t know if I would want to stare at gray all day. Having a color-neutral workspace? It may reset my eyes, but I feel that my energy would be drained because of the LACK of lighting and color, aside from the color on my computer.

    I know that I work better when I sit next to an open window that allows plenty of light in, so that I can see outside. Maybe I’ll be a little less color accurate, but I’ll take that over feeling like a zombie everyday.

  • http://inspirationfeed.com/design/ Inspirationfeed

    Great article, very nicely detailed info.

  • http://www.guylabbe.ca Webdesigner from Quebec

    Interessant, but I expected more specific tricks about callibatring the settings of your screen

  • http://knowledgecity.com Jae Xavier

    Well done presentation on this overlooked topic. I have always done color calibration when it comes to print design but on web design… I’ll implement right away!

  • http://abeall.com Aaron

    Great article, a lot of useful tips, especially on how to set up your work area to take color perception into consideration. I’ve struggled with how to best deal with color issues in relation to web design in a practical manor for years.

    One thing I want to add about PNG gamma profiles: in addition to PNGCrush and other utilities, Adobe Fireworks has long since been able to export “web safe” optimized PNGs (in addition to the native Fireworks format being based on the PNG spec), and you can even export 8bit PNGs with an alpha channel which degrades gracefully in IE6. I strongly recommend anyone with Adobe Creative Suite Web Premium to check out Fireworks for this alone.

    Thanks for the article!

  • Dave

    I’m surprised you only mentioned hardware calibrators only once; items like the Spyder2/3 or Pantone Huey / Pro.

  • http://graphility.com/hiddenson Hector Hurtado

    Yes, the article is really interesting and tackles a notoriously overlooked problem. Back in the 90’s, web safe colors were taken more seriously. Then, all of a sudden, hell broke loose and people chose whatever tint they fancied that minute.

    Purists still know about the gray environment. My Illustrator professor told us about an internship at a high-end color printing service. Not only the whole work environment was greyed out, employees too were required to wear a gray overall. How ironic – and depressive – for people who make others’ lives colorful!

    With that said, I can’t help but think that we can do our best… and still get an ugly result at the user end. No one answers this one, for a reason.

  • http://www.colorbudz.com funcolors

    It’s true that we can’t account for end user’s work environment and monitor.

    Where color is concerned contrasts are paramount. Kind of doesn’t matter what you’re designing either — it all (usually) comes down to contrasts. Many people think it’s all about color harmony — what *goes* together and what color schemes look pretty. You can and should go beyond just thinking in pretty. Use various levels of contrasts in response to your work being viewed in less than perfect color-calibrated situations.

    The easiest level of contrast to manage is the contrast of light and dark. Taking a look at anything and everything you design in grayscale before it prints or posts can be worthwhile. If it looks good-to-go with chroma stripped, you’re probably on to a design that will look presentable and communicate what’s most important to a multitude of end users.

    So while we can’t fuss and fret over perfect color quality for every monitor on the planet, we’re not totally helpless. There are creative color strategies we can experiment with and try.

    • Franz Marini

      I always check websites with an online tool like, e.g., http://graybit.com/ which lets you see any site stripped of chroma (that is, in gray).

  • http://gauravmishra.com Gaurav Mishra

    Very thoughtful post.
    Many seasoned people have issues handling the same.

  • http://sideradesign.com you win the web designs

    thanks but I don’t think I want to work in a grey office and stare at a grey wall all day long.
    If I did, I’d get an office job.

  • http://emitgraphics.com Zak Groner

    Thanks for the tip on the PNGs, I was actually just looking for an answer to this problem.

  • Ciaran

    As a photographer and web designer I have been calibrating and profiling my Screen for years.
    At the very least you need to be able to trust your own monitor.
    Otherwise it’s just guesswork.
    It is good practice to convert images to SRGB before saving for web.
    Even if the unknown viewer’s monitor is out of whack at least the imagery will be somewhere near what you intended.
    As Ben tells us Microsoft, HP etc developed SRGB to describe how the basic Monitor displayed Color back in the nineties.

  • http://rolling-webdesign.com Theo

    Very nice article again, Thanks!

  • http://www.creatuswebdesign.nl/ Gert van den Brink

    Thanks for this! Specialy the part about de PNG’s, I have had some problems with that in the past, I hope this problems wil stay in the past now!

    Great article

  • http://www.alejandroperazzo.com Punta del Este Real Estate

    very useful tank you.
    i would really apreciate a nice post about proportions in design, using for example the divine proportion. Im starting to use that proportion in some of my designs but id love to see how WDD use it.

  • http://www.alsupipe.com Oyun

    great article, again you explain very good examples.

  • http://www.w3conversions.com Stephanie Sullivan

    Correct me if I’m wrong, but isn’t the color shift between the Photoshop comps I receive to code and what I export (definitely slightly desaturated in many instances) due to the fact that to export the smallest file size (very important on the web) I do two things:

    1.) I open all files in PS to dump any custom profiles (size hogs).
    2.) I export as sRGB with no ICC profile/copyright metadata.

    Fireworks exports noticeably smaller files because it exports without profiles by default (in fact, if memory serves, I don’t think it reads them at all).

    It seems to me that if designers would design with the web in mind (well, when they’re creating websites) and:

    1.) Not assign custom profiles.
    2.) Make sure their color settings are set to sRGB.
    3.) View the comp in the appropriate proof colors.

    Perhaps we as web developers would be able to get a “truer” version of their colors on the web. In other words, they would see it as they design just like we’re going to export it. A win-win! :) Or maybe I dream of pie in the sky and none of it will ever work since colors vary so widely on the web…

    • Ciaran

      You post raises a few points that need clarification.
      It has to be recognised that there is a difference between assigning and converting icc profiles.
      When you open an image in Photoshop if it has no icc profile embedded it opens in whatever your default working space is.
      If an image has no embedded profile you can assign one to see if you can get a more pleasing result.
      If you receive a file that has an embedded profile that is not SRGB you can convert the file to Srgb before outputting for web without embedding the profile to keep the size down.
      Similarly when you receive images that are in mystery colour spaces if you find a suitable profile,after assigning that profile you can then convert to SRGB so preserving the appearance.
      When you say you open files received in Photoshop to dump the icc profiles unless you first convert them to SRGB you are losing control over how they look.

  • http://twitter.com/HiteshMehta Hitesh Mehta

    Great Posts.

    I have a query, may be this is off-topic but i may expect some response from here.

    I am using a Sony Vaio FZ Series (at home) and it is a HD screen. I never knew i will end up in such a situation where i will have to design my stuff in Vaio and have to color correct in a normal screen (at workplace). The problem with HD is that it gives you a very high contrast colors when it is on max brightness (as default) and when i use minimum brightness everything looks so dull.

    Is thr a way i can set my photoshop color settings to see the almost real colors on HD screen? Thr is i think no option to turn off HD or option of viewing in a normal view too.

    I dont know what to do? Can anyone help me with this annoying situation?

  • http://www.kitaro10.com najam siddiqi

    I read this one in HCI but i didnt clear this topic . after read your topic i have much more cleared about this.

  • http://alterna180.com elizabeth

    Thanks so much for addressing this issue. I am still a bit confused about a couple of things – maybe someone can comment or the author can help.

    I design for both web and print.

    When I’m designing for web, should I change my monitor display profile to what would be most accurate for “most” of the world?

    And when I’m designing for print, should it be a different calibration? It’s my priority that what I design for CMYK printing, prints very closely to what it looks like on my monitor. But I’m worried this is completely different from what my priority is when I’m designing for web: which is my guess at what “most” of the world might see on their own computer.

    And then to throw a 3rd thing in the mix…I’m also a hobbyist photographer with a Smugmug gallery. For some reason, unbeknown to me, the standard for photo editing applications (I use Adobe Lightroom) is RGB. And even though (I believe) photos are printed in full color (CMYK, right?!), they take RGB files as a standard. I have had a problem in the past where the photos I edit in Lightroom appear extremely bright – almost neon – in my Smugmug gallery.

    What the heck!? I’m thoroughly confused. Anyone have pointers for us crazy web design + web developer + print design + photography people? :)

  • http://www.brettwidmann.com Brett Widmann

    This was a very helpful article. So much color quality can be lost when posting to the web so I’m glad i read this! Thanks for sharing.

  • Adil

    Good thing I have a grey curtain on my window just next to my workstation, it’ll do then.

  • http://correctcolor.org Mike Adams

    That’s all interesting, and well written, and the resetting-your-eyes parts are informative.

    But all the suggestions offered won’t really do anything to change the files a reader might send to the web.

    In point of fact, if the issue is how your work looks elsewhere, it makes absolutely no difference what you see, how well or how poorly your monitor is profiled, or what the lighting conditions in your working environment are.

    All those things matter to you, and they help assure that you’ll be sending images off into the world with an accurate idea of how you intend they look. But they don’t at all account for any of the issues that account for color shift on the Internet.

    This is a little long-winded, but it does explain why if you want to wade all the way through:

    http://correctcolor.org/cccommentary/?p=114