How to Convert a Hexadecimal Color to Rgba with the Less Compiler

LESS Mixin/Function to change a @Color HEX to RGBA to PASS into another mixin

There is no return keyword in less. If you want a mixin that returns a value, then you can define a variable inside it, for example:

.rgbaColorIn(@color, @opacity : 1){
  @result: rgba( red(@color), green(@color), blue(@color), @opacity );
}

which you can access in the scope you call the mixin:

.section {
  .rgbaColorIn(red, 50%);
  background-color: @result;
}

But if you just want to generate a RGBA from a RGB color, you can use the fade function:

.section {
  @result: fade(red, 50%);
  background-color: @result;
}

which will render the same result in CSS:

.section {
  background-color: rgba(255, 0, 0, 0.5);
}

A .box-shadow mixin to pass the RGB color and opacity/alpha separately could be something like this:

.box-shadow(@x; @y; @b; @color; @opacity) {
   box-shadow: @x @y @b fade(@color, @opacity);
   -moz-box-shadow: @x @y @b fade(@color, @opacity);
   -webkit-box-shadow: @x @y @b fade(@color, @opacity);
}

Which you could use in a selector like this:

.section {
  .box-shadow(2px; 2px; 1px; pink; 50%);
}

and obtain this CSS:

.section {
  box-shadow: 2px 2px 1px rgba(255, 192, 203, 0.5);
  -moz-box-shadow: 2px 2px 1px rgba(255, 192, 203, 0.5);
  -webkit-box-shadow: 2px 2px 1px rgba(255, 192, 203, 0.5);
}

LESS Compiler Converts RGBA() to Hex

LESS' rgba() function takes a percentage between 0% and 100%.

You're passing 128, which is fully opaque.

Is it possible to convert rgba color to hex using LESS

If I understand the question correctly you're looking for a function that calculates result of compositing/layering of one color (e.g. rgba(96, 96, 96, .1)) with/over another (e.g. white). In Less it's supposed to be one of the blending functions family, but since the name of such function in current naming convention has to be normal (which is rather weird) this function is not included. But if one of colors is always white you still can get the desired result via multiply:

multiply(white, rgba(96, 96, 96, .1))

Convert Hex to RGBA

//If you write your own code, remember hex color shortcuts (eg., #fff, #000)

function hexToRgbA(hex){
    var c;
    if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
        c= hex.substring(1).split('');
        if(c.length== 3){
            c= [c[0], c[0], c[1], c[1], c[2], c[2]];
        }
        c= '0x'+c.join('');
        return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',1)';
    }
    throw new Error('Bad Hex');
}

hexToRgbA('#fbafff')

/*  returned value: (String)
rgba(251,175,255,1)
*/

How Can I change color hex code to rgba using only CSS?

Try:

 $wild-watermelon: #f55463;

 .container {
   background-color: rgba($wild-watermelon, 0.75 );
 }

If you want to change the color, just change the hex code of the variable.

I would suggest to pick a more generic name though (e.g. $color-primary), just in case you do change the color scheme of your project in the future, so you don't have to change the variable name also. This way is more maintainable.

Sass - Converting Hex to RGBa for background opacity

The rgba() function can accept a single hex color as well decimal RGB values. For example, this would work just fine:

@mixin background-opacity($color, $opacity: 0.3) {
    background: $color; /* The Fallback */
    background: rgba($color, $opacity);
}

element {
     @include background-opacity(#333, 0.5);
}

If you ever need to break the hex color into RGB components, though, you can use the red(), green(), and blue() functions to do so:

$red: red($color);
$green: green($color);
$blue: blue($color);

background: rgb($red, $green, $blue); /* same as using "background: $color" */