Is it possible to make a shape with pure HTML+CSS+SVG whose fill color is XX% darker/lighter than the stroke color if the color is set, for example, as "green"?

Question

css

The task is as follows:
There is a set of symbols in the SVG file, there can be one or more shapes in the symbol, the shapes can overlap, for example:

<symbol id="picture1">
    <circle cx="150"
               cy="150"
               r="15"
               fill-opacity="calc( var(--svg-colored-icons, 1) )"/>
</symbol>

In the HTML, we include our SVG and use our symbols:

<div class="picture_container">
   <svg class="xxx" id="yyy"> 
       <use href="file.svg#picture1" /> 
   </svg>
</div>

We can set the color of stroke and fill separately in CSS or HTML, we can use currentColor and set the same color for stroke and fill.
The --svg-colored-icons variable is defined in CSS, if it is 0 then we get only the outline, if 1 we see the filled shape.
Is it possible to somehow make in pure CSS + SVG + HTML that the fill color hue is calculated from the color specified for stroke?
For example, if stroke = "var(--colorX)" with --colorX: green, get the fill color darker or lighter by some desired amount, defined by the variable --colorX-darken: 20.
In this case, it is desirable to be able to define - -colorX in any way of specifying colors, in extreme cases only by name and / or in HEX will do.
I would like to avoid ways to set colors only through RGB components of the type:

--color1-red: 128; 
--color1-green: 200;
--color1-blue: 23;
--fill-color1: rgb( calc( var(--color1-red) - var(--colorX-darken) ) , ...

As a solution to the problem, a way to decompose --colorX: fuchsia into RGB components is suitable and already work with them through the RGB and CALC functions.
The option with fill-opacity is not suitable: the filled figure should not shine through, the outlines of other shapes should be visible under the unfilled figure.
Javascript and other bells and whistles on the server side - it's clear that it's easier, but I would like to get away from them.

Answer 1

hsl will help

:root {
  --link-color-h: 211;
  --link-color-s: 100%;
  --link-color-l: 50%;
  --link-color-hsl: var(--link-color-h), var(--link-color-s), var(--link-color-l);

  --link-color: hsl(var(--link-color-hsl));
  --link-color-10: hsla(var(--link-color-hsl), .1);
  --link-color-20: hsla(var(--link-color-hsl), .2);
  --link-color-30: hsla(var(--link-color-hsl), .3);
  --link-color-40: hsla(var(--link-color-hsl), .4);
  --link-color-50: hsla(var(--link-color-hsl), .5);
  --link-color-60: hsla(var(--link-color-hsl), .6);
  --link-color-70: hsla(var(--link-color-hsl), .7);
  --link-color-80: hsla(var(--link-color-hsl), .8);
  --link-color-90: hsla(var(--link-color-hsl), .9);

  --link-color-warm: hsl(calc(var(--link-color-h) + 80), var(--link-color-s), var(--link-color-l));
  --link-color-cold: hsl(calc(var(--link-color-h) - 80), var(--link-color-s), var(--link-color-l));

  --link-color-low: hsl(var(--link-color-h), calc(var(--link-color-s) / 2), var(--link-color-l));
  --link-color-lowest: hsl(var(--link-color-h), calc(var(--link-color-s) / 4), var(--link-color-l));

  --link-color-light: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9));
  --link-color-dark: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) * .9));
}