Skip navigation
sam1223
Currently Being Moderated

Color matching

Sep 2, 2010 2:07 PM

Beginner's question: Can a background color in a photoshop image perfectly match a background color specified in Dreamweaver? The goal is to have dark grey surrounding logo match the Dreamweaver background dark grey so that logo appears to float.

 
Replies
  • Currently Being Moderated
    Sep 2, 2010 2:15 PM   in reply to sam1223

    Sure. Just use the same color values in both applications.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 2, 2010 3:06 PM   in reply to sam1223

    Beginner's question: Can a background color in a photoshop image perfectly match a background color specified in Dreamweaver?

     

    Probably not.  HTML colors are 256 color palettes.  Photoshop images can be millions of colors.  If you have to match one with the other, slice a small snippet from the PS image, and use that as a tiling background image rather than trying to use HTML colors.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 2, 2010 3:15 PM   in reply to sam1223

    Can you give us a link to an example of what you're working with?

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 2, 2010 3:52 PM   in reply to sam1223

    Thought of tiling a background, wondered if it was too complicated. Would it create issues in the page appearance on various browsers?

     

    No.

     

    Is this the common fix?

     

    Yes.

     

    I used "web safe" colors for in both programs, still get an edge between PS image and DW backgrd.

     

    In that case, something else is going on, since web safe means a 256 color palette. Does your PS image have texture in it by chance?

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2010 5:43 AM   in reply to sam1223

    If you use Photoshop's Save for Web feature, be aware that, unless otherwise unchecked, it will embed an sRGB color profile into your web graphics. Some browsers support color profiles and others don't. This can be problematic and cause color shifts (between html hex color code versus a Photoshop-created JPEG). For general web image work, I'd suggest unchecking that sRGB color profile box.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 16, 2011 8:01 AM   in reply to sam1223

    Hey, I'm having the same problem, except I'm using a background image created in photoshop tiled vertically and can't get the color it contains to match with that of a .jpg image I have overlayed on top of it. They both use the same hex code color but do not show up looking the same in dreamweaver. Shouldn't hex codes be universal and always match themselves? Could this be a compression issue with the background image? I've exported the .jpg at maximum quality but the background image is a .png, could that be the issue?

     

    Heres a link to the site: http://alecpage.com/in_progress/LvilleLax/index.html

     

    Notice the red shift below the banner... any ideas?

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 16, 2011 8:26 AM   in reply to A.P.Design

    Frankly I'm a little confused.  The page you gave the link to does not have a DTD, no html tags, no head tags. It appears your using html5 as well....

     

    What am I missing here?

     

    Gary

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 16, 2011 8:39 AM   in reply to A.P.Design

    The code on your page is invalid.  An HTML page cannot begin with a <title> tag....

     

    You have taken some creative license with your background style syntax -

     

     

    body {

        background-image: url(elements/images/Background_4.png) , url(elements/images/Tile_Left.png) , url(elements/images/Tile_Right.png);

        background-repeat: repeat-y, repeat-y, repeat-y;

        background-attachment:fixed, fixed, fixed;

        background-position:top center, left, right;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 16, 2011 8:49 AM   in reply to MurraySummers

    As is probably evident, I have very little html experience. I tend to work

    purely visually and this is a first foray into web design as opposed to the

    graphic design I usually do. Thanks for pointing out the spots where I need

    to spend some time with the html. As far as the visual issue of color

    matching, any ideas where the issue could lie?

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 16, 2011 10:23 AM   in reply to A.P.Design

    Ugh - all of my post didn't post!  Here's the missing part -

     

     

    An element can only have a single background image, so that style doesn't accommodate multiple image specifications.  The only background image that will be used is the first one (Background_4.png).

     

     

    The color above the menu is #801B0F (http://alecpage.com/in_progress/LvilleLax/elements/images/menu/Top.jpg) and that below the banner (but still part of the banner image - http://alecpage.com/in_progress/LvilleLax/elements/images/menu/Banner. jpg) is #8C1114.  Meanwhile the body background image (http://alecpage.com/in_progress/LvilleLax/elements/images/Background_4 .png) is #8C1115.  Get all of those colors the same, and they will look the same on the page.  A part of your problem could be that you are trying to match PNG (256 color palette) color to JPG color (millions of colors palette).  It's much easier to match JPG to JPG, or PNG to PNG.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 16, 2011 11:46 AM   in reply to MurraySummers

    Thanks, that helps a lot. As far as the html goes, I'll get to work on the basics.

     

    Thanks for the help.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 10, 2012 5:10 AM   in reply to sam1223

    thank you

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points