1-Design with black and white first to get the contrast correct.
Technique used by concept artists and painters called "shading", they usually do in B&W so they can get the color correctly.
2-Go to Dribbble search by color or keyword, or get a scanned vintage poster and steal the colors from either one of those. Oil paintings can be also used in that sense.
My designer friend who worked in Branding always stole from Monet and Van Gogh.
3-Apply the colors to the website.
Trick: turn off colors from the OS so it's all grayscale.
Compare the original b&w wireframe with the version you applied color, you can overlap one with the other one using some squares. You can easily see the difference between the quantity of light on those , then using the HSL color scale change Saturation or Light to make them match , avoid hue because it is the actual color, and the less hues you have the better, unless you are doing illustration
When you say 10 colors it might be the wrong concept.
If I have #E9ECEF and #6C757D they are not two colors but one, because in HSL values the S and L are changing, it's like there are different light sources hitting the object and producing different variations. Try to use 1 primary color, a secondary color and accent. If you need contrast, then try to find a way to change them without changing HUE. It's not an exact science, also because colors change in proximity of other colors due on how the brain perceives it.