Equalize/balance brightness and saturation of different colors using RGB (across various monitors)

Question

We want to present different colors to participants in an online experiment (in an HTML/CSS-based application, hence we'll use RGB values). More in specific, we want to show red and green colors on grey background.

Crucially, we want to do our best to balance all possible factors apart from hue, especially those that might influence emotional (positive/negative) evaluation, so in particular brightness and saturation.

However, different models give different results, and the resulting colors can seem (to us subjectively) very unnatural, i.e. not what we would call a typical green or typical red. For example, selecting a red and green similar in lightness and saturation (hsl(h*, 100%, 25.1%)) would mean red RGB(128,0,0)(#800000) and green RGB(0,128,0)(#008000), but these seem (on grey background, e.g., #909090) neither naturally red and green, nor equal in visibility, see e.g. red here and green here.

Another option is following the CIELCh model, where saturation is calculated as C*/L* (Wilms & Oberfeld, 2018), a balanced pair could be: red CIE-LCh°(ab) (D65/2°) = 34, 100, 57, rgb(164, 14, 0) (#A40E00, hsl(5.1, 100%, 32.2%)) and green CIE-LCh°(ab) (D65/2°) = 34, 100, 150, rgb(0, 103, 0) (#006700, hsl(120, 100%, 20.2%)). But then the lightness from the HSL model is not equal.

Of course there is also the problem that we cannot know the participants' monitor properties (let alone lighting conditions, etc.), which definitely rules out great precision in this matter, but still that seems the lesser problem: in general the same RGB color setting looks fairly similar on all monitors (again, in our subjective experience).

I realize that this can never be perfect, but I'm looking for suggestions for a least problematic solution, something that ensures the least possible influence on emotional impact of the color.

A definitive answer would include the possibly most optimal "red" and "green" colors with RGB values, along with a clear and convincing explanation (and references) about how it was derived (including software or formula if needed). An additional blue value could also be helpful to generalize the concept (and to further test the necessary color code transformations, if any).

Answer 1

First I should tell you that controlling for color in an online experiment is hopeless. Monitors display quite different colors, people run experiments in environments that have very different illuminations etc. There is no chance you could display equiluminant colors, which is already hard to do in the best of conditions, in an online experiment. However you can still try to minimize as much as possible variations in luminance.

You seem to assume that the RGB value of a pixel is equivalent to luminance. It is not, it is the 8-bits encoding relative to the maximum physical capabilities of the display. The RGB color channels do not have the same luminance. The ratio is roughly respectively 0.3, 0.6 and 0.1. In other words a green value that roughly matches the most luminant red a monitor can display is only half of that value ([255,0,0] has roughly the same luminance as [0,128,0]). As I said without carefully calibrating your monitor with a photometer there is no way you can display perfectly equiluminant colors online. What you can do is take a RGB space, like the sRGB space, pick 2 colors that have equiluminance in that space, and assume that it is not too far off on people displays. https://en.wikipedia.org/wiki/SRGB

Saturation is even trickier because it is not a physical quantity you can measure (technically luminance is also based on a standard observer but at least you can relate it to radiant energy). Saturation will depend on which color space you pick. CIELuv, or its polar equivalent CIELch is indeed a reasonable choice. Note that CIELuv requires defining a "white point" (in the values you give it seems to be D65), yet another reason why online color experiments are hopeless. Here I think you are making the opposite mistake as for RGB colorspaces, the L coordinate of the Luv/Lch colorspaces is luminance. So 2 colors that have the same L value do have the same luminance (and the uv/ch coordinates indicate chrominance on an equiliminant plane). However you cannot easily transform CIELuv coordinates to RGB values. You'll need to transform colors back to the CIEXYZ colorspace first, and then to RGB.

Finally as the specific hue does not seem to be an issue for you, you can always measure equiluminance experimentally. For example using a alternating red and green drifting bars. Pick a red value, start with a very dark or bright green and increase/decrease that value. When colors are equiluminant you should perceive a clear drop in the speed of the drifting bars (the motion pathway is luminance-based).

All that to say, it is good to try to control for possible confounds, but be aware that you will never be able to perfectly control for it. I would personally not worry about it too much. If it is a critical aspect of your experiment try designing a good control condition instead (switch colors for half the observers, or run a subset of observers with colors that are clearly not equiluminant or something like that).

A very good reference on the topic: http://www.visionlab.harvard.edu/Members/Patrick/PDF.files/2002%20pdfs/equi.pdf

I used this website to convert CIELuv to RGB values. Results are in the figure below. To get equiluminant colors the L value should remain constant (here I used 34 as the paper you cited). To have equisaturation (assuming the colorspace is correct), the uv coordinate should have the same euclidian distance (sqrt(u^2+v^2)=Cst, here I used 100). I absolutely do not guarantee this is correct. I just googled "CIE-Luv converter" and found this website. Checking if it is correct would be quite time consuming.

http://colormine.org/convert/rgb-to-luv