Wow! This thread has been busy.
James, I used to have this problem as well, but with Mac OS X 10.11.4 and Safari 9.1 the colors are now spot on as Thomas Kimmich indicated above.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Raven,
Scroll up to my earlier post where I mentioned a 20-step list. Perform those 20 steps yourself and then tell me what happens. I assure you, the color differences are clearly discovered when you go through those steps.
Thanks,
James W.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
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?
No - I’d call the Ghostbusters because I’m not aware of the algorithm and logarithm of ghosty movements.
It’s useless knowledge, cause I’ve found many ways preventing me from scary unexplainable or even explainable but strange things. I’m not gonna be a browser vendor, I’m just creating apps for them. And I’m pretty good in it cause I invested my time and money in five inch nails. This is fixing rattling doors and windows as well.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
If that behavior can be logically and reasonably explained, then I will consider the discussion finished.
I’m sure that if you got a whole bunch of reasonable scientists and logical engineers together, you would have an argument and not an explanation. That is how science works.
Simply put, a monitor is an output device. Many thousands of engineers have, over time, designed hardware and software behind it to take all our various input types and variables onto consideration and calculate how much electromagnetic energy is required for each dot of the screen.
Now I’m sure that the people who built and continue to improve this system don’t require your 20-step exercise in futility to know that there are small problems between input and output values-- which should suggest something about the complexity of the problem. Try testing colors beyond #F0F0F2, including the so-called “web safe” colors, and you will see that Chrome and Firefox fail as often as Safari does. It’s a complex equation with a buttload of variables which different parties have different solutions for. If there were a Magic Solution, we wouldn’t be having this discussion.
Logically and reasonably, the world doesn’t always work the way you expect it to. It is not unreasonable to think that it should, but it is quite unpractical. Many things just come with footnotes… accept it and move on. There now, discussion finished.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
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.
Hey, Kelly –
In the print world, color can vary from shop to shop and even from press to press. In the digital world, color can vary from device to device, browser to browser.
In the print world, we would develop a sense for what was reasonably expected (aka, the “gamut”) and would avoid or “correct” problem colors-- colors at the edge or outside the gamut. Bright onscreen blues which would purple up, for example.
I guess what I’m saying is that Freeway may not be the best place to refine the color choices for your project, though you might be open to developing a “go to” color palette which you are familiar in the browsers. There are lots of places online to create and share color palettes-- saturate yourself with them and when you find some useful colors, add them to your Freeway colors. I still use these quite often:
http://cssway.thebigerns.com/projects/strangecolors/
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
“It’s too complex, so let’s just forget investigating it.”
“Use something other than F0F0F2.”
“There’s no magic solution.”
“We cannot know the algorithm of ghosts.”
I often get more resistance here on Freeway talk than cooperation, support and help. But stubborn persistence keeps me going.
The “algorithm” to those door slamming ghosts, as determined by observation in a well-lit room is called “wind.”
It’s NOT that complex. I rarely have color troubles outside the narrow example I provided.
You CAN use something other than F0F0F2. I keep citing that color to keep the discuss more simple and understandable and repeatable, for those who dare go through my 20-steps instead of just complaining about them.
A quick read through my posts in this thread shows I don’t seek a magic solution. I seek third party, objective analysis of my 20-steps and the meaning of their results. That’s it.
Code isn’t magic. It’s quite logical. I want to know why the code we call Safari is producing strange and presently in sufficiently explained results versus other code we call Firefox and Chrome.
“James, just stop talking and accept my less than explanatory reasoning. Color varies. Live with it.”
No. I refuse. It’s not so simplistic. The “color varies, live with it crowd” ignores what I am saying.
If I view my website on different Macs, ALL THE COLORS are slightly different than those Macs versus the Mac on which I designed the site. Ditto for iPads, Windows machines – everything I test on. But so what!? THAT does not bug me. I am NOT arguing THAT. If ALL the colors shift slightly, I have no problem with that. Why? Because nothing on the page jumps out at the viewer. And because I understand the logical reason why ALL colors vary slightly from screen to screen.
But in this thread, I am talking about only tiny parts of a web page that, for reasons currently unknown, change color ONLY in Safari.
Again, if all the colors change a little bit, it’s no big deal. No one thing on a web page in that case would stand out screaming, “I’m so different… Help me!” But when you have only a couple boxes on a page that get color shifted, and only in one browser, they are more noticeably out of place and confusion results. And so you the designer then try to determine the cause. So I created the 20-step list, and I want to know WHY. That’s it. I shouldn’t need to call in the GhostBusters to determine this. If anything, I need the ResistanceBusters.
Since none of you have told me you’ve personally gone through my 20-steps, I must assume that (1) you don’t want to because it’s more satisfying to stick to your current argument, or (2) you have gone through the 20-steps and you are dumbfounded as I am but you simply haven’t said that yet in this thread. And don’t say you lack time. If you have time enough to argue with me in this thread, you have enough time to go through my 20-steps and ponder the results.
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I have gone through this process, some time back in the late 90s, and it was true then, as it is now. Of course this was in IE 5 and Netscape 4. The browsers change, but not that much, it turns out.
A craftsman’s job is to learn her materials. Period.
If your materials are not trustworthy under certain circumstances, that is something that is good to know so you can avoid getting into those circumstances. That’s your job – to know where the flaws are in the reproduction chain, and how to work around them.
- If you build patio furniture out of particle board, you will discover that rain and particle board do not mix. And you won’t do that again.
- If you try to color-match JPEG images with CSS colors, you will cry. It may look right in one browser one time, but it will not anywhere else.
As a Web designer, your materials are the somewhat flaky combination of your design intent, CSS, and the browser’s rendering prowess.
Multiplied by the different browsers you care about.
Figure out what the worst combination is for you, and then figure out how to get around that problem. Be creative.
The browsers will continue to be awful, and complaining here won’t change that. Complaining on the Surfin’ Safari blog may have more meaningful results. Maybe.
But meanwhile, do what designers always do – find a way around the problem. I assure you – the problem is not in Freeway, which as far as I know strips off the ColorSync profile when it exports your (non-pass-through) images, and it’s not in Photoshop’s Save for Web export tool, which definitely does the profile removal.
As many others on this list do, I go way way back to the stone age of design. I set headlines with a Typositor. I ordered cold type from a typesetting house. And I used a process camera and film and an arc lamp to expose my litho plates when I took a printing course. I can talk you senseless about dot gain, press direction, folding creep, and ink traps in fonts. All of these things are the materials you understand when you design for print, because if you don’t know about them, you get an expensive education in them when you pick up your printed work.
You’ve already done the first part – you’ve discovered a combination (20 steps and all) that does not work predictably on a range of Web browsers. Now start thinking creatively about how you’re going to design yourself out of that corner. If you need to color-match a JPEG to a flat HTML element, do as I have suggested, and cut a tile-able square out of that image, save it as a JPEG with the same export settings as the main image, and tile it as the background (instead of a CSS color). Your image may not be exactly the same color in all browsers, but your background and foreground will both be “wrong the same way”, so it won’t show.
Another cabinetmaking analogy for you: paneled doors. Why are they made the way they are? Because a solid piece of wood (even glued up) will expand and contract a whole lot with the seasons, meaning you won’t be able to open the door in the summer, or you’ll have huge drafts in winter. By creating a large slot for a smaller panel of wood to “float” within the outer frame, you allow that contraction and shrinkage to take place without it affecting the dimensions of the door. And if you were able to take apart a finely-made paneled door, you would see that the finish on the panels continues into the rabbet holding that panel in place, so as it shrinks and expands, no unfinished wood is exposed. That’s the same sort of trick that the “JPEG over a tiled JPEG” trick does. It hides a seam with more of the same material.
Walter
On Mar 25, 2016, at 9:31 PM, JDW email@hidden wrote:
If you have time enough to argue with me in this thread, you have enough time to go through my 20-steps and ponder the results.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
On 24 Mar 2016, at 00:49, JDW email@hidden wrote:
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.
Hi James,
Disclaimer - I don’t know exactly what’s happening in Safari, but here’s what I know from the work we’ve done at Softpress. When an application draws images they are converted from the attached color profile (or just a generic rub profile when no profile is attached) to the device color space. This happens so that the colors in the image match the same colors on the current device since, as you know, colors can be very different from device to device.
Following your steps, what I was seeing on my machine was that the original sRGB image from Photoshop was being converted from F0F0F2 to F1F1F3 by Safari. This was a change that I couldn’t detect by eye, I had to use the Digital Color Meter tool to see the difference (this does the same thing as the info tool you were using in Photoshop).
The second image (the one generated by Freeway) was created with using generic RGB and, like your, resulted in no change from generic to device when I looked at it in Safari. That doesn’t mean it won’t change on other devices or with different colors.
The third image, the generic RGB generated by Freeway with two colors, resulted in me seeing F1F1F3 again. I can’t explain why that’s happening, but I would say the underlying image handling algorithm in Safari made a call to move each channel by one to get what it thinks are the best results. Again, I couldn’t detect that change by eye on my screen.
I hope this helps,
Joe
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
There’s an autocorrect typo in there - generic rub should read generic RGB.
On 26 Mar 2016, at 16:12, Joe Billings email@hidden wrote:
On 24 Mar 2016, at 00:49, JDW email@hidden wrote:
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.
Hi James,
Disclaimer - I don’t know exactly what’s happening in Safari, but here’s what I know from the work we’ve done at Softpress. When an application draws images they are converted from the attached color profile (or just a generic rub profile when no profile is attached) to the device color space. This happens so that the colors in the image match the same colors on the current device since, as you know, colors can be very different from device to device.
Following your steps, what I was seeing on my machine was that the original sRGB image from Photoshop was being converted from F0F0F2 to F1F1F3 by Safari. This was a change that I couldn’t detect by eye, I had to use the Digital Color Meter tool to see the difference (this does the same thing as the info tool you were using in Photoshop).
The second image (the one generated by Freeway) was created with using generic RGB and, like your, resulted in no change from generic to device when I looked at it in Safari. That doesn’t mean it won’t change on other devices or with different colors.
The third image, the generic RGB generated by Freeway with two colors, resulted in me seeing F1F1F3 again. I can’t explain why that’s happening, but I would say the underlying image handling algorithm in Safari made a call to move each channel by one to get what it thinks are the best results. Again, I couldn’t detect that change by eye on my screen.
I hope this helps,
Joe
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Walter, thank you for the cabinetmaking guidance. I follow what you were saying.
Joe, a thousand thanks for making time to repeat my 20-steps and offer your thoughts. That means a lot to me. I really appreciate it.
Sincerely,
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Joe, a thousand thanks for making time to repeat my 20-steps and offer your thoughts.
… and what on them (which can be reduced on 5 - 7 anyway if you know your tools) are groundbreaking new now?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Thomas, Joe’s repeating of my steps did nothing too groundbreaking but it did accomplish this:
-
Someone other than myself confirmed my findings as accurate, proving the color mismatch wasn’t simple some mistake on my part.
-
Joe gave me his guess that Safari’s color handling algorithm is taking its best guess on how color should look, disregarding the presence or absence of a profile, and then shifting colors accordingly, which to us appears to have no basis in logic.
Lastly, while I agree that F0F0F2 has no humanly perceptible color difference in Safari, there are other shades of gray (and other colors too), which are noticeable. Indeed, that’s the only reason I decided to continue this thread sharing my experience.
So the solution is to either use transparent PNGs, which may sometimes need to be 24-bit (and therefore quite large, especially if you use 144ppi Retina graphics like I do). Or one could go Walter’s cabinet-maker route and build content that way.
Since nothing else can be done, I won’t be posting anything else on this issue.
My personal thanks to all of you who contributed to this discussion, and especially to Joe who very kindly repeated my steps and provided feedback on them.
Best wishes,
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at: