If you've already set a value for your blue color and can create a rectangle using CSS, adjusting the lightness, saturation, and opacity percentages is possible with the
hsla(color, saturation, lightness, opacity)
function.
To achieve the desired "percentages," focus on changing the saturation percentage. For instance, to get a fully saturated blue at 240 degrees, use hsla(240, 100%, 50%, 1)
. For 50% blue, try hsla(240, 50%, 50%, 1)
, and for 25% blue, experiment with hsla(240, 25%, 50%, 1)
, and so forth.
To grasp the concept of hsla and determine what you mean by the "percentage" of blue, visit this hsla color picker tool:
After understanding how hsla functions, apply the chosen variable to adjust your rectangle accordingly.