How can I get consistent color results?

[kendsnyder]

I'm trying to generate a square 32x32 where every pixel is #f76023. When I run the following on Mac OSX 10.8 with ImageMagick 6.7.7-6 2012-09-18 Q16

Code: Select all

convert -size 32x32 xc:"#f76023" -colorspace RGB square.png

I use the OSX ColorSnapper to sample colors and square.png looks different in different programs:
1) #fa5b31 in Firefox
2) #f56130 in Preview and Safari
3) #f26521 in Chrome
4) #f76023 in Photoshop (Correct)

If I run the same command on Ubuntu 12.04.2 LTS with ImageMagick 6.6.9-7 2012-08-17 Q16, I get the following:
1) #f76023 in Firefox (Correct)
2) #f46130 in Preview and Safari
3) #f26521 in Chrome
4) #f76023 in Photoshop (Correct)

square.png on Linux - IM v6.6.9-7 (203 Bytes)


square.png on OSX - IM v6.7.7-6 (350 Bytes)


Is there some setting like a color profile that I can use to produce correct and consistent colors?

[snibgo]

I suggest you upgrade to a more recent IM, from about 6.7.9 onwards. Then you won't need the "colorspace RGB" conversion.

[kendsnyder]

No dice. I upgraded to IM 6.8.2-6 on OSX and now I get mostly the same result:

Code: Select all

convert -size 32x32 xc:"#f76023" square-OSX-6.8.2.png

1) #fa5b31 in Firefox (Same as OSX IM v6.7.7-6)
2) #f46130 in Preview and Safari (Same as Ubuntu IM 6.6.9-7)
3) #f26521 in Chrome (Same as OSX IM v6.7.7-6)
4) #f76023 in Photoshop (Correct, same as OSX IM v6.7.7-6)

square-OSX-6.8.2.png on OSX - IM v6.8.2-6 (271 bytes)


I've got to be missing something. Creating an image with a single color seems like a basic task.

I did notice in PathFinder that there is some kind of file metadata for the OSX versions that is not present in the Linux version:

Code: Select all

{PNG}: InterlaceType: 
	0
Gamma: 
	0.45455
Chromaticities: 
	0: 
	0.3127
1: 
	0.329
2: 
	0.64
3: 
	0.33
4: 
	0.3
5: 
	0.6
6: 
	0.15
7: 
	0.06
sRGBIntent: 
	0

[snibgo]

It is a basic task, and it works, in my experience.

Dump the file from IM:

Code: Select all

D:\web\im>"%IMG%convert" square.png txt:
# ImageMagick pixel enumeration: 32,32,65535,srgb
0,0: (63479,24672, 8995)  #F7F760602323  srgb(247,96,35)
1,0: (63479,24672, 8995)  #F7F760602323  srgb(247,96,35)
2,0: (63479,24672, 8995)  #F7F760602323  srgb(247,96,35)
3,0: (63479,24672, 8995)  #F7F760602323  srgb(247,96,35)
4,0: (63479,24672, 8995)  #F7F760602323  srgb(247,96,35)
5,0: (63479,24672, 8995)  #F7F760602323  srgb(247,96,35)
6,0: (63479,24672, 8995)  #F7F760602323  srgb(247,96,35)
7,0: (63479,24672, 8995)  #F7F760602323  srgb(247,96,35)
8,0: (63479,24672, 8995)  #F7F760602323  srgb(247,96,35)
9,0: (63479,24672, 8995)  #F7F760602323  srgb(247,96,35)
10,0: (63479,24672, 8995)  #F7F760602323  srgb(247,96,35)
11,0: (63479,24672, 8995)  #F7F760602323  srgb(247,96,35)
... etc

You are getting 4 different values, so at least 3 are wrong. How are you getting the pixel colour values from the browsers?

[fmw42]

convert -size 32x32 xc:"#f76023" -colorspace RGB square.png

-colorspace means two different things for systems before 6.7.5.5 (or possibly 6.7.6.7) and later systems.

In the older systems it would convert the sRGB color to sRGB, even though the colorspace in the verbose info said RGB. Basically before the change, sRGB and RGB were backwards.

In the newer systems it would convert the sRGB color to linear RGB, which is darker.

If you want to have sRGB colors all the time, take out the -colorspace RGB. That will always make your colors the brighter sRGB


Note PNG may have changed slightly by defining rendering intent formally to perceptible in the newer systems, whereas in the older ones it was undefined.

[kendsnyder]

Aha! It's OSX!? So first off, all three of the images I posted give the same pixel enumeration for me on OSX:

Code: Select all

# ImageMagick pixel enumeration: 32,32,255,srgb
0,0: (247, 96, 35)  #F76023  srgb(247,96,35)
...

Second, using my Apple Thunderbolt display or my MacBook Pro display, the first two images look noticeably different in Firefox. I'm using a color picker called ColorSnapper for OSX.

But here's the interesting part. When I look at this forum post on my Windows 7 machine, all three images look the same and the color picker program ColorPic shows the correct #F76023 for all three.

So I guess the real question is, WTF is OSX doing? Is there some setting I can change? Can you other OSX users see the difference between the first two images or is it just my machine?

And does IM output depend on OSX system color settings? Or does IM on OSX output images right but OSX just displays them weird?

[snibgo]

I expect that this command will produce the same pixels (as shown by txt:) on all operating systems.

Modern operating systems contain color management systems, with the goal that different displays will show the same wavelengths of light from the same pixel values. This might be handled automatically by the operating system, or at the request of applications, or entirely within applications.

Traditionally, Apple has been better than Microsoft at providing this facility. As Microsoft have been slow to implement this, some applications include their own facilities to translate colours for different displays. In FireFox, type "about:config" in the address bar.

You may have the situation that an application and the operating system are both tweaking the pixels for your display, with the result that the pixels are over-tweaked.

You are using programs that read the pixel values from the screen. Perhaps ColorSnapper gives the value after CMS, and ColorPic gives the value before CMS.

I don't use OSX, so that's about the limit of my knowledge.

[kendsnyder]

I've found using no color profile makes PNGs look the same across all browsers. The `-strip` option discards comments and color profiles, including the default sRGB color profile IM uses.

Code: Select all

convert -size 32x32 xc:"#f76023" -strip square-stripped.png

I don't know if that is the best way, but it produces the exact colors across all browsers across all platforms. It can look funny in Preview or Windows Explorer, but I'm only concerned with browsers.