Web Site
Developers
Monitor Color Mis-Matching
Nasty Surprise
About the time this site (www.opensourcetoday.org) was taking shape in the very late Spring and early Summer of 2007, I was detecting a plaintive tone in the responses I was getting from a very few invited viewers. There were even complaints about the colors. Too soon I too knew that the grayish blue tone I was viewing on my main monitor did not match what others were seeing. Indeed, I needed only to move the browser to the monitor to the right of my dual monitor setup to see both the color shades and color depth differed. Not good.
Other Distractions and Problems
I must admit I did not give this very real problem the attention it deserved. In my effort to get acceptable level of content on the site, I felt compelled to devote more effort to writing than I expected to be necessary. This exertion was necessity to attract search engines and readers. Hence, the varying color issue did not penetrate deeply as it might have in isolation. Moreover, other unexpected complaints involving the Safari browser on the Mac [1.] diverted my focus. The latter set of problems were not easily solved [2.].
Color Picking
In one of my early articles on hand coding, I gave this reference on a display of colors with their respective hex codes. I used this reference and other sources to guess at code combinations that would yield satisfactory (if not pleasing) colors for the site. Oddly, I had no negative response, despite my lack of success predicting the color yielded by my fudging the hex codes. I have to assume being pressured I was not sufficiently observant to see the color problem early.
It was inevitable, however, that the pained responses and my seeing the same page appear so different on other monitors that the color problem was finally pushed to the foreground. For example, early on I thought I was working with a blueish gray color as the background for every div area other than the header. Moreover, on this monitor the front page listing in the center column is a definite blue. However, when I went into the next room to look at my son's monitor, instead of a blue it was a definite green tint with tone nearer to neon in brightness. He found it acceptable, whereas I hoped most would see more subdued rendering.
Efforts to Employ Standard Colors
At this stage I was worried. I made urgent calls for help. Tom responded by sending several color combinations that I found too soon did not live up to the name "Safe Colors". In the image below, the lighting is imperfect due to the flash focused on the monitor frames. Nonetheless, it is clear enough to show what is seen in person, the coloring on the right hand monitor is deeper and even the washed out image on the left just accentuates the real color differences between these screens. Here is a side by side view of the color rendering:
Color Rendering larger monitor left and smaller on the right [3.].
In the discussions that followed, we opted to go with what we had hoping for the best. More recently, I have wondered if I was too hasty in rejecting these colors because of their failure on these two adjacent monitors. However, though the monitors differ, they were connected to the same video card with both using VGA connectors. If anything the color rendering was worse than the image above shows.
Nonetheless, some of these safe colors, though differing are a closer match than I had upon first impression. In this case, I opened the same page as new windows and placed the color sets side by side. Though I continue to see differences, some are better matched. So do not be quite as quick as I in rejecting all color pairs. Some might work for you.
Situation Actually Worse Than Described
I had known for a quite a bit of time that one of my monitors was digital. Moreover, the card I was using had a digital port available for use. However, it was the second port, my 1, but the monitor in question was attached to the zero (0) port. In theory, it should have taken little more than reversing the respective port numbers to which the monitors were attached in the xorg.conf file. Nonetheless, I resisted the temptation. Perhaps I was heeding the engineers' credo, "If it's not broken don't fix it!".
Despite the inherent appeal of a digital monitor, I resisted the urge successfully until I took a look at color sample rendition similar to the one shown below:
Large Monitor Close-Up of Color Rendering [Press Link to Magnify]
If you were using my monitor and looked at the unmagnified image above [or the left of the pair further above], the upper left rectangle compared to the center rectangle in the second row from the top, there is no obvious color difference. Moreover, despite the washed out appearance of the photo that is what I see. Nonetheless, even I see, for some reason, these two regions seem to differ in the magnified view, but don't believe it [4.]. I say that because changing my angle of view I can flip what seems the darker shade in this pair. Moreover, to some the Beige as pictured too might be suspect, however, it falls within the range that are recognized as a beige shade when seen with one's eyes or using a better photo. Unfortunately, the problem is larger than these pictures indicate.
These photos were made when the larger monitor had already been switched over to a digital connection. When I happened to notice this problem, there were at least five rectangles at the top that all were purporting to be differing colors but without any discernible difference from one another when operated as a VGA monitor. This was the final issue that pushed me to reverse the connecting ports and make the larger monitor digital. Unfortunately, I learned the wisdom contained in the engineering precept I quoted above. The next time I discuss a hardware topic, I will describe the travails I encountered making this simple switch.
Corrections, suggested extension or comments write: How-To-Guy. If the mailto does not work, use this: hcohen[-At-]bst-softwaredevs.com.
© Herschel Cohen, All Rights Reserved
Return Home or Hardware Page
____________________________________________________________________ 1. The first was no space between the side and left edge, which I attempted to answer here. Return 2. Took two tries to understand, Safari 2.0.x just used digit percentage number padding, otherwise rounded off downward. Listing below: a. second article [Apple web-dev and webkit-dev may require membership] b. bug report, look at responses c. Solution summary Return 3. The difference is more obvious than shown, since the color chart is washed. A better rendering copy is skewed to include due to the angle of the shot and the attempt both monitors in a single exposure. Return 4. If you looked at the full display other colors pairs would exhibit no differences. Return