0

I have a CSS var that is defined in the root as a HEX, this is unchangeable.

--blue: ##0000FF

I'd like to use this variable to create an opacity, like this:

color: rgba(var(--blue), 0.1)

This won't work as --blue is a HEX so I use a function like this to convert it:

@function hex-to-rgb($hex) {
  @return red($hex), green($hex), blue($hex)
}

and I then try:

color: rgba(hex-to-rgb(var(--blue)), 0.1)

However I'm getting the error $color: var(--blue) is not a color

I'm also trying transparentize and other solutions but I keep on getting that the blue variable isn't a colour...

Is there a way of making this work?

daggett
  • 239
  • 2
  • 4
  • 15

0 Answers0