Return to 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 reasonable 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).

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).

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).

Any suggestions for a least problematic solution, something that ensures the least possible influence on emotional impact of the color?

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 reasonable 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).

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.

Any suggestions for a least problematic solution, something that ensures the least possible influence on emotional impact of the color?

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).

Any suggestions for a least problematic solution, something that ensures the least possible influence on emotional impact of the color?