The solution isn't quite as compact as the OP was hoping for, but the way of doing this is going to be:
color: oklch(from blue calc(l - 50%) c h);
Support isn't universal yet. See caniuse before using it, to see if support is in wide enough use for your use case.
Hricer posted another modern day answer with a little bit better support, but pretty soon both approaches should become well enough supported for use
An explanation of the solution:
oklch is a color space aimed at maintaining the same lightness as you change the color. The channels are.
l: lightness, 0-100%
c: chroma, 0-1
h: hue, 0-360
\a: alpha (optional), 0-1
Example usage: color: oklch(50%, .5, 180 / .5);
(note other unit values such as using 0-1 instead of 0-100% are possible, see documentation)
The new relative color syntax gives you the individual channels of color a to use while constructing color b. It is used by inserting from <color>
at the beginning of one the new color functions (hsl(), hwb(), rgb(), lab(), lch(), oklab(), and oklch())
Of those color functions, the last 2 do the best job of maintaining the same lightness based on the way the human eye perceives the brightness of different colors.
This allows us to do
oklch(from blue calc(l - 50%) c h);
Note that the l
, c
, and h
are variables and do not have to be used
/* pointless, but possible */
oklch(from blue 50% .8 0);
Or can be used in the wrong place
/* Not much point in this either */
oklch(from blue c l h);
Those examples are kind of pointless, but should get your wheels turning on how you can use relative colors.
The from <color>
part can be any type of color or can be a CSS variable.
oklch(from #123 l calc(c + .1) h);
Or
oklch(from rgb(1,2,3) l calc(c + .1) h);
Or
oklch(from var(--my-var) l calc(c + .1) h);
And with the alpha channel:
oklch(from var(--my-var) l c h / .5);
oklch(from rgba(0,0,0,.5) l c h / calc(a - .5));