How can I add alpha values to variables in css?

Question

Like this.

color: var(--color-alt) + 80

So for example if I set a color like #32a6a8 as --color-alt & then I also want to have a transparency of 50% for that color applied (alpha code for 50% transparency is 80 - that's why its there var(--color-alt) + 80).

The variable is required since this is an angular app & it needs to set the color values dynamically with colors having transparency of 50%.

So is there a way to do this is native css?

it will be text color or background color? there is no generic solution for what you want but workarounds based on your case — Temani Afif, Jun 25 '20 at 09:23
so share your full code then, it can be achieved with box-shadow — Temani Afif, Jun 25 '20 at 09:27
There are no other dependencies. If I';m about to show you full code I will have to upload the whole app. That' too heavy!!! — reacg garav, Jun 25 '20 at 09:32
not *full code* of your app.Only the needed code to show your use case. to show how your are using box-shadow doesn't need you to upload your entire app — Temani Afif, Jun 25 '20 at 09:33

score 1 · Answer 1 · answered Jun 25 '20 at 09:18

1

You can use other color system. Like this color: rgba(var(--color), var(--alpha));

answered Jun 25 '20 at 09:18

ravenly

46
5

Or Is there a way to convert hex to rgba in css? – reacg garav Jun 25 '20 at 09:21
You only can convert color by js. or you can try this way https://stackoverflow.com/questions/10929458/sass-converting-hex-to-rgba-for-background-opacity – ravenly Jun 25 '20 at 09:27
Hex colors do not have an alpha channel for transparency , hsla() or rgba() do. You need to use one of them. More details of the use you wanna do, could open other choices. Blend-mode/opacity? – G-Cyrillus Jun 25 '20 at 09:29
@G-Cyrillus: hex-colours do have an alpha channel: `#RRGGBBAA` (or `#RGBA`): [CSS Tricks article: https://css-tricks.com/8-digit-hex-codes/](https://css-tricks.com/8-digit-hex-codes/). – David Thomas Jun 25 '20 at 09:34
@DavidsaysreinstateMonica it actually seems to be much more supported nowdays than i thought, however, it is not cpmpatible with the use of var() nor calc() :( – G-Cyrillus Jun 25 '20 at 11:47

How can I add alpha values to variables in css?

1 Answers1