Convert HEX to RGBA in Stylus

Question

I have some HEX colour values in Stylus similar to the following

$my-background ?= #123456
$my-foreground ?= #ABCDEF

and would like to use them in rgba values for opacity, so that

.my-class
    background rgba($my-background, .5)
    foreground rgba($my-foreground, .5)

or an alternative syntax is compiled into CSS as

.my-class {
    background rgba(18, 52, 86, .5);
    foreground rgba(171, 205, 239, .5);
}

Is there a quick and easy way to use HEX colour values in rgba using Stylus or a plugin for Stylus (such as nib)?

Answer 1

Actually, the rgba in Stylus works just like that, have you tried what you wrote? In Stylus

$my-background ?= #123456
$my-foreground ?= #ABCDEF

.my-class
    background rgba($my-background, .5)
    foreground rgba($my-foreground, .5)

Would actually compile to

.my-class {
  background: rgba(18,52,86,0.5);
  foreground: rgba(171,205,239,0.5);
}

This means you can just go and do things like rgba(black, 0.5), rgba(#FFF, 0.5) and use variables inside of it, just like in your case.

Answer 2

In the end I made my own function to do this:

hextorgba(color, alpha = 1)
    'rgba(' + red(color) + ', ' + green(color) + ', ' + blue(color) + ', ' + alpha + ')'