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

<p>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. </p>

<p>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 (<code>hsl(h*, 100%, 25.1%)</code>) would mean red <code>RGB(128,0,0)</code>(<code>#800000</code>) and green <code>RGB(0,128,0)</code>(<code>#008000</code>), but these seem (on grey background, e.g., <code>#909090</code>) neither naturally red and green, nor equal in visibility, see e.g. <a href="https://i.sstatic.net/O9uWn.png" rel="nofollow noreferrer">red here</a> and <a href="https://i.sstatic.net/EUWEI.png" rel="nofollow noreferrer">green here</a>.</p>

<p>Another option is following the CIELCh model, where saturation is calculated as <code>C*/L*</code> (<a href="https://link.springer.com/article/10.1007/s00426-017-0880-8" rel="nofollow noreferrer">Wilms &amp; Oberfeld, 2018</a>), a balanced pair could be: <strong>red</strong> CIE-LCh°(ab) (D65/2°) = 34, 100, 57, <code>rgb(164, 14, 0)</code> (<code>#A40E00</code>, <code>hsl(5.1, 100%, 32.2%)</code>) and  <strong>green</strong> CIE-LCh°(ab) (D65/2°) = 34, 100, 150, <code>rgb(0, 103, 0)</code> (<code>#006700</code>, <code>hsl(120, 100%, 20.2%)</code>). But then the lightness from the HSL model is not equal.</p>

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

<p>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.</p>

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

<perception><measurement><vision><color><emotion-perception>
Equalize/balance brightness and saturation of different colors using RGB (across various monitors)
gaspar
# Equalize/balance brightness and saturation of different colors using RGB (across various monitors)

(Asked by: username_0 on 2020-05-16)

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](https://i.sstatic.net/O9uWn.png) and [green here](https://i.sstatic.net/EUWEI.png).

Another option is following the CIELCh model, where saturation is calculated as `C*/L*` ([Wilms & Oberfeld, 2018](https://link.springer.com/article/10.1007/s00426-017-0880-8)), 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).

**Tags:** perception, measurement, vision, color, emotion-perception


---

## 0 answers

