3

Currently, I use the two colors blue and black to visualize the degrees of severity in two variables X and Y denoting two opposites. In RGB I let black (for X variable) vary in the range

(0,0,0) - (255,255,255)

and I let the blue (for Y variable) vary in the range

(0,0,0) - ( 0 , 0 ,255)

I was hoping for shades of the same intensity, like grey (100,100,100) and blue ( 0 , 0 ,100) to be perceived as having the same 'darkness' by the human eye, but unfortunately in my own perception I see that it is not the case.

My question is - do two colors exist whose corresponding shades in the above sense are perceived as equally dark by the human eye? If so, which colors are those? PS: If at all possible, I would like to avoid colors that tend to be perceived as a shade of green or red.

EDIT:

I found the following image online:

enter image description here

Based on this, for X variable I decided to vary in the range

(0,0,0) - (255, 0 ,255)

and for Y variable to vary in the range

(0,0,0) - ( 0 ,255,255)

This puts the two colors roughly into ranges of violet and ultramarine respectively. These are just to the left and just to the right of the "Blue" receptors peak, while red receptors for violet are comparable in magnitude to green receptors for ultramarine.

It is definitely a crutch, but the equality of darkness perception for the two colors did improve a lot compared to black and blue before.

1 Answer 1

5

Let us imagine that the numbers (100) are the number of photons shooting out of the screen into your eyes.

By simply comparing the values of color (100,100,100) vs (0,0,100) we see that the screen is shooting more light on the first color. You have your dose of blue, but additionally, you have Red and Green shooting light into your eyes.

But even if we have just one channel shooting photons, (0,100,0) the perceived brightness is different because we can differentiate green a lot better than we can differentiate tones of blue.

Compare these two images with gradients of blue and green.

enter image description here enter image description here

Unfortunately, the normal color notations for the web, like HSL will not give you a solution either, because they are "too mathematical" and you need a perceptual.

The best-known color model for perceptual values is Munsell https://munsell.com/about-munsell-color/how-color-notation-works/ you probably can use it to find your blue color and an equivalent gray.

But for simple applications, you could do that manually using some tools like

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool

https://yari-demos.prod.mdn.mozit.cloud/es/docs/Web/CSS/CSS_Colors/Color_picker_tool/_sample_.colorpicker_tool.html

enter image description here

where you can generate one foreground color and play with a background one. Gray in this case.

One "manual" way to do it is using something like: https://www.infobyip.com/htmlcolorpicker.php (Or Ps itself) enter image description here

But this method is dependent on the values of your monitor and graphics card. Try to calibrate it first, so your values are in some reasonable range.


(Complementing based on a comment)

I wonder, if the perception will be equal if I go with shades of two complementary colors on the palette

Here is a color circle transformed into grayscale with some "standard" method (using some X color profile, Y values, etc. Not important for now).

enter image description here

As you can see the perceived lightness is brighter on the yellow side and darker on the blue.

It is also lighter on the CMY values than the RGB ones, again, because each CMY value has 2 RGB channels shooting photons.

The only complementary color on this grayscale image is some tone of orange vs some tone of blue-cyan. So, no.


@Wolf found a really interesting color tool:

http://hclwizard.org:3000/hclcolorpicker/

You need to convert your original RGB notation to Hexadecimal. The number 100 would be 64 in hexadecimal. #000064

Reducing the chroma to 0

enter image description here

Gives you an hexadecimal value that you can transform again to RGB notation.

11
  • Very interesting about the different perception of shades in green and blue! I wonder, if the perception will be equal if I go with shades of two complementary colors on the palette, instead of black and blue?
    – Kagaratsch
    May 18 at 14:53
  • Not really. I will edit a bit my answer to explain it.
    – Rafael
    May 18 at 14:58
  • What about Lab/HCL color space? Isn't the Lightness channel of Lab supposed to mean "perceived lightness"?
    – Wolff
    May 18 at 14:58
  • @Wolff, the problem with that is that I can not find a usable online resource. Probably the first webpage I posted used something like that for its internal transformations. I can not tell.
    – Rafael
    May 18 at 15:01
  • 1
    Nice finding... I will expropriate the link. MUAHAHA!
    – Rafael
    May 18 at 15:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.