Twitter bootstrap hex to rgba?

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.