There are no strict rules for color combination more than visual perception. But based on the colors you indicate in the question and some visual rules, we can find a certain formula.
The premises that I would have in consideration are:
Try keeping the company color at maximum visual level.
The new colors should not overshadow the institutional color. See the question images examples, the Lend and Borrow tags colors totally annul the institutional color. Try covering both tags with the hand and you will see the top blue has a high brightness and saturation. Moving away the hand, the colors below have the same saturation but the gradient gives them more brightness, so the blue loses strength, is a blue Microsoft interface, almost gray.
Seeing the web colors variants, both blue and gray have the same brightness, vary in saturation:
- Blue: 85% saturation, 90% brightness
- Grey: 2% saturation, 98% brightness
Keeping the same brightness and choosing an intermediate saturation we get the third blue in the image:
Moving the hue slider with the same saturation and brightness values, those are the resultant colors:
The top navy blue doesn't lose strength despite competing with a variety of colors.
Here there's a color set to make gradients. Below some examples, from left to right, using just the colors from the top set, and covering them with the same color shapes with different blends.