I have 2 div’s both at 50% opacity and when these 2 divs overlap each other they should match my final hex color of:
#66984D
with HSB (not HSL!) values:
Hue: 100deg
Saturation: 50%
Brightness: 60%
HSL values:
Hue: 100deg
Saturation: 33%
Lightning: 45%
Can this be calculated? I also prefer not to use 2 totally different colors but 2 ALMOST the same.

Assume that your desired color is
x, and it will be made up of a 50% opacity version of another colorytimes itself. This gives us this equation:x = .5y * .5y. Assuming my algebra is correct, this translates toy = 2 * squareroot(x).Your
xis #66984D – that’s 102 R, 152 G, 77 B. Plug that through the equation, and your starting color should be roughly 20 R, 25 G, and 18 B. In hex, that’s #143712.