Outlook xp and Outlook2003 changing colors on images

I have reached quite the impasse on my latest email template.  It seam like Outlook XP and 2003 are super saturating my images.  All have a slightly darker color than they should. 

Here is how it looks in Outlook XP and 2003:http://oi39.tinypic.com/24ffqtz.jpg

Here is how it should look: http://i40.tinypic.com/jil3qb.jpg

When checking color codes the miss match color on the Outlook design is the correct color.  It is the background color set by HTML.

In case you want to see my code it is as follow:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Email Template - Natural</title>
<style type="text/css">
h1 { color: #404450 !important; margin: 0px 0px 10px; text-shadow: #ccc 2px 2px 2px; font-size: 48px; font-family:Arial, Helvetica, sans-serif; }
h2 { color: #fff !important; margin: 0px; text-shadow: #000 2px 2px 0px; font-size: 24px; font-family:Arial, Helvetica, sans-serif; }
h3 { color: #8ca94c !important; margin: 10px 0px; font-size: 20px; font-family:Arial, Helvetica, sans-serif; }
h4 { color: #404450 !important; margin-top: 0px; margin-bottom: 0px; font-weight: bold; font-size: 18px; font-family:Arial, Helvetica, sans-serif; }
p { color: #404450; margin: 0px 0px 12px; font-size: 14px; font-family:Arial, Helvetica, sans-serif; }
a { color: #ff881c; text-decoration: underline; }
.intro p { color: #ffffff; margin-top: 0px; margin-bottom: 0px; text-shadow: #000 2px 2px 0px; font-size: 20px; font-family:Arial, Helvetica, sans-serif; }
.intro a { color: #ffffff; text-decoration: none; }
.footer p { color: #c2bcab; margin: 0px 0px 12px; font-weight: bold; font-size: 13px; font-family: Arial, Helvetica, sans-serif; }
.sc h4, .sc h4 a { color: #ffffff !important; margin-top: 0px; margin-bottom: 0px; font-weight: bold; font-size: 16px; font-family:Arial, Helvetica, sans-serif; text-decoration: none; }
.sc p { color: #ffffff; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: 16px; font-family:Arial, Helvetica, sans-serif; }
.issue h4 { color: #ffffff !important; margin-top: 0px; margin-bottom: 0px; font-weight: bold; font-size: 18px; font-family:Arial, Helvetica, sans-serif; }
.retitle{color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:14px;}
</style>
</head>
<body marginheight="0" topmargin="0" marginwidth="0" leftmargin="0" background="images/body-bg.jpg" style="margin: 0px; background-color: #f5f5df; background-image: url('images/body-bg.jpg'); background-repeat: repeat;" bgcolor="#f5f5df">
<p><!--100% body table-->
</p>
<table background="images/body-bg.jpg" cellspacing="0" border="0" cellpadding="0" width="100%">
  <tr valign="top">
        <td>
            <!--leaf background-->
            <table cellspacing="0" border="0" id="leaf" align="center" style="background: url('images/canvas-bg.jpg') no-repeat;" cellpadding="0" width="960">
                <tr>
                    <td>
                        <!--container-->
                        <table cellspacing="0" border="0" align="center" cellpadding="0" width="680">
                            <tr>
                                <td>
                                    <!--header-->
                                    <table cellspacing="0" border="0" id="header" cellpadding="0" width="680" style="position: relative; height: 162px;">
                                        <tr>
                                            <td height="39" valign="top">
                                                <!--web version link-->
                                                <table cellspacing="0" border="0" cellpadding="0" width="680">
                                                    <tr>
                                                        <td height="39" valign="top" style="background-color: #8ca746; background-image: url('images/web-version-link-bg.jpg'); background-repeat: no-repeat; background-position: top;" bgcolor="#8ca746" width="345">
                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td height="10"></td>
                                                                </tr>
                                                            </table>
                                                            <p style="padding: 0; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #fff; margin-bottom: 0px; margin-top: 0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Is this email not displaying correctly? Try the
                                                                <webversion style="text-decoration: underline; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #fff;">web version</webversion>
                                                            </p>
                                                        </td>
                                                        <td height="39">&nbsp;</td>
                                                        <td height="39" valign="top" style="background-color: #404450; background-image: url('images/foward-to-friend-link-bg.jpg'); background-repeat: no-repeat; background-position: top;" bgcolor="#3b2724" width="170">
                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td height="7"></td>
                                                                </tr>
                                                            </table>
                                                           <!-- <p style="text-align:center; font-weight: bold; font-size: 11px; font-family: Arial, Helvetica, sans-serif; padding: 0px; color: #fff; padding-left: 20px; margin-bottom: 0px; margin-top: 0px;"><b>
                                                               
                                                                &gt;&gt;</b></p>-->
                                                        </td>
                                                    </tr>
                                                </table>
                                                <!--web version link-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="123">
                                                <!--title and date wrapper-->
                                                <table cellspacing="0" border="0" cellpadding="0" width="680">
                                                    <tr>
                                                        <td height="123" width="470">
                                                           <img src="images/logo.jpg"/>
                                                        </td>
                                                        <td height="123" valign="bottom" width="210">
                                                            <!--date-->
                                                            <table cellspacing="0" border="0" id="date" style="-webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); background-color: #8ca94c; position: relative; right: 0px; bottom: -25px; color: #fff; font-size: 16px; font-weight: bold; font-family:Arial, Helvetica, sans-serif; margin-top: 0px; margin-bottom: 0px;" bgcolor="#8ca94c" cellpadding="5" width="250">
                                                                <tr>
                                                                    <td height="31" width="31"><img style="margin: 0px; padding: 0px; display: block;" src="images/clock-icon.jpg" align="left" height="31" width="31" /></td>
                                                                    <td height="31" width="149"><span style="font-family:Arial, Helvetica, sans-serif; color:#FFF; font-weight:bold; font-size:16px;"><currentmonthname /> <currentday>,  <currentyear></span></td>
                                                                </tr>
                                                            </table>
                                                            <!--/date-->
                                                        </td>
                                                    </tr>
                                                </table>
                                                <!--/title and date wrapper-->
                                            </td>
                                        </tr>
                                    </table>
                                    <!--/header-->
                                    <!--brown intro-->
                                    <table cellspacing="0" border="0" cellpadding="0" width="680">
                                        <tr>
                                            <td align="left" height="21"><img style="margin-top: 0px; margin-bottom: 0px; display: block;" src="images/intro-top-spikes.jpg" align="left" height="21" alt="intro" width="680" /></td>
                                        </tr>
                                    </table>
                                    <table cellspacing="0" border="0" cellpadding="0" width="680" bgcolor="#404450">
                                        <tr>
                                            <td id="brown-intro" valign="top" style="background-color: #404450; background-image: url('images/intro-bg.jpg'); background-position: bottom; background-repeat: repeat-y;">
                                                <table bgcolor="#83bb74" width="192" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        
                                                    </tr>
                                                </table>
                                                <!-- intro -->
                                                <table class="intro" width="680" border="0" cellspacing="0" cellpadding="20">
                                                    <tr>
                                                        <td>
                                                            <img src="images/enews-header.jpg" width="628" height="109" class="mainimg" />
                                                        </td>
                                                    </tr>
                                              </table>
                                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td height="75"><img style="margin: 0px; padding: 0px; display: block;" src="images/intro-bg-bottom.jpg" width="680" height="75" /></td>
                                                    </tr>
                                                </table>
                                          </td>
                                        </tr>
                                    </table>
                                    <!--/brown intro-->
                                    <!--main content-->
                                    <table cellspacing="0" border="0" style="border-bottom: solid 1px #dfedd7; border-bottom-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; -khtml-border-radius-bottomleft: 6px; -moz-border-radius-bottomleft: 6px; border-bottom-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -khtml-border-radius-bottomright: 6px; -moz-border-radius-bottomright: 6px;" cellpadding="20" bgcolor="#fffcf5" width="680">
                                        <tr>
                                          <td id="content">
                                                <!--content area 1-->
                                            <table cellspacing="0" border="0" cellpadding="0" width="100%">
                                                
                                                
                                                    <tr>
                                                        
                                                      
                                                    </tr>
                                              </table>

<table width="636" border="0">
  <tr>   
    <td valign="top" width="220">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td height="11" bgcolor="#404450"><img style="margin: 0px; padding: 0px; display: block;" src="images/sidebox-top.jpg" width="220" height="11" /></td>
                                                                </tr>
                                                                <tr>
                                                                    <td background="images/sidebox-bg.jpg" bgcolor="#404450">
                                                                        <repeater>
                                                                            <table class="sc" width="90%" border="0" align="center" cellpadding="0" cellspacing="5">
                                                                                <tr>
                                                                                    <td>
                                                                                        <h4>
                                                                                            <singleline label="Title">In This Issue</singleline>
                                                                                        </h4>
                                                                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                                            <tr>
                                                                                                <td height="12"></td>
                                                                                            </tr>
                                                                                        </table>
                                                                                         <ul style="margin: 0; padding: 0; line-height: 18px; list-style: none;">
                                                    <tableofcontents>
                                                       <li style="padding-left: 20px"><repeatertitle></li>
                                                    </tableofcontents>
                                                </ul>
                                                </td></tr>
                                                                         
                                                                            </table>
                                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                                <tr>
                                                                                    <td height="20"></td>
                                                                                </tr>
                                                                            </table>
                                                                        </repeater>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td height="11" bgcolor="#404450"><img style="margin: 0px; padding: 0px; display: block;" src="images/sidebox-bottom.jpg" width="220" height="11" /></td>
                                                                </tr>
                                                            </table>
                                                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                                                                                    </tr>
                                                            </table>
                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">

                                                            </table>
                                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                              
                                                          </table>
                                                          <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                          
                                                              <tr>
                                                                  <td>
                                                                  
                                                                     <repeater>


                                                                    <h4 style="padding-top: 10px;"><singleline label="sidebar title">Add a title</singleline></h4>
                                                                    
                                                                     <p><multiline label="content">Enter your description <a href="#">Sample link</a></multiline></p>
                                                                     </repeater>

                                                                  
                                                                  
                                                                  </td>
                                                              </tr>
                                                          </table>
                                                        </td>
    
    
<td width="10"></td>    
    
    <td width="395" valign="top">
    
   <repeater>
                        <layout label="Text only">
                      <table width="390" cellpadding="0" cellspacing="0" border="0" valign="top">
                      
                        <tbody>
                          <tr>
                            <td valign="top"><h3 align="left" class="article-title"><singleline label="Title" repeatertitle='true'>Add a title</singleline></h3>
                              <div align="left" class="article-content">
                                <p><multiline label="Description">Enter your description <a href="#">Sample link</a></multiline></p>
                              </div></td>
                          </tr>
                          <tr>
                            <td height="10"></td>
                          </tr>
                        </tbody>
                      </table>
                    </layout>
                    
                   
                  
                                                            </repeater>
  </td>
  </tr>
</table>

                                              <!--/content area 1-->
                                            </td>
                                        </tr>
                                    </table>
                                    <!--/main content-->
                                    <!--footer-->
                                    <table class="footer" cellspacing="0" border="0" id="footer" cellpadding="20" width="680">
                                        <tr>
                                            <td valign="top" width="300">
                                                <multiline label="Description"><p>You are receiving this newsletter because you subscribed to our Newsletter.</p></multiline>
                                                <p>
                                                    <unsubscribe style="color: #ff881c; text-decoration: underline;">Unsubscribe instantly.</unsubscribe>
                                                </p>
                                            </td>
                                            <td valign="top" width="300">
                                                <table cellspacing="0" border="0" cellpadding="0" width="220">
                                                    <tr>
                                                        <td valign="top"><a href="#" style="color: #ff881c; text-decoration: underline;"><img src="images/home-icon.png" border="0" height="19" alt="visit us" width="31" /></a></td>
                                                        <td>
                                                            <multiline label="Description"><p>IAHSA<br />
5460 Bearberry Lane<br />
Indianapolis, IN 46268<br />
P: 317.733.2380</p>
                                                            </multiline>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <!--/footer-->
                                </td>
                            </tr>
                        </table>
                        <!--container-->
                    </td>
                </tr>
            </table>
            <!--/leaf background-->
        </td>
    </tr>
</table>
</td>
</tr>
</table>
<!--/100% body table-->
</body>
</html>

I have never heard of this happening before so I am totally loss. Any help would be much appreciated!
Nicki

roshodgekiss roshodgekiss, 4 years ago

Hi Nicki, sorry about the delay in responding here. Yes, I have seen inconsistencies between image colors and background/web colors before - I'm not entirely sure why various email clients/apps choose different color profiles, however the easiest way to overcome this is to use a transparent GIF for the header instead of a .jpg. Instead of having a 'block' of color around the header text, make this area transparent and the white text should blend in nicely with the surrounding background color.

Thanks Nicki - I hope this helps!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098