1

I'm developing a website and I'm thinking about the background color saturation and brightness. I've read that too saturated and bright colors would strain the eye if not immediately after a while.

In this example https://www.dtelepathy.com/ it is clear on first impression that the website is too intense on the eye.

But what about this website https://www.reech.com/fr/ ?Although the brightness is low, saturation at its max. Do you think it would strain the eye after a while?

What would be the maximum combination of brightness and saturation that one could reach before the background color begins to strain the eye?

1

There is no maximum. Ultimately it boils down to how much people are going to be using your website and the effect it has on them. If users are going to spend hours on it every day, then it needs to not strain the eye. But if it's just a marketing website that someone visits once for thirty seconds, it's okay to use colors that strain the eye a little bit more. It can even help your site/design stand out if used properly.

Ultimately it should usually be pretty obvious if your design is using colors that are strenuous on the eye because you'll be spending more time looking at it than the end client. You should always do testing with actual clients to see if your design accomplishes what you want it to and get feedback from them.

1

Here's my advice: use color for the elements in your website, in opposite directions of a color wheel, for contrast, but not directly opposed or complementary, and find their additive-averaged color. In case you have chosen complementary colors, this additive-averaged color will have been grey #808080, which is neutral, but not impartial, because it will strengthen some hues more than others with the same saturation.

It's their chromatic content, which varies with lightness, that makes some colors appear brighter under the same background. You can check Hue on both HSV and LCH color models, but they will vary in Saturation and Value, Lightness and Chroma. Some colors will appear to be subdued, others will vibrate with neutral grey, unless you add the color values and find their mean.

Do this exercise: use #782121 for red, #217821 for green, #212178 for blue in Photoshop or Illustrator (Gimp or Inkscape). To find the opposite cyan, magenta and yellow, use #87DEDE, #DE87DE and #DEDE87, and average these colors from their RGB values for the adjacent pairs. You will have formed a color wheel. Now that you have it, pick colors so that they're not geometrically even (in triangles, squares and hexagons), because you will have darkened the resulting grey, when it should be closer to the lightness of the closest colors.

enter image description here

This illustration would not have worked with a black or white background, because the colors would be either pale or blackened against it, so I chose the grey that is the end result of an additive-averaging process. Give it a try! As a bonus, and since it is for a website, try to add your colors, not as images, but as formulas or values. Good work!

EDIT: Corrected the values for cyan, magenta and yellow.

2
  • What does this have to do with the question that was asked? – Zach Saucier Mar 13 '20 at 14:27
  • He asked for a background color and I gave him a means to get to one that doesn't make the object colors appear brighter than they are. This isn't a problem of specification, but color theory with regards to perception, because saturation and brightness belong to the latter. – Marco_O Mar 13 '20 at 14:49

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.