When it comes to color combinations, your eyes prefer black text on a white or slightly yellow background. Other dark-on-light combinations work fine for most people. I have started to do this business full-time now and just bought dual 21 inch monitors. It rocks, but I am sure it is going to start hurting the eyes. What are the easiest on the eye settings for.
![]()
Hi all, I've recently realized that the colors on my Macbook Air's monitor and the colors on the external display connected to the monitor are different! The colors on the mac are more saturated, but are not the ones that I've intended it to be.Here are two images - This is while this isBoth the images are viewed through Preview app. I've used Sip to pick colors from what Preview shows me.
The screenshot of the artboard in Sketch shows the intended HEX value, while the one on the Air shows a saturated, incorrect HEX value!! Surprisingly, if the image is opened in a browser, it renders the color accurately. Also, if the.png file is viewed on an external monitor through the Preview app, it renders the intended HEX value. This led me to believe that there is a color profile inconsistency here, rather than just some glitch with the Preview app!For this reason, I'm wary about sending my designs to a developer and ask them to pick colors. I just give them the HEX values for now.Would like to know how to approach this problem of mine. If indeed the color profile is the problem, I was wondering what is the best color profile to use when doing design work (I'm interested purely in digital design and not print design).Thanks in advance.
I don't touch color profiles because:. I don't understand them (never paid enough attention to how they work, what they do, etc).
I've never had issues with them. I'm a believer in using defaults wherever I can because someone else, somewhere, put a lot of time into thinking about what should be the default, and why.If you'd be so inclined, you could reword those as 'fear, ignorance and laziness'.And with all those powers combined, I am Captain Efficiency.edit: I feel obligated to mention that parts of this post are to be digested with a side of salt. Both the images are viewed through Preview app.That'll be your first problem. Preview treats untagged images as sRGB (by “untagged”, I mean images that have been saved without an ICC Color Profile attached).
That means it’ll convert from sRGB to your display’s profile, changing the values (an attempt to make the colours appear as intended, based on the source file being sRGB).As well as changing the values, color profile conversion often leads to rounding errors, which manifest as gradient banding, and clipping. Both highly undesirable.I've used Sip to pick colors from what Preview shows me.Sip looks nice, but I haven’t used it much.I can vouch for Digital Color Meter (in your /Applications/Utilities folder), provided it is set to Display native values.Surprisingly, if the image is opened in a browser, it renders the color accurately.I assume you’re using Chrome. Chrome treats untagged images as device RGB native, and keeps the values the same.Safari treats untagged images as sRGB.I beleive Firefox also treats untagged images as sRGB.So, both will do a conversion from sRGB to your display’s color profile.For this reason, I'm wary about sending my designs to a developer and ask them to pick colors. I just give them the HEX values for now.Picking colours from screen can be a bit tricky, due to the behaviours noted above. If I need to pick colours, I only use Photoshop. Chrome would also be ok, but it’s difficult to know if the behaviour will change in the future.If indeed the color profile is the problem, I was wondering what is the best color profile to use when doing design work (I'm interested purely in digital design and not print design).If you’re using an Apple laptop and Apple display, my advice would be to not touch their color profile or setup.If you’re using a different display, you probably want to calibrate as closely as you can to sRGB.
SRGB is what Apple targets for their Mac and iOS devices.If you’re using Photoshop or Illustrator, here’s my advice on how to set them up:It’s unfortunate, but color management for screen design is often way harder than it needs to be. Dear Marc, Thank you very much for your comprehensive reply. You article was one of the first things that I've read when I've encountered this problem and searching for solutions on the internet.:)I will check the Digital Color meter and post my findings. Thank you for this suggestion. And, yes, I was using Chrome and Firefox Developer Edition to check the colors of the design files.My main problem with the inconsistency in color profiles is I don't have an Apple monitor (both at work and in my personal environment). That makes me want to see the consistent colors atleast in my environment first before sending these files to developers.The second main problem in this context is I don't use Photoshop for design.
I use Sketch. There is an option in Sketch when you export that asks if you want to include/discard 'Color profile and EXIF metadata'. However, I haven't found the difference in the color rendering using this option with the Preview app. As you have mentioned, Preview treats untagged images to be in sRGB color space, however with this option in Sketch, Preview still reports the same inconsistent behaviour (Again, have picked the colors using Sip.
Will report the findings with Digital color meter)I now think, I should ask developers to open the design files in Chrome if they have to pick the colors, because not everyone uses a Mac at work. Or, perhaps, I should give the intended HEX values. My main problem with the inconsistency in color profiles is I don't have an Apple monitor (both at work and in my personal environment).Ok. That might not be a problem.
If you can, I’d set it up as sRGB, if it’s not already.That makes me want to see the consistent colors atleast in my environment first before sending these files to developers.Some consistency is impossible, due to the way Preview and some apps handle image files that don’t contain ICC profiles. There’s not much that can be done about it.The second main problem in this context is I don't use Photoshop for design. I use Sketch.From what I've seen, Sketch works how I’d like and expect for a screen design tool.
I haven’t done much testing though.There is an option in Sketch when you export that asks if you want to include/discard 'Color profile and EXIF metadata'I think that option is just for embedded images, not vectors etc?Preview treats untagged images to be in sRGB color space, however with this option in Sketch, Preview still reports the same inconsistent behaviour (Again, have picked the colors using Sip. Will report the findings with Digital color meter)I think the issue is Preview. If you’re trying to read the values contained within a file, without sRGB → display profile conversion, you can’t use Preview.Maybe we’ll have to build an image previewer one day soon. It’s pretty maddening.I should ask developers to open the design files in Chrome if they have to pick the colors, because not everyone uses a Mac at work. Or, perhaps, I should give the intended HEX values.Both good options.:) I always supply color values, because this stuff can be difficult, and I don’t want to risk someone else using a method that will give incorrect results.
![]()
This question comes up every 2 weeks on here and I always give the same answer:If you do digital design (i.e. Things that users will see and use on a screen) just forget about it. In fact, you should have a bad/regular monitor by your side and periodically check if your content is contrasted enough.People will see it differently regardless of what you do to your monitor.In fact, I remember the iPhone 4 had different screen manufacturers, one was colder than the other and even if you fine-tuned your colours on your iPhone 4, another user could see it differently.TL:DR; in digital design; not important.
I noticed that when in Windows, my display had a blue-ish tint, and looked off. I looked into it a little and I found that under Windows, I was using the default color profile, which isn't calibrated for my MacBook Pro screen. I also found that Color Profiles (.icc files) are cross platform. I was able to grab the Color LCD color profile from my OS X install and use it in Windows 10, and suddenly my display looked way more accurate.The OS X color profiles are stored here: /Library/ColorSync/Profiles/Displays/You're looking for an.icc file that matches your display (for example, I also have a Cinema Display I hook up to, so there was a Cinema.icc profile.) For me it was a file called Color LCD-0DD0E4CB-9815-451E-B8AE528.icc.Copy that file over to your Bootcamp install, and install the profile. Here's a tutorial on how to do that:.
![]() Comments are closed.
|
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
January 2023
Categories |