Twitter bootstrap hex to rgba? - css

Question

Let a color variable used in sheet.less.
color is in HEX format #f57e20.
I want to use that color but add an alpha channel to it.
I want to end up with rgba(245, 126, 32, 0.5)
Does Bootstrap or less have anything to do this?

Answer 1

There are a some built in functions in less.js and mixins from Bootstrap that you could use:
This is a less.js function:
// using a variable
#color: #f57e20;
.test {
background: fade(#color, 50%); // return #color with 50% transparency
}
// or without the color variable
.test2 {
background: fade(#f57e20, 50%); // return #color with 50% transparency
}
These both result in:
.test {
background: rgba(245, 126, 32, 0.5);
}
.test2 {
background: rgba(245, 126, 32, 0.5);
}
Or use a Bootstrap mixin:
.test3 {
#translucent > .background(#f57e20, 0.5); // use HSLA mixin
}
Which results in:
.test3 {
background-color: rgba(244, 123, 31, 0.5);
}
I'll include the (fixed) code for the translucent mixins here for archiving purposes, since (last I checked) it is no longer included as of Bootstrap 3.0.0:
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
.background(#color: #white, #alpha: 1) {
background-color: fade(#color, #alpha);
}
.border(#color: #white, #alpha: 1) {
border-color: fade(#color, #alpha);
.background-clip(padding-box);
}
}

Answer 2

You may want to try:
background: rgba(red(#color), green(#color), blue(#color), #alpha);
I had to do something similar when writing a quick mixin which used box-shadow.