Image color in jpeg doesn't match backround color in web page

I made a simple panel in photoshop and used the #number for the color selected to fill one side of the panel in my CSS code. When the page is rendered there's a very slight difference between the panel and the background which I expect to be exactly the same.
Am I doing something wrong?
Thanks

This is normal behavior for Photoshop, or any color managed application.
There are ways to guard against it. The root of the problem is that jpgs
are color managed by Photoshop, while the web background is not.
You may be able to do an end run around the problem by using a transparent
png image instead of a jpg. If you want to stay with a jpg image, the
simplest solution is probably to turn Color Management off in the drop-down
in PhotoShop's Color Settings (accessed via ctrl-shift-K). Another
possibility is to assign (not convert) your image to your monitor profile.
It is also highly advisable to use sRGB as your working space. Do not
embed a profile if it is important that the jpg's colors match the non
color managed objects on the web page.
If you do embed a profile - for example the sRGB profile, then color aware
browsers will convert your jpg images to the user's display profile, and
the person viewing your web page may see a mismatch between your carefully
prepared jpg and the background.
It is conceivable that certain color managed browsers will default your
image to sRGB, and perform a color conversion even without a profile, in
which case you will see a mismatch no matter what you do. If that happens,
you may be able to do something tricky, like use a scaled png or jpg image,
filled with your background color, as your background.
The key point to remember is that gif images, and numeric web color values,
are not color managed by color aware browsers, but jpgs are. Including an
embedded profile in the image means that the browser is free to convert the
colors in a jpg image. Result: different color numbers.

Similar Messages

I have been having a issue with getting the colors on my monitor to match the colors fro my print lab. I now have the monitor calibrated to match the prints but when I open elements it doesn't use the same colors. If i have it use the calibrated profile b

I have been having a issue with getting the colors on my monitor to match the colors fro my print lab. I now have the monitor calibrated to match the prints but when I open elements it doesn't use the same colors. If i have it use the calibrated profile by changing the color management settings, the color picker no longer shows true white or black. How do I get elements 12 to honor the new calibrated settings?

Ok so I've done what you said and this is what it's come back ....
I don't know that these are the errors , but they're the things which don't look right ...
Throughout the shut down there is a recurring line ;
It says ;
Com.apple.launchd 1 0x100600e70.anonymous.unmount 301 PID still valid
Then there are 2 more which I think are related ;
Com.apple.securityd 29 PID job has I overstayed its welcome , forcing removal.
Then the same with fseventd 48 and diskarbitrationd 13
Oh and on Launchd1 : System : stray anonymous job at shut down : PID 301 PPID13 PGID 13 unmount...
Then the last process says "about to call: reboot (RB_AUTOBOOT).
Continuing...
And stops ...
Hope this means something to you ... Thanks again for your help so far :-)

Ff22 has two top bars, both of which act simultaneously in the identical way. Furthermore, the BACK button doesn't light up on many web pages. That means I cann

Problem #1.
The first top bar has a firefox logo at upper left corner and the words "Ask a Question/Mozilla Support-Mozilla Firefox" are on the logo's right side. The first top bar has minimize, overlap and close buttons at the upper right corner. When I click on the logo, a short menu drops from it, which has choices like "restore"..."close".
The second top bar has the word "Firefox" at the upper left corner with a downward arrow beside it. They look like white letters contrast to the orange background of a huge button. When I click on it, a double paned menu shows up. It has many choices such as new tab, new private window...bookmarks, history, download...exit. The second top bar also has minimize, overlap and close buttons at the upper right corner, too. There are 7 word titles "file, edit, view, history, bookmarks, tools and help" below that huge orange button at the upper left corner. The logos and the address bar are below the 7 words.
I don't need 2 top bars. They occupy too much screen property.
Problem #2
The BACK button doesn't light up and cannot work on many web pages.
Thank you

It sounds like there is either an application or an extension of Firefox that is causing this problem.
You can launch Firefox in Safe mode to try and identify problems: http://mzl.la/MwuO4X
Also, this article might be of interest to you: http://mzl.la/NjT73w
Additionally, you can try and do a soft reset of Firefox if you are not able to solve this problem: http://mzl.la/MnSTZB

Image created is cropped, doesn't match preview

In creating any image size larger than 11x17, I get the same result. The document previews correctly, but the PDF image is cropped on the right and bottom. (The remaining area is white space.) I've attempted this by "adding" new page sizes under properties and by "creating custom page size" under Converter Advanced Options.
Searching help and the forum has returned only one document that seems like it might apply. There's a help doc on "Presets" that talks about Engineering Drawings. However, this doesn't show up under my settings options and the doc is totally inadequate in describing how to get to it. There's a reference to a location of "extras" in docs & settings, but it isn't there on my system and a search for the folder has come up blank for anything related to Adobe.
I've got a couple of hours invested in this and I'm pretty frustrated. Any help would be greatly appreciated. Thanks in advance.
Windows XP Pro / Acrobat Standard 8.1.2

I've got a couple of days invested in the same problem. The good news is that when you choose your file to be converted, if you will change the type of files box to just the file you want to convert (For example: change "all files" to "doc" files), a little settings box will come up on the right that will allow you to change the size of the pdf documents. The bad news is the pdf still converts to letter size, no matter what you put the settings at. If you find out what the problem is there, please post it.

Colors on monitor do not match printer colors

Ok, guys, I'm desperate. Have worked about 24 hours now trying to get what I see on my screen to be what comes out of the printer.
Using MBP 10.9.4, Epson 2200 and 490, in Seashore, Preview, ColorSync Utility, Splashup Light, etc, etc. Unfortunately, Photoshop is too expensive so reduced to these other apps. Have tinkered, calibrated monitor, read everything I can find online on the matter and nothing I do helps. The Image is dull and the colors are off. It's as tho a wash of something like tan was applied to the image.
this is what it looks like on my screen.
Below is how it's looking coming out of the various printers.
This has been going on forever but I didn't have the patience to figure out. Now it's necessary and a deadline is coming.
HELP.
Here you go with the paper version:
Please excuse the less than desirable lighting conditions but I think you get the point.
Thanks.

For a bunch of color detail info, see my responses in this topic.
In a nutshell:
1) Really, truly profile your monitor. That means a hardware/software solution like the X-Rite i1 Display Pro. Eyeballing it in the System Preferences is literally a waste of time.
2) Make sure you are using the output profile that matches the paper and printer you are using.
Be aware that even with these in place, paper output will never look exactly like the monitor. Especially on plain paper.

If I try and follow a link from another website to open another I get awclick.php (GIF Image 1x1) pixels in a new tab instead of the web page I want.

I was trying to open a website as a link from another website and I get a new tab that says
awclick.php(GIF Image 1x1 pixels)
I can open the website without clicking on a link to it by just typing in the address but as this is a cash back site I am linking from it doesn't help!

You're welcome

RAW to Jpeg quality looks fine in Aperture not so good on Web page

I am using the latest version of Aperture with the Retina display. The Raw images look tremendous, after I resize the image and save it to jpeg the image still looks good. When I upload to a web page the image looks horrible. There is a lot of noise and the image over all looks blurred. I open it in Aperture and it looks fine. What is the issue? I have tried the different settings when saving the image and nothing works. I have also saved the image in a tif format and still the same issue. Looks great in aperture not so great on the web. Please help if possible.

Your site is likely re-sampling your file, perhaps because it is too large. Ask the Webmaster what size and quality to make the JPGs, and export to that. There may also be a browser issue.
If you provide some details re: exactly how your are exporting, which site you are using, how the JPG is used, etc., someone here may be able to provide additional guidance -- but this seems to be a Web question, as Aperture -- from what you say -- is working well for you.

Safari browser is not loading images in web pages..

It happens so often nowadays.. When I login to my Facebook, it wouldn't load any images, where it will all be blank..Also, few web pages are not loading in Safari, whereas it loads well in other browsers.. I am using Macbook Pro.. Mac OS X Lion 10.7.4.. Safari Veersion 5.1.7.. Has anyone faced this issue ??

Safari 5.0.1 or later: Slow or partial webpage loading, or webpage cannot be found

Trouble access image files (.tif) in browser from web page

Interesting issue. I have a database storing file locations
for some images in the .tif format. I then created my web page and
have a link that uses the value in the database. when i click on
it, i get the red x. however, if I copy and paste the link into my
browser, the images pops up as it should. Am I missing something
here?

James0816 wrote:
> Interesting issue. I have a database storing file
locations for some images in
> the .tif format. I then created my web page and have a
link that uses the
> value in the database. when i click on it, i get the red
x. however, if I
> copy and paste the link into my browser, the images pops
up as it should. Am I
> missing something here?
>
I don't think browsers can display TIFF files unless they
have a plug
in.... tiff images are way too big (file size) to be using in
a webpage
anyway

[help] images colors doesn't match

Hello, when I place an image inside a new document the colors doesn't match with original.
For sample I save in tiff format from photoshop a rich black (70% 50% 30% 100%) when I place inside illustrator I get (86,01% 84,97% 78,95% 100%).
The color profile are syncronized and I use Europe General Purpose 2 (CMYK Coated FOGRA27 ISO12647-2:2004)

How do you know what values the bitmap image has in Illustrator? Did you pick up the color with the Color Picker? It's possible this originally picked up the value in RGB, and that got converted.
Does Illustrator have a CMYK separation preview such as InDesign, where you can measure the original TIFF values? If not, you can also save as PDF and examine that in Acrobat, using the Output Preview.

Image in Lightroom doesn't match exported image viewed in Photoshop

After all my hard work in Lightroom, I export the image to a folder on my hard drive. When I open this exported image in Photoshop and view it alongside the Lightroom version of its "twin" in Lightroom, there is a significant difference. Why is this? I want to use these images in my books, but my time is wasted if I end up with anything other than what I created in Lightroom. Shouldn't these images match exactly?

Thanks Jao and Michael...the color management idea makes a lot of sense.
Adding to this idea, when I open the Pshop file I get a message about the doc having an embedded profile that doesn't match current RGB working space, and the usual 3 options: Use the embedded profile, Convert color to the working space, or discard embedded profile. No matter which option I choose, none of the opened docs match the Lightroom version.
The color balance is fine, but the colors aren't as vibrant. The Pshop photo is dull and lifeless compared to the Lightroom version. I used Clarity which added subtle brightness, and Vibrance to crank up the color in LR which added wonderful dimensionality and punch to the landscape scene, but the Pshop version has dulled these back down.

How do I Convert a Tiff image to a jpeg without being FORCED to 8-bit Color?

I am an Artist. I have High quality TIFF images. When I convert the tiffs to jpeg it forces me into 8-bit color automatically. (Forget about 32bit - it will not allow me to jpeg that at all) The only way I can get back to 16bit color is to use the already SMAshed file and bring it up to 16bit. THIS makes NO sense. Once the jpeg is smashed, HOw in the world is it supposed to convert up again. ?? Then even though it says you converted the file to 16 -bit , the metadata refers still to the file as 8-bit.
On top of all of that confusion, One picture, for example, when supposedly converted to 16bit, gets much BRighter then even the original Tiff image. It looks good on one hand and over exposed on the other. I assume that is photoshop throwing in fake resolution, am I right?
Am I wasting my time with this imaginary 16bit conversion?
Is there ANY way to take that original Tiff image and convert it to 16bit jpeg without the Default 8bit? I have been trying all kinds of things. I even have asked my web guy. My web guy says that 8-bit is unexceptable for printing, even for web.
Could this have anything to do with my computer and scanner?
I have the iMAC OS X 10.8.3 (3.2 GHz) 8 GB memory.
And I also have an Epson Expression 10000XL graphic arts scanner capable of scanniing at 48bit color.
This color stuff Really matters! It MATTERS! I HAve FINE art files. I am already losing so much quality with the jpeg conversion. (which I am required to do for SmugMug, in addition to compressing all my files to 50mb or Under)
Anyone who knows anything that could help me would be much appreciated.
Aloha,
-Melissa

First of all jpeg is 8 bit only there is no way to save as a 16 or 32 bit jpg, just does not exist. Secondly people print in 8 bit all the time and most if not all web graphics are in 8 bit as that is the only way to view it as there is no 16 bit or 32 bit monitors to view it. All but a few pro monitors are 8 bit monitors.
If you care about the color gamut and want the full range of color that 16 and 32 bit provide, then why jpg? Jpg by its own nature throws out color just to compress, thats why it is popular on the web, because of its small file size not its quality. If you need 16 or 32 bit for anything it must be in a format that supports that color depth.
That being said a jpg image at 8 bit will display 16+ million colors, 256 shades of red, 256 shades of green and 256 shades of blue.
Now here is where I think your bit information is off. a jpg image is a 24 bit image that will produce 8 bits of red, 8 bits of green and 8 bits of blue.
The 8, 16 and 32 are per channel not total color information.
If the overall image was 8 bits, the image would be gayscale.

PSE 7 bright vivid colors, doesn't match prints

I tried searching for a thread to answer this question but I could not find something that really helped specifically.
Use PSE7 to edit my jpg's and when I'm happy with the results then go to print, my prints do not match what I created on screen. The colors are much darker, the rich greens in my landscapes are dull with a dark tint..overall, quite disappointing.
I use a Spyder 3 pro to calibrate my monitor and use that profile as the printing profile for PSE7. I shoot a Canon 40d in sRGB. My monitor and printer (Canon MP600) are set to use the profile created by the Spyder 3 Pro software.
When I use Canon Digital Photo Pro to edit raw images, the colors on screen are consistent with what I get printed on my Canon MP600. The main difference here is that Canon DPP allows you to select the profile for image display and for printing.
Does PSE7 allow you to somehow select from your list of available profiles what color profile to be used for display? Out of the color management options, I've tried to use the "Optimize for display" and "Optimize for printing" options..."no color management" and "let me choose.." still no difference in the prints vs. the screen.
If I take a file that I printed in Canon DPP, where the colors on screen match what is printed, and then open that same file in PSE7, the colors on screen are much different...they are much brighter and vivid than what I see in Canon DPP.
All I can do in Canon DPP is edit raw files and do the basic color editing...Obviously, PSE7 has many more features and plugins that are useful so I'd like to work in that program and print from there.
If I do all my editing of a file in PSE7 until I'm happy, my prints still won't match what I see in PSE7. If I take that file and open it in Canon DPP, the colors are different, but they match what came out of the printer, albeit...darker and not vivid

Thanks..that did the trick. I feel like a big dummy now
I got the explanation of the printer/paper profiles for my printer on the Canon website.
The prints are MUCH closer...the only difference I can tell now is eliminated when I use a good light to view my prints, when held up to a good light or sunlight, the prints are very true to what I see on the screen.
thanks

Image Trace colors don't match selected color group. (Mac, CS6)

When I select the Document Library option when making a color image trace, the colors shift in the image but do not match the selected color group. I've tried multiple color groups, and the colors always change, but never match the selected swatches. Is this typical? Can anyone explain this?

After some additional experimentation, I discovered the problem was with images dragged from iPhoto and dropped into an illustrator file. When I placed the files instead, the colors matched the selected color group. After trying several other images using both methods, it appears as if dragging and dropping from iPhoto is a no-no when wanting to image trace and change the colors.

Same color doesn't match across documents

I have a document set up to cmyk preview and proof setup of working cymk us web coated (swop) v2. In this document I'm using a pantone solid coated reflex blue c. If I copy the object with that color to a new document the color drastically changes even though it's the same reflex blue. Notice in the image below, the blue is much richer. I've had three other people with illustrator/print background look at this and we've compared every setting we can think of but can't figure out why it's doing this. Any one have an idea? We need to match the blue on the right in the image below but for the life of us we can't. It always comes out somewhere between the two blues shown. Thanks.

Why is your color mode set to "CMYK" and not "Book Color"?
Drag the reflex blue swatch from the Pantone palette to the swatches palette and choose merge colors.
If you ever tweak a color, which is perfectly fine for getting betting color proofs out of a color proofer, always give it a differentt name (eg: PANTONE Reflex Blue C(cmyk))

Image color in jpeg doesn't match backround color in web page

Similar Messages

Maybe you are looking for