How to make colours on one screen look the same as another - colors

Given two seperate computers, how could one ensure that colours are being projected roughly the same on each screen?
IE, one screen might have 50% brightness more than another, so colours appear duller on one screen. One artist on one computer might be seeing the pictures differently to another, it's important they are seeing the same levels.
Is there some sort of callibration technique via software you can do? Any techniques? Or is a hardware solution the only way?

If you are talking about lab-critical calibration (that is, the colours on one monitor need to exactly match the colours on another, and both need to match an external reference as closely as possible) then a hardware colorimeter (with its own appropriate software and test targets) is the only solution. Software solutions can only get you so far.
The technique you described is a common software-only solution, but it's only for setting the gamma curves on a single device. There is no control over the absolute brightness and contrast; you are merely ensuring that solid colours match their dithered equivalents. That's usually done after setting the brightness and contrast so that black is as black as it can be and white is as white as it can be, but you can still distinguish not-quite-black from black and not-quite-white from white. Each monitor, then, will be optimized for its own maximum colour gamut, but it will not necessarily match any other monitor in the shop (even monitors that are the same make and model will show some variation due to manufacturing tolerances and age/use). A hardware colorimeter will (usually) generate a custom colour profile for the device under test as it is at the time of testing, and there is generally and end-to-end solution built into the product (so your scanner, printer, and monitor are all as closely matched as they can be).
You will never get to an absolute end-to-end match in a complete system, but hardware will get you as close as you can get. Software alone can only get you to a local maximum for the device it's calibrating, independent of any other device.

What you need to investigate are color profiles.
Wikipedia has some good articles on this:
https://en.wikipedia.org/wiki/Color_management
https://en.wikipedia.org/wiki/ICC_profile
The basic thing you need is the color profile of the display on which the color was seen. Then, with the color profile of display #2, you can take the original color and convert it into a color that will look as close as possible (depends on what colors the display device can actually represent).
Color profiles are platform independent and many modern frameworks support them directly.
You may be interested in reading about how Apple has dealt with this issue:
Color Programming Topics
https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/DrawColor/DrawColor.html

You'd have to allow or ask the individual users to calibrate their monitors. But there's enough variation across monitors - particularly between models and brands - that trying to implement a "silver bullet" solution is basically impossible.

As #Matt Ball observes calibrating your monitors is what you are trying to do. Here's one way to do it without specialised hardware or software. For 'roughly the same' visual calibration against a reference image is likely to be adequate.

Getting multiple monitors of varying quality/brand/capabilities to render a given image the same way is simply not possible.
IF you have complete control over the monitor, video card, calibration hardware/software, and lighting used then you have a shot. But that's only if you are in complete control of the desktop and the environment.
Assuming you are just accounting for LCDs, they are built different types of panels with a host of different capabilities. Brightness is just one factor (albeit a big one). Another is simply the number of colors they are capable of rendering.
Beyond that, there is the environment that the monitor is in. Even assuming the same brand monitor and calibration points, a person will perceive a different color if an overhead fluorescent is used versus an incandescent placed next to the monitor itself. At one place I was at we had to shut off all the overheads and provide exact lamp placement for the graphic artists. Picky picky. ;)

I assume that you have no control over the hardware used, each user has a different brand and model monitor.
You have also no control over operating system color profiles.
An extravagant solution would be to display a test picture or pattern, and ask your users to take a picture of it using their mobile or webcam.
Download the picture to the computer, and check whether its levels are valid or too out of range.
This will also ensure ambient light at the office is appropiate.

Related

ICC Color profiles able to match Pantone, RAL, etc

Im trying to calibrate/adjust my screen color configuration more towards a specific paint color like RAL.
Im using Encycolorpedia works great tot determine (what color) and even deltas between specific paints. However my screen doesn't come close to the real life situation, I've received a color wheel and oh my gosh... what a huge difference. So ordering paint online is an absolute no-no.
The big question how to close that gap between Adobe RGB Color and paint-colors like (Sikkens) RAL or Pantone? Something within the ICC profile of the monitor (which is a Samsung)?
I know there are color-spiders to calibrate screens, but I really wonder if there's an online database or which corrections or calibrated settings for monitors ?
You cannot do it. And possibly you do not have correct understanding of ICC, colour profiles, and RAL.
If you want to calibrate your screen, you should have a good screen (I recommend one "hardware calibrated", so you will not lose colours), and a calibration device. So you will have a good calibrated monitor, which display the correct colours. You will use the ICC file to tell the screen (or graphic card) how to handle colours, and to the program, so they know which range of colours they can use.
A ICC profile just tell a screen how to convert numbers (colours). An AdobeRGB profile will not make your screen to see AdobeRGB colours, it will just transform the colours so that you will have the "numbers" as expected by a 100% precise AdobeRGB screen (which never exist, so it is better to use device specific profiles). If your screen is not 100% AdobeRGB it will display some colours in an unexpected way. Our eyes may adapt colours (so for a single person, this is not a huge problem, but if you are doing a magazine, with 15 graphic editors, the reader want consistency (there is not time to adapt eyes for every image).
But then you go to Pantone and RAL: there are different kind of colour description (really, forget RGB for such colours: you need spectral distribution). These are for real objects, so they are seen with different lighting conditions (illumination), and an object can be seen in different colours (as RGB), but being of the same colour (as paint/dye).
And Pantone and RAL have discrete colours (enumerated colours, not homogeneously distributed). And for screens we just use LUT or LUT3D, so simple matrix conversion of received colour numbers to displayed colour numbers). Not a thing a screen can do so quickly (60 time per second, for every pixel).
Finally: screens are very different technologies as objects. There are some screens which create the same feeling (and also they seems more "opaque"), but this is not a thing we can every reach with standard (or most of good wide-gamut screens). And screens sucks on yellows and yellow greens (now I'm thinking at various RAL used for emergency). Out of reach for most monitors. An interaction with a soft printing is necessary (and you need a [frequently] calibrated printer).
Note: usually you get drivers for your monitor (look online for your monitor manuals and drivers [and look just at manufacturer website]). They will usually have the "driver", which it is a ICC profile. But this is just a "standard" profile. Monitors will change with time (either cold [at start-up] to hot), but also with long period using it. And different batched may be different (especially if produced in different places, common for very common monitors). If you use their profile, you should get better colours. If you calibrate yourself, you will have much better colours, but as I wrote, it is probably not possible to have good/very good matching colours.

Achieving Colour Consistency Across Different Monitors

I have an SWF file with only vector illustrations in it (no bitmaps). Is there a way to improve colour consistency across different monitors?
Colour management is a very complex topic and the more I read about it the more confused I become. There's this thing called ICC profiles which are supposed to convert colours into device independent color spaces, but of what use is that?
ICC profiles provides a way to map the colors that your monitor thinks it's showing (the bitmap/image, or other graphics) to what it is actually outputting on the panel. Using software that supports these profiles you can get more consistent colors.
The basic flow is this:
A program reads the graphics file
The program uses the icc profile to compensate for your monitors inadequacies
When you change monitor, you change the icc-profile to match the new monitor
When you print, you use a different icc-profile suitable for the printer to compensate for the printers inadequacies
This is meant to make sure that the colors on screen match the printed paper and is generally not something that scales beyond artsy stuff.
If you want consistency among your own monitors you would "just" have to calibrate them and configure the profiles for your monitors. I don't know how to do this, but my guess is that Adobe has pretty good docs about it.
If you want something like consistent colors on say a flash game across different users, I don't think that is possible. In any case it would be the clients job to manage the ICC-profile and the flashplayers job to support the compensation.
In any case, the part about adjusting the monitor settings before doing the calibration is because this changes the color reproduction of the display, so if you change the settings you will have to re-calibrate the display.
The problem is you have no control over your user's monitor (type, make, age, adjustment).
ICC profiles are designed to interpret between a real-world device (like a camera, monitor or printer) and an independent working colour space (see here for an explanation).
Flash 10 "supports ICC-profiles" only in the sense that you can specify whether or not flash should adjust it's colours according to the local ICC profile (chosen by the user to suit their monitor). So the most you can do is set stage.colorCorrection = ColorCorrection.ON; (and it won't work for Unix or Linux).
Otherwise, you could consider making the colours shown in your SWF file to be user-configurable: they can then adjust things to their own liking - perhaps via some form of colour-calibration.

Adobe Color Profiles/Color Spaces, how is it possible that this works?

I'm learning about Color Profiles/Color Spaces/Monitor Color Management Profiles and I was just wondering how any of that justified considering the fact that I could throw the entire color anything off by adjusting the brightness and contrast of my monitor?
Additionally there are things like lighting in the place where your monitor resides. I don't understand what makes it possible to know that the colors that you are looking at on your monitor are accurate. I really don't have any idea where to start (considering I obviously can't even get the terminology right in the first place...:-p)
The color profiles send as accurate as possible information to the monitor, but, basically, you are right when you say that it is impossible to determine if it is correct. Designers have to use tools like this (http://www.pantone.com/pages/products/product.aspx?pid=79) if they want truly accurate colors on their screen.
If you're really serious about it, you calibrate your monitor under different light levels and set up your colour management profiles using that information.
Generally, calibration is performed by looking at the monitor with a camera and comparing what colour the monitor is showing against what colour it thinks it's showing.

Do all developers consider monitor quality (colors, not resolution) to be irrelevant?

I especially hear it from those advocates of "business" notebooks manufactured by IBM/Lenovo, HP, Dell (maybe) that "business users do not need quality screens". They stick in the worst possible LCDs out there (even if with a high resolution) and dare to sell that crap. You can't even distinguish hue variations like light-yellow vs. light-grey.
I really miss it - do all of you agree color reproduction of a developer display is irrelevant, be it even a grayscale display it will do?
I understand most of developers work with text but... at times there is some design work to be done which is not doable on cheap LCDs.
And besides - wouldn't you enjoy fresh saturated colors even in a development environment? Bright cheerful icons on menus? Isn't it better to sit in a sunny office with green trees and flowers out of the window than in a garage with dark colors and weak artificial lighting?
P.S. Inspired by the topic about keyboards: Keyboard for programmers
The question about displays and developers really interests me since a very long time.
Even though I don't need a high quality screen, I appreciate the difference, and like esnoeijs said, an occasion will arise where I'll need to critique some graphic design work where the quality monitor will make a difference.
I think, "developer" is too broad to give a precise answer.
If you are a code-crafter of programs reading text emitting text, without the need to make some colors look nice, then yes, then you really can go with a monochrome screen. you need black as a background, white as the foreground and some reversing to highlight matching braces. In this particular case, I would value high resolutions far far more important than colors, since usually it is about seeing more code (and especially, more things about and around the current piece of code, like documentation, tests, a quick interpreter loop, some research paper, you name it).
If you are a developer just learning a language and if you have an editor with syntax highlighting, then color is a massive, massive usability leap. I would not want to miss the ability to display keywords in a bright pink, strings in a brigt cyan and similar things (all on a black background)
If you are a frontend-designer, then it is a completely different story. If you are a frontend designer, you will need a high quality display with good color display abilities. You do not need the best one possible, but your display should at least be able to display the colors your regular user will use, so you will not put in green, because you wanted blue and your users see yellow (or other nonsenses).
if you use tools that require the use of colors in order to encode information, color is crucial, because you might be unable to see the additional information.
...
So, I think, most programmers do not need some ridiculous color displaying abilities, even though, most of the time, a good solid color display is helpful, because they need to work on some frontend or because they want to learn some language.
HTH,
Tetha
Better quality color monitors can come in handy in a lot of ways. The first way that comes to mind is if you are using a code development tool that has the capability of highlighting keywords such as Zend does.
I once spent half a day trying to add zebra striping to a table in my company's webapp that already had it because both my screen and QA's screen were unable to display the different colors of the zebra stripes (they rendered as the same color). Likewise, I once had my boss ask me to change the color of part of an icon, and to me it made the icon look like a uniform blue, but on his much better monitor, you could clearly see both shades of blue and it looked really nice... it was hard to make that edit without being able to see what I was doing.
I guess the developers in my company end up doing some design work in addition to real dev. I do spend most of my time in the shell though, so aside from the constant flickering that gives me headaches (yes, it's an LCD), a low-qual monitor is OK.
I'm a developer but being in webdev land i've picked up enough design stuff to be critical about it, so i mostly try to get samsung screens with a good colour range.
With a good monitor, you can adjust it to your likings.
Personally, I have a $700-Fujitsu Siemens monitor bought in (afaik) 2000, and a $340-BenQ bought in 2005, and I prefer coding on the first monitor, as I don't have to crank up the brightness (reducing headaches) and can still see everything I want to see (subpixelhinted 6 point fonts, subtle variations in syntax highlightings etc.).
At least one author would disagree. He ranked color accuracy on four notebooks:
Lenovo ThinkPad W700
IBM/Lenovo ThinkPad T60
Dell Inspiron Mini 9
Apple late-2008 MacBook Pro 15 inch
I'm less picky about the actual monitor I have and more picky that I have two monitors that are exactly the same model and use the same video connector.
As a web developer, it can be frustrating to have colors that don't match because one of your monitors is VGA and the other is DVI.
Possibly the sort of "business user" who works on invoices all day does not need a very good display, but anyone who works on anything whose appearance counts, from software developers to business users who need to make Powerpoint presentations, does.
If you are a hardcore terminal+vim user like me, they color quality and fidelity are almost irrelevant, except for the quality of blue (which I use in some situations, like directory names) which tends to be too faint to be seen on my black background. Nothing that cannot be fixed with some tinkering though, but I am used to blue.
That said, I actually have a couple of things to say about the new screen on the macbook unibody. The glossy finish is a real pain. So annoying. And the color fidelity is very low. I spent an evening trying to understand why on a gradient from light green to white I had a pinkish stripe. Turns out that the pink is an artifact of the macbook screen. Another screen does not show the issue. On the plus side, the LED backlight is very powerful and nice, making the colors very vibrant.
This to say that color fidelity is fundamental if you use color-intensive stuff like eclipse (which communicates a lot also through different shades of colors), and of course for web frontend development. If you just need a terminal and a vim running, I don't think color fidelity makes a real difference, once you have a comfortable setup with low reflections, and a good contrast.
(note: it's been a few years since I've shopped for a monitor. this may be out of date)
I find it interesting that nobody has really defined "quality" yet, other than to say more vibrant colors. Generally, LCD panels fall into one of two tracks:
Good color/image reproduction (S-IPS panels and similar)
Good response time ( TN panels )
I consider SIPS and similar panels a must for development for one crucial reason: look angle. The image doesn't change colors or do other weird things as you angle to the screen changes. Very important for collaboration.
At the high end of this scale are monitors that are designed to perform will with color calibration. Most developers won't need anything this fancy.
TN panels are decent for gaming, movies, and other things featuring fast motion. They are optimized for pixel response time, and it's usually the main feature touted for these panels. Many cheaper panels are going to be of this variety.
In a monitor, I look for four things:
panel type (S-IPS or similar)
brightness (no more than 300cd/m2)
dot pitch (for good text, go with a small dot pitch: 0.27 is too big)
good contrast/ light leakage/ etc. (how black is black, and how uniform)
Although I love S-IPS panels, I must admit that any LCD monitor that can meet criteria 2-4 above would be a good choice, even if it's a cheaper TN panel.
It depends what you're doing.
If you're dealing processing images, yes, a good "quality" monitor is important.. but equally (or more) important to have it set-up correctly and calibrated.
If you're doing web-design, having a decent monitor is important, but again only if it's setup correctly (contrast/brightness/colour-balance).
If you're just "writing code", having a monitor your eyes like is important, the colour replication isn't important. A monochrome monitor might be stretching it, syntax-highlighting is nice, but even vim and it's 16 colours is "enough"
The term quality is also a bit "it depends" also.. CRT's have far better colour replication than TFT's, but I wouldn't recommend them (I always found reading text on them difficult, and they are hard to find, bulky and generally deprecated now).
For web-design, pretty much any monitor will be fine as long as it's not a 10 year old CRT with a broken red cathode-tube.. Again, as long as it's set-up correctly, most monitors are capable of displaying colour "good enough"
For "writing code", I think size/resolution/number-of-screens is more important than colour replication, as shown by most answers to any of these questions

Colour blindness simulator

Like any responsible developer, I'd like to make sure that the sites I produce are accessible to the widest possible audience, and that includes the significant fraction of the population with some form of colour blindness.
There are many websites which offer to filter a URL you feed it, either by rendering a picture or by filtering all content. However, both approaches seem to fail when rendering even moderately complex layouts, so I'd be interested in finding a client-side approach.
The ideal solution would be a system filter over the whole screen that can be used to test any program. The next best thing would be a browser plugin.
I came across Color Oracle and thought it might help. Here is the short description:
Color Oracle is a colorblindness simulator for Windows, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see.
Color Oracle is great, but another option is KMag, which is part of KDE in Linux. It's ostensibly a screen magnifier, but can simulate protanopia, deuteranopia, tritanopia and achromatopsia.
It differs from Color Oracle by requiring an additional window in which to display the re-coloured image, but an advantage is that one can modify the underlying image at the same time as previewing the simulation.
Here is a screenshot showing the original figure on the left, and the KMag window on the right, simulating protanopia.
Here's a link to a website that simulates various kinds of color blindness:
http://www.vischeck.com/
They let you check URL's and Screenshots with three kinds of different color blindness types (URL checking is a bit dated though. Image-check works better).
I'd encourage everyone to check their applications btw. Seeing your own app with others eyes may be an eye opener (pun intended).
I know this is a quite old question, but I've recently found an interesting solution to transparently simulate color blindness.
When working with Linux, you can simulate color blindness using the Color Filter plugin for Compiz. It comes with profiles for deuteranopia and protonopia und changes the colors of the whole screen in real-time.
It's very nice because it works transparently in all applications (even within Youtube-Videos), but it will only work where Compiz is available, e.g. only under Linux.
Here's an article that has some guidelines for optimizing UI for color blind users:
Particletree ยป Be Kind to the Color Blind
It contains a link to another article with the kind of tools you were asking for:
10 colour contrast checking tools to improve the accessibility of your design | 456 Berea Street
A great paper that explains a conversion that preserves color differences is:
Detail Preserving Reproduction of color images for Monochromats and Dichromats.(PDF)
I haven't implemented the filter, but I plan to when I have some more free time.
I found Colour Simulations easy to use on Windows 10. This software can apply a color-blind filter to a part of the screen or the whole screen. And what's great is it allows me to interact with my PC normally as if it doesn't exist in fullscreen mode. It runs quite slow in my 4K screen using an integrated graphics card, though.

Resources