[Pro] FWP 5.6.5 Color?

I noticed today that the colors displayed in the FWP 5.6.5 are way different than the color displayed in Safari or Firefox when previewing a page. To me, they appear much duller.

Why is that?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I can’t answer the question because I have it myself in Freeway 7.1.2 Pro. Safari 9.1 isn’t displaying colors correctly, despite it supposedly having Color Management. Chrome and FireFox (with or without color management enabled) are perfect.

Try this:

  1. Open Photoshop (or another color-accurate graphics app).
  2. Create an sRGB document of say 200x200px.
  3. Set Foreground Color to F0F0F2 (but any color would do).
  4. Use the Pain Bucket tool to fill your background with F0F0F2.
  5. Export as a PNG (8-bit is fine, with or without color profile), naming it F0F0F2.png
  6. Close it then reopen it in Photoshop and check using the Eye-dropper and Info palette that you are indeed seeing F0F0F2.
  7. Open FireFox and drag F0F0F2.png onto the browser window, then take a screenshot and paste into Photoshop, verifying the color is F0F0F2.
  8. Repeat Step-7 for Chrome. Again, no problem confirming F0F0F2.
  9. Repeat Step-7 for Safari. This time you will see F1F1F3! Wherefore art thou F0F0F2??

Again, color management doesn’t seem to matter. Neither does the graphic app (I can do the same test exporting from Graphic Converter 9, instead of Photoshop, and the result is exactly the same).

This problem has nothing to do with Freeway. Nevertheless, I would like to know how to solve it. Why? Because I often have an HTML box in Freeway with a light gray background color, into which I wish to place a pass-thru graphic which has the same background color. But if I pick the HEX color shown in Freeway and use that in my graphics app, it never shows up right in the browser! And yet, if I create an HTML box or even a Graphics box in Freeway and then view that in Safari, the color comes out accurate!

So I am thoroughly confused.

Does anyone know?

Thanks,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

On 22 Mar 2016, 7:30 am, JDW wrote:

I can’t answer the question …

But me:

http://dowebsitesneedtolookexactlythesameineverybrowser.com

and a bit in detail:

https://www.onedesigns.com/articles/why-websites-shouldn’t-look-the-same-in-all-browsers

Furthermore, I did some fun work (although I haven’t have the time for fun). My reference is a color-library I created step-by-step in Freeway. This was massively work and is looking like so:

https://dl.dropboxusercontent.com/u/8231701/cdn-digitalmedia-themes/theGridMaterialz/color.html

Then I did the following:

alt text

Full size download

A theme basically persists of two main colors (primary+accent) and some text/link gradation. I don’t see anything there which makes me outermost concerned. NOTHING! And even if I have a “critical” client I won’t “change” things up to his convenience, cause I have an answer. Try it yourself:

A Matter of Fact

Whatever is been displayed in Freeway, doesn’t matter at all. The truth is in the variety of browsers. And if every browser would display everything exactly the same, why to have a variety of them?

Because I often have an HTML box in Freeway with a light gray background color, into which I wish to place a pass-thru graphic which has the same background color

I’ve never done in none of my applications an operation like this - it’ll fail anyway. For such things, the .png or .gif has been created. Cropping (releasing) them does make sense! Or even rebuilt.

Allow me a final note:

Judge the “rusty red” in both Logos I recently did:

alt text

The same? Nearby? Different?

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Thomas, thank you for the detailed explanation and links, but you still didn’t answer the question about why Safari is the lone browser that differs from other browsers. Why is F0F0F2 the same in all browsers EXCEPT Safari? As I said before, it cannot be “color management” because I get F0F0F2 in FireFox with its color management OFF or ON.

Do colors need to be the same in all browsers? IT DEPENDS.

Do this:

  1. Create an HTML box and color it F0F0F2.
  2. Create a picture or illustration in Photoshop and ensure the background color is F0F0F2.
  3. Import your Photoshop pic (PNG or JPG or GIF, whatever you like) into Freeway as a Pass-thru and put that pic atop your HTML box that has F0F0F2 as its background color. Now you have SEAMLESS PLACEMENT of your pic on the background in Freeway.
  4. Preview in FireFox and Chrome and note it looks perfect.
  5. Preview in Safari. Depending on your screen (I have a late 2015 5K iMac) you may see the difference. But even if you don’t, take a screenshot and bring it into Photoshop, then open the Info palette and move your eye dropper tool all over the screenshot. Take note of how F0F0F2 is no longer F0F0F2 whenever you move over your pass-thru image. But interestingly, the HTML box created in Freeway and colored F0F0F2 stays F0F0F2.

I don’t treat this flippantly. Much of the time, minor color variations DO NOT MATTER. I agree. But when you import a PASS-THRU into Freeway and lay it atop a background with matching color, aiming for a SEAMLESS BLEND of those two objects, I FULL WELL EXPECT to see a perfect blend across all browsers. And if I do not get that I WANT TO KNOW WHY. And that is a question no one has dared to answer yet.

Please answer the question, if you can.

Thanks,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I seem to recall that Freeway used ColorSync in its image generation. Perhaps Joe could comment here about that. I have learned from bitter experience to turn that off in Photoshop if I want to get the same color in as out. Safari is the only browser that references ColorSync, as far as I know, so what’s possibly happening here is that the color is being tweaked to match your display in one browser, but not the others. Now I would expect that all things made to the same color number (if they were either HTML or GIF) would come out matching exactly. I would never expect a JPEG to match anything except a piece of itself. I don’t recall if PNG 24 is good this way, but I do know that PNG 8 registers to the Web colors very nicely. But ColorSync throws a huge monkey wrench in things in my experience.

What I have learned to do to work around this is to always match JPEG to a slice of the same image, exported at the same time, used as a tiling background on “flat” elements. I never trust anything – CSS or even another image format – to match a JPEG of a particular color. Photoshop is being special here, because when you use Export for Web, it constrains things to their proper colors, and more importantly, discards the ColorSync profile from the resulting images (whether you set it to Monitor Color or not).

I have also noticed this problem in CSSEdit, which also uses the OS color picker. If I set something to #ccc in CSS, then display it on screen and sample it with the OS color picker’s eyedropper tool, I will get some other color like cccc8c7 or something equally odd. This may be because I’m usually using Safari as my working browser, so it might not be CSSEdit’s fault entirely, but I definitely recall bringing this up with MacRabbit, and they explained the ColorSync thing to me then as well.

Walter

On Mar 22, 2016, at 7:58 PM, JDW email@hidden wrote:

Please answer the question, if you can.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Walter, Firefox has its color management disabled by default, but I enabled it via the info here:

http://cameratico.com/guides/firefox-color-management/

And like I said before, regardless of whether its ON or OFF in Firefox, all colors are correct. But in Safari, they are not. F0F0F2 is F0F0F2 everywhere EXCEPT Safari. And again, as I said in an earlier post in this thread, even if I embed the color profile to the JPG or PNG I save in Photoshop, Safari still shifts the colors, but no other browser does. I want to know the technical reason WHY that happens only in Safari, even if one argues there is no solution for it.

–James W.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

OK James, did:

https://dl.dropboxusercontent.com/u/8231701/cdn-digitalmedia-themes/theGridMaterialz/colortest.html

Could be a nice Easter-Egg search game. The only thing missing is the running-gag.

ONCE again (as quote of my previous post):

Because I often have an HTML box in Freeway with a light gray background color, into which I wish to place a pass-thru graphic which has the same background color

I’ve never ever done in none of my applications an operation like this - it’ll fail anyway. For such things, the .png or .gif has been created. Cropping (releasing) them does make sense! Or even rebuilt.

Web used to be pixel oriented 10 years ago !!! Today, the only pixel introduced are “photography”. All the rest is CSS anyway.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

From what I’ve seen, Chrome and Firefox in OSX treat untagged images as “device native RGB” by default, so it’s easy to get everything to match. Safari OSX on the other hand, treats all untagged images as sRGB and so converts them to the current display profile. It’s built into the app so there is no way to defeat it.

I have not tested how these browsers handle this issue on Windows or iOS, and I do not intend to do so.

I think the best result for my tastes involves transparent .png graphics which let the CSS background show through.

Here, with examples… http://cssway.thebigerns.com/workbench/safari-osx-color-issues/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Thomas, I see your 6 pics placed atop a similarly colored background. Taking an in-browser screenshot and pasting that into Photoshop, I see your background is RGB = 240, 240, 242, and your 6 PNG files are RGB = 241, 241, 243.

Opening your test page in FireFox and taking a screenshot and testing in Photoshop shows everything to be 240, 240, 242.

Ernie, when you say “untagged” I assume you mean “no embedded profile.” But like I said before in this thread, it doesn’t matter if you have an embedded profile or not inside your pass-thru pics – Safari changes the colors very slightly, while Chrome and FireFox (on OS X) do not change colors at all.

I agree that transparent PNGs are the solution, but only in cases where either size doesn’t matter or where you don’t need a 24-bit (millions of colors) PNG.

–James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

On which OS are you currently?

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Ernie, when you say “untagged” I assume you mean “no embedded profile.” But like I said before in this thread, it doesn’t matter if you have an embedded profile or not inside your pass-thru pics – Safari changes the colors very slightly, while Chrome and FireFox (on OS X) do not change colors at all.

JAMES. IT DOESN’T MATTER WHETHER YOUR IMAGES HAVE A PROFILE OR NOT-- SAFARI. WILL. ALWAYS. TREAT. IMAGES. AS. IF. THEY. HAD. A. PROFILE. PERIOD. It is built into the app, undefeatable, end of story. END.

I agree that transparent PNGs are the solution, but only in cases where either size doesn’t matter or where you don’t need a 24-bit (millions of colors) PNG.

I always use http://tinypng.org to shrink my PNG graphics. Sometimes they’re still larger than I like, so I may look at a different design solution.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Ernie, I always use TINYPNG to shrink my 24-bit PNGs into 8-bit PNGs, and yes I agree that most of the time they look pretty good.

But it’s not necessary the “end of story” yet because what profile is Safari applying to images? I would assume sRGB? If so, why then wouldn’t my sRGB images display in Safari with no color changes?

FURTHERMORE, I performed the following test, and I think anyone pondering this issue will find it very interesting…

  1. Launch Freeway 7 Pro.
  2. Make page background F0F0F2.
  3. Launch Photoshop (or Graphic Converter) and paint the background F0F0F2 and save it as a 24-bit PNG (make sure it’s sRGB).
  4. Switch to Freeway and import your PNG into an HTML box as a pass-thru.
  5. Preview in Safari.
  6. Take a screenshot.
  7. Switch to Photoshop, New Document, Paste.
  8. With the Info palette open, mouseover the screenshot and note that only the page background is F0F0F2, but your pass-thru colors have changed.
  9. NOW, return to Freeway and create a new document.
  10. Make the page background F0F0F2.
  11. Sketch a Graphics box on the page and color it F0F0F2, and make it a PNG with millions of colors.
  12. Preview in Safari.
  13. Take a screenshot.
  14. Switch to Photoshop, New document, Paste.
  15. Note that everything is F0F0F2 now! Holy Moly! That certainly WAS NOT “the end of the story,” now was it? Explain that. But wait! There’s more.
  16. Switch back to Freeway and sketch a smaller Graphics box inside your F0F0F2 graphics box, and color your new, smaller Graphics box something like red or blue (something other than F0F0F2). And make sure both Graphics boxes are set to combine (so Freeway exports only a single graphic on Publish)
  17. Preview.
  18. Take a screenshot.
  19. Switch to Photoshop, New Document, Paste.
  20. Now when you check colors only the page background is F0F0F2, but the F0F0F2 in your bigger Graphics box is no longer F0F0F2! Explain that!

It doesn’t matter if it is a “there’s nothing we can do” situation. I want to know THE TECHNICAL EXPLANATION for what is going on in Safari.


Thomas, I always run the latest version of OS X on my late 2015 retina 5K iMac. I am using 10.11.4 right now.

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I want to know THE TECHNICAL EXPLANATION for what is going on in Safari.

Then can I suggest you take your question to the Safari Developers forum where the better informed can answer it.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Dave, please don’t jump into this discussion by taking a very shotgun to my head. For goodness sake, this forum is open for us to constructively discuss ideas, with the hope that someone (even folks from SoftPress) might know the answer and be willing to post it in a public forum, for the benefit of all of us. If ultimately no one knows, then the last resort would of course be to contact Apple and hope (and pray) one ever receives a reply. But I reserve that for a last resort.

Furthermore, as you know, SoftPress is preparing to release CHROMA. The entire concept of that product is COLOR. Anyone who does like I did and buys that app HAS to be thinking about color SERIOUSLY. I do. That’s it in a nutshell. And that is why this discussion on color has its proper place on FreewayTalk, even if one argues that this particular thread is not directly tied to CHROMA. CHROMA got me thinking about it. No doubt, I am not alone.

Best wishes,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

But it’s not necessary the “end of story” yet because what profile is Safari applying to images?

The unfortunate truth is, it is.

Let me sum this up by wrapping everything together:

####Excerpt from Safari dev library

Often, colors in your images will look different when displayed on the Web. Consider for example a JPEG image in an HTML document on the Web. The pixel colors in the image are directly related to the device on which it was created (for example, a digital camera). The image colors will look different if the image is displayed on a different device.

Safari for Mac OS X and Windows offers a solution to the color issues on the web by providing consistent color management. Safari’s built-in color management will correctly display images you’ve specifically designated to be color managed.

Read the full article

Straightforwardly, this can be followed by the already given answer which sounded like so:

JAMES. IT DOESN’T MATTER WHETHER YOUR IMAGES HAVE A PROFILE OR NOT— SAFARI. WILL. ALWAYS. TREAT. IMAGES. AS. IF. THEY. HAD. A. PROFILE. PERIOD. It is built into the app, undefeatable, end of story. END.

Reasonably, cause it’s the way this browser works!

I tried to paraphrase this matter of fact as the follows:

http://dowebsitesneedtolookexactlythesameineverybrowser.com

Whatever is been displayed in Freeway, doesn’t matter at all. The truth is in the variety of browsers. And if every browser would display everything exactly the same, why to have a variety of them? None browser vendor has to justify the way their product works.

And even if there would be a possibility to switch color-management off, it would be a “user” decision and not the designer’s decision.

So what?

Pretty lame - so let’s try to find the gist and what to do now:

Walter mentioned

I would never expect a JPEG to match anything except a piece of itself.

Excellent approach. It’ll mean, that an underlying “background” of an image with a background can only be “the piece” of this background itself. Or in other words:

Compare apple with apple, create the background as a tile-able pattern of whatever format to match the image-bg which has the same format.

Another (perhaps) better approach:

Use .gif or .png (24-bit) and crop all backgrounds. This is the only chance to use any CSS background option.

I think this all is the reason, why the rest of the world doesn’t have real issue with it anymore. The color-shift topics I found are mostly years old.

Cheers

Thomas

Allow me a quick final note:

Rather than copy and paste and re-screenshoot, re-paste simply use the onboard app Digital Color Meter which can be found in the utility folder.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I am sorry James but I find your thread on how Safari does or does not display colours totally disinteresting and not really deserving of discussion here.

Off Topic may be.

W3 Schools have Safari usage at 3.7%

With figures like that should I waste my time on it? I think not!

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Dave,

I read a lot of forums. I have for decades, even back in the days of my 300 baud modem used with text based BBSs. Through all the years, time and time again, I’ve seen people basically say, “My situation is such-and-such… NO PROBLEM.” As if that magically makes everyone else not have a problem either.

W3 Schools and their 3.7% have zero bearing on my websites targeting Japan.

According to Google Analytics data on my websites (which is something I care far more about that W3 Schools generalized data)…

  1. IE 6/7/8/9/10/11: 43%
  2. Safari (& in-app): 24%
  3. Chrome: 24%
  4. FireFox: 3%
  5. Edge: 2%

Among Safari users, 72% use some flavor of version 9.

OS Data:

  1. Windows: 58%
  2. iOS: 23%
  3. Android: 16%
  4. MacOSX: 2%

I also have English language versions of our sites which get more hits from English speaking countries, and the data on those sites shows a greater percentage of Mac and Safari users.

So should YOU waste your time in this thread? NO. Please flee this thread and never look back, keeping in mind that I was not the one who started this thread in the first place.

But should someone else who has further information on why Safari is doing what it is doing chime in? YES. I refer you good people to my earlier posts on the matter.

Thanks,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Thomas, thank you for your post. I missed it while responding to Dave.

Basically you repeated what you said before. I understand 100% what you are saying. But please consider what I am saying.

Think about it this way…

If you visit an old, abandoned house late at night and see doors suddenly open and close, will you attribute that to GHOSTS or will you try to SCIENTIFICALLY DETERMINE THE CAUSE?

I am seeking the latter. I am not trying to go down the path of “well, I don’t know WHY, but I will just work around it.”

I want to know WHY. Toward that end, please scroll back up this page and re-read my earlier post with the 20-point list. There simply MUST be a logical and technical and comprehensive explanation for that behavior. I seek that explanation. Then I will be satisfied and move on.

Thanks,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

According to Google Analytics data on my websites (which is something I care far more about that W3 Schools generalized data)…

Safari (& in-app): 24%

Valid point - but do your visitors care about the colour shift in Safari?

My understanding is that your products are not bought for their looks but for their functionality.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Dave,

I appreciate your feedback. Not only in this thread but in other discussions we’ve had in the past. Seriously. I do appreciate your input. But the input I would truly appreciate hearing from you is in response to my earlier post where I put forth a 20-point list. If that behavior can be logically and reasonably explained, then I will consider the discussion finished.

Thanks!

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options