1

I am converting some of my color values from scss rgba variables to css custom properties using the hsla color model.

For example,

$color-navy: rgba(57, 80, 112, 1);

becomes

:root {
    --color-navy: hsla(214, 33%, 33%, 1);
}

My problem is I use the scss rgba() function to add varying degress of opacity to my colors:

color: rgba($color-black, 0.87);

Is there an hsla equivalent of this where I can pass in my custom property and apply an alpha?

Example of what I want to achieve:

hsla(var(--color-black), 0.5)
noclist
  • 1,659
  • 2
  • 25
  • 66
  • rgba is not scss related, it is normal css, isn't the `a` in `hsla` alpha? same as rgba's `a` – Huangism Jun 11 '21 at 17:23
  • Maybe this questions helps https://stackoverflow.com/questions/51589452/using-css-variables-in-hsla-in-scss – Huangism Jun 11 '21 at 17:29
  • It is also a bit confusing that you used scss var `color: rgba($color-black, 0.87);` and then you used css var here `hsla(var(--color-black), 0.5)`. Please clarify which kind of var you want to use – Huangism Jun 11 '21 at 19:29
  • related: https://stackoverflow.com/a/55330103/8620333 – Temani Afif Jun 11 '21 at 19:32

1 Answers1

0

Both rgba and hsla are CSS functions. rgba is not an SCSS function as such.

The 'a' in both stands for alpha channel which basically gives the opacity, 0 or 0% being completely transparent and 1 or 100% being completely opaque.

So taking your example navy color:

rgba(57, 80, 112, 0.4) would be equivalent to hsla(214, 33%, 33%, 0.4)

See for example: https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color

A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • I understand, I'm looking for a way to pass in a custom property to the hsla function and apply the alpha to it, like 'hsla(--color-blue, .05)' – noclist Jun 13 '21 at 14:00