color theory - Highlights and Shadows with Equal Weight

I'm creating isometric buildings in Inkscape. Each building has a base color. To account for lighting, the top of each building has a highlight, the left side has the base color, and the right side has a shadow.

My problem is that whenever I try to pick darker and lighter versions of the base color, one of them always has more contrast with the base color and thus more visual weight. Here's what I mean:

On the left, I create lighting with 20% opacity overlays of black and white. On the right, I simply adjusted the lightness slider on HSL by 20 points (out of 255) in each direction.

The shadow on the yellow example on the left has much more contrast than the highlight. Below it, the highlight on the bluish example has much more contrast. The right side is much better, but I'm wondering what the best way to do things is.

In other words, how can I best make shadows and highlights have equal contrast/ visual weight?

Answer

In paitning there is an old trick to make gradients.

In general you do not use white to make a light red, because you have pink, that looks like contaminated with white. Instead you use a bit of yellow first and then send it to white:

This happens to all colors in the color wheel, turn them a bit into the lighter section and then into white:

The same when you darken a bit yellow or light colors:

This is one reason your second column looks better. The first one is just contaminated with gray. Dark gray and light gray.

I am not sure what is the "best" way. It does not matter at all, because it is a perceptual relative problem. So do not worry too much.

Probably just limit a bit your palette so you do not have too many choices, but a general palette to choose from.

The old answer with additional info

Our vision is logarithmic. This is that the progression of light perceived is not linear.

Take a look at this bar:

It has a linear gradient, and I put a small bar in the left and right extremes.

We can barely see the red bar on the left side, but the white is clear.

The approach then should be visual, not by coding arithmetic values.

One option

Is that you make a linear gradient and after you modify it with a gamma function. Try round numbers, like Gamma 1.5, 1.8 or 2.0

Gamma 1.5

Gamma 1.8

A conclusion

The first step is to have your monitor calibrated.

After this, you probably will find that you can use, for example, 15% on one side and 20% on the other side. No one will qualify your work measuring the exact values of the proportions of the color.

But this will change according to each color.

You can not expect to have the same range of "light yellows" than "light purples" so do not go for a mathematic approach but a perceptual one.