Possible to set hex color opacity independently?-CodePudding

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);
}

CodePudding user response：

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.