Possible to set hex color opacity independently?

Question

Is it possible to set opacity value in hex color independently (to avoid repetition), or to append to var() e.g. var(--set1)1?

Example:

:root {
  --set1: #abc;
  --set1-1: #abc1;
  --set1-3: #abc3;
  --set1-5: #abc5;
}


pre {
  border-left: 4px solid var(--set1);
  background-color: var(--set1-1);
}

Answer 1

In the near future and thanks to "relative color syntax" You can do the following

:root {
  --set1: #abc;
  --set1-1: rgb(from var(--set1) r g b / 80%);
  --set1-3: rgb(from var(--set1) r g b / 50%);
  --set1-5: rgb(from var(--set1) r g b / 30%);
}

You transform the color into an rgb() value then you set the transparency.

---

There is no browser support for the above. Until then, you have to manually write the colors or use Sass to generate them.

Related: How to create color shades using CSS variables similar to darken() of SASS?