background color not matching

[Michael Satterwhite]

I have a .jpg image with a known background color (#F6F6FF). Using a style
sheet, I specify background-color: #F6F6FF;. The problem is that when the
page renders, the background color is *CLOSE* to the background-color of
the image, but it doesn't match. As a result, the boundary of the .jpg is
visible.

What can I do to make these colors match?

tia
---Michael

 

[Roy Schestowitz]

I have a .jpg image with a known background color (#F6F6FF). Using a style
sheet, I specify background-color: #F6F6FF;. The problem is that when the
page renders, the background color is *CLOSE* to the background-color of
the image, but it doesn't match. As a result, the boundary of the .jpg is
visible.

What can I do to make these colors match?

tia
---Michael

Use indexed colour palette in a format like PNG or GIF. JPEGs rely on
wavelets and are an approximation. This means that the background of your
image will not be guaranteed to match the background colour.

Roy

 

[Nico Schuyt]

I have a .jpg image with a known background color (#F6F6FF). Using a
style sheet, I specify background-color: #F6F6FF;. The problem is
that when the page renders, the background color is *CLOSE* to the
background-color of the image, but it doesn't match. As a result, the
boundary of the .jpg is visible.
What can I do to make these colors match?

Use another image. When the first one is in a div: set a background image
for the body etc

 

[saz]

I have a .jpg image with a known background color (#F6F6FF). Using a style
sheet, I specify background-color: #F6F6FF;. The problem is that when the
page renders, the background color is *CLOSE* to the background-color of
the image, but it doesn't match. As a result, the boundary of the .jpg is
visible.

What can I do to make these colors match?

tia
---Michael

You are now experiencing the same problem we have all faced. Everything
you code in HTML and CSS is a suggestion, not an absolute. All you can
do is come close.

You will never get an exact match. Every browser and every machine will
render that background color in the manner in which it reads the code,
not what you suggest. In your case, it gets worse when you are not
using web safe colors.

If this is a logo (instead of a picture) my suggestion is to make the
image a transparent gif if possible.

 

[Jonathan N. Little]

I have a .jpg image with a known background color (#F6F6FF). Using a style
sheet, I specify background-color: #F6F6FF;. The problem is that when the
page renders, the background color is *CLOSE* to the background-color of
the image, but it doesn't match. As a result, the boundary of the .jpg is
visible.

What can I do to make these colors match?

tia
---Michael

JPG uses 'lossy' compression to reduce the file size of an image. It
will reduce the number of colors by grouping area approximately the
'same color' where in photographic style images the human eye will not
notice the changes. What this means is that the #F6F6FF color pixel you
set for that background may not be #F6F6FF in the final JPG. That is why
bold hard-edged limited-color graphics work better with 'lossless'
formats like GIF and PNG.


My advice is if the images are 'photographic' in nature (> 256 colors)
your are best to re-think your design where the mis-match will not me as
noticeable, i,e,, contrasting backgrounds, borders or frames or use an
image for your background taken from the final JPG. Or if your image is
more 'graphic' or 'cartoonish' reduce the palette and use a transparent
color to cutout the image and let the background color through.

PNG formate does allow for 'lossless' compression and transparency, even
graduated transparency but some browsers like MS IE do not full
support PNG.

 

[Kate]

I have a .jpg image with a known background color (#F6F6FF). Using a style
sheet, I specify background-color: #F6F6FF;. The problem is that when the
page renders, the background color is *CLOSE* to the background-color of
the image, but it doesn't match. As a result, the boundary of the .jpg is
visible.

What can I do to make these colors match?

tia
---Michael

I got around this problem by using a colour picker ( I use Eclipse Palette
it's free at this address
http://www.greeneclipsesoftware.com/eclipsepalette.html ) on the background
colour of the image then using that colour in my css) It hasn't failed me
yet.

Hope this helps,
Kate

 

[dorayme]

I got around this problem by using a colour picker ( I use Eclipse Palette
it's free at this address
http://www.greeneclipsesoftware.com/eclipsepalette.html ) on the background
colour of the image then using that colour in my css) It hasn't failed me
yet.

Hope this helps,
Kate

Yes, I have found that this problem comes up more when the colour concerned
is not a websafe colour (websafe colours are from a special palette that
most web browsers support, a small subset of all colours).

If it is "a known colour" as the OP says, how can a colour picker solve the
problem?

I have done this to get around the issue: change the jpg bg colour to a
websafe one. This may or may not be your cup of tea. Mostly not so hard. In
Photoshop, for example, you can select (via paths or magic wands or
menus...) the colour concerned, or - importantly - enough of it on the edges
and substitute a close looking websafe one. In other words, prepare the pic
to suit the popular browsers rather than find a way to get them to suit the
pic.

dorayme

 

[Lauri Raittila]

Problems:
1. JPG is not necessarily sving the color exactly
2. 16bit colors may cause problems on 24bit images

Solutions:
1. Use png or other lossless format
2. Uee png or other image with transparency

That would work, assuming the problem is #1. In case of #2, it just looks
to solve problem, and might even cause another.

Yes, I have found that this problem comes up more when the colour concerned
is not a websafe colour (websafe colours are from a special palette that
most web browsers support, a small subset of all colours).

Websafe colors are not websafe. As user of any 16bit color can see.

Web safe colors are relic from age when 8 bit display drivers and thus
256 colors were usual. 256 colors are very unusual today. 2 colors are
much more used. As is 16bit (65 thousand color). So called websafe colors
aren't on either, so there is no sence to limit yourself to them.

If it is "a known colour" as the OP says, how can a colour picker solve the
problem?

To tell if the color really is what it is supposed to be. Jpg is lossy
format, and it might have changed while saving.

I have done this to get around the issue: change the jpg bg colour to a
websafe one.

I have tried it many times, but it usually don't work...

This may or may not be your cup of tea. Mostly not so hard. In
Photoshop, for example, you can select (via paths or magic wands or
menus...) the colour concerned, or - importantly - enough of it on the edges
and substitute a close looking websafe one.

If you only get area near edge, there still will be difference at some
point. And changing background of jpg might be almost impossible. But if
OP is maker of this jpg, he should have orginal somewhere.

In other words, prepare the pic
to suit the popular browsers rather than find a way to get them to suit the
pic.

Yes.

 

[Kate]

me



Yes, I have found that this problem comes up more when the colour concerned
is not a websafe colour (websafe colours are from a special palette that
most web browsers support, a small subset of all colours).

If it is "a known colour" as the OP says, how can a colour picker solve the
problem?

When I have used this method in the past, where the colour has not been
saved to what
you thought it was, the colour picker was useful in allowing me to get the
code. As this Eclipse Pallet allows you to exports the colour in these
formats.

<C&P from their website>-------------

HTML #FFFFFF
raw 32-bit integer
Visual Basic &hFFFFFF
Visual Basic RGB(255, 255, 255)
C++, C#, Java 0xFFFFFF

------------------------------------------------

It was just a suggestion, that's all. As I have stated it has worked for me
in the past, I'm sorry I was just trying to help.

Have a good Sunday,
Kate

 

[dorayme]

Problems:
1. JPG is not necessarily sving the color exactly
2. 16bit colors may cause problems on 24bit images

Solutions:
1. Use png or other lossless format
2. Uee png or other image with transparency


That would work, assuming the problem is #1. In case of #2, it just looks
to solve problem, and might even cause another.

If it was #2, what might the problem be? Interesting that you raise this
issue of different bit colour. Perhaps this is getting a bit ot, but would
appreciate any link to a good discussion of the issue.

Websafe colors are not websafe. As user of any 16bit color can see.

Web safe colors are relic from age when 8 bit display drivers and thus
256 colors were usual. 256 colors are very unusual today. 2 colors are
much more used. As is 16bit (65 thousand color). So called websafe colors
aren't on either, so there is no sence to limit yourself to them.

OK... um... well...I'm a relic myself actually... but I want to be more
modern. I have been thinking lately to move from the use of websafe palettes
for general website construction as I do notice that many nice sites use the
full range of #RRBBGG; I find that it is easier to become familiar with the
vastly smaller subset colours and their notation and had been thinking that
doing a lot with a little is a good thing... but I digress.

To tell if the color really is what it is supposed to be. Jpg is lossy
format, and it might have changed while saving.

Yes, I see your point about colour changing from original to jpg compressed.
I was thinking the OP knew the resulting pic's colour. On the issue of
changing the jpg itself, my impression has been that there are no surprises
in colour if one does not redo the compression.

I have tried it many times, but it usually don't work...

If you only get area near edge, there still will be difference at some
point. And changing background of jpg might be almost impossible. But if
OP is maker of this jpg, he should have orginal somewhere.

Well, yes, it needs sensitive handling and depends on the pic and what is
desired for integration on the page, one would not simply select a band
around the edges... If the OP had original pic, there would still be the
problem of compression change...

Yes.

Well, maybe you are just being nice here! If one is free to use millions of
colours in website construction, maybe one can design to suit the pics more!

dorayme

 

[Lauri Raittila]

If it was #2, what might the problem be?

Rounding of color. In 16bit display drivers 24bit colors are rounded
(or dithered?). This happens differently, and you can't really predict
it, or at least I have not found a way. But if you "fix" issue by
changing background color to what it seems to be in image, you will
result problems on other things.

Interesting that you raise this
issue of different bit colour. Perhaps this is getting a bit ot, but would
appreciate any link to a good discussion of the issue.

Don't have one handy. Thare was discussion about this in here, ciwas or
ciwah some time ago.

I do notice that many nice sites use the full range of #RRBBGG;

That worked on age of 8bit as well (at least on end of the age), exept
that you neede to be careful on how many colors you did use. (if you only
used few, it was usually no problem.)

I find that it is easier to become familiar with the
vastly smaller subset colours and their notation.

I have been using full hex codes almost 10 years, and I am starting to
get grip of them. So I don't need color chooser anymore.

original pic, there would still be the problem of compression change...

But you could try to tweak settings as long as it will reasult right
color...

 

[dorayme]

When I have used this method in the past, where the colour has not been
saved to what
you thought it was, the colour picker was useful in allowing me to get the
code. As this Eclipse Pallet allows you to exports the colour in these
formats.

<C&P from their website>-------------

HTML #FFFFFF
raw 32-bit integer
Visual Basic &hFFFFFF
Visual Basic RGB(255, 255, 255)
C++, C#, Java 0xFFFFFF

------------------------------------------------

It was just a suggestion, that's all. As I have stated it has worked for me
in the past, I'm sorry I was just trying to help.

Have a good Sunday,
Kate

No, it was a good suggestion Kate. I was thinking the op knew the colour...
I want now to have a better Monday... dorayme

 

[Kate]

No, it was a good suggestion Kate. I was thinking the op knew the colour...
I want now to have a better Monday... dorayme

A good Irish friend of mine used to say "may all of your horizons, rise up
to greet you". Have a good Monday and here's to your horizons! ;-)

Kate