1. Technology

Web Color Synchronization

Is it Even Possible to Synchronize Color on Web Pages?


What is Web Color Synchronization?

Web color synchronization is the attempt to get your web colors to look exactly the same on all the monitors that view it. Web color synchronization attempts to synchronize those colors and keep them in sync.

Web Color Synchronization is More than “Browser Safe” Colors

The idea behind browser safe colors was to generate a color palette that used only colors found on both Windows and Macintosh machines. On 8-bit machines, there were 216 colors that fit that criteria. And with most monitors supporting millions of colors, many people feel that the browser safe palette is not needed.

Web color synchronization requires more than a palette of supported colors. My friend uses a Dell monitor similar to mine, and her computer has a high quality video card. She runs Windows XP like I do. But when she viewed a site I created with a dark green background (#030) it came up as a bright forest green on her display. On my display, #030 is a very dark, nearly black, green. Our monitors were not in sync.

The Global Web Makes Color Synchronization Nearly Impossible

Think about it, everyone who views your site has a different: monitor, operating system, web browser, color scheme, and ambient light. And all of these can affect how the page will look and the colors will display. In my example above, the biggest difference between my friend’s set up and mine was that I had used a Color Spyder to synchronize my monitors with print output. And she had not.

It’s certainly advisable to have your web development team synchronize your displays - as you don’t want one designer modifying a color scheme because her monitor shows the yellows as yellow-greens or whatever. But it’s not possible to expect your audience to do the same.

So What Can You Do to Synchronize Your Web Colors?

Short of only displaying your website on a kiosk where you control the monitor, operating system, and browser, there isn’t a lot you can do to keep your pages looking as you intended. But there are a few things you can do to minimize the problem.

  1. Keep it simple. Use simple colors.
    For instance, you might love the color #b9cafe (a light bluish purple on my monitor). But this isn’t a simple color - it’s hexadecimal triplet is very complex. Simple colors use duplicated numbers for the triplets - for example a simplified color that is close is #bbccff.
  2. Keep it simple. Use very few colors.
    It can be tempting to fill up your page with a 3-5 colors or more, but even if they are all the same hue, the more colors you have on a page, the more likely that they will look wrong in some situations.
  3. Keep using browser safe colors where you can.
    The browser safe palette is a limited palette, but it has wider support than not. Most monitors can display #f00 more easily than #f11, even though both reds are very close in color.
  4. Don’t sweat it.
    The bottom line is that you won’t be able to make your web pages look identical in all situations. The best thing to do is make sure the colors work for your customers on their monitors or that your CEO likes your color choices. Then stop worrying about it.
  1. About.com
  2. Technology
  3. Web Design / HTML
  4. Web Design
  5. Principles of Design
  6. Color
  7. Web Color Syncrhonization - Web Color Synchronization Across Browsers and Operating Systems

©2014 About.com. All rights reserved.