CSS: Elegant Grid striping?

I use background colors to provide status information on a grid.

This process entails selecting a color for the non-striped row, then guessing at a color that looks like a good match given the stripe. It would be better to select a base color then calculate the striped equivalent. The calculation would ideally be done in css using Calc(), but all ideas are welcome.

Something like: Reduce each RGB component in the selected colour by the same percentage as the grey stripe is reduced from white? Or is there more to it than that - considering human factors perceiving consistent striping across different backgrounds?

Has anyone got a good approach to this?

Hi Steve!

I would opt to use opacity instead, seems more straightforward. So pick the “striped” color slightly darker as you need, and then reduce the opacity to something like 90%, and overlay on top of the regular row background color.