TIL: relative colours in #CSS. You define an origin colour, and then modify (with the magic r/g/b/alpha variables for rgb) or override the values. Supported in all major browsers now (except Firefox for Android): https://caniuse.com/css-relative-colors
Example: Use the primary colour, but make it transparent and reduce how green it is:
rgb(from var(--primary-colour) r calc(g/2) b / calc(alpha * 0.5))