Prevent variable color name to be converted to hexadecimal in smaller class names

I want to use a variable that will hold the name of the color (red, blue, green, etc.) and define some class style rules. For example:

.mixins-common-components(@colorName, @backgroundColor, @textColor){
  .btn{
     &.@{colorName}{
         color: @textColor;
         background-color: @backgroundColor;
         border-color: "";
     }
  }
}

.mixins-common-components(blue, #3781f7, #4b8df8);

      

        
        
        
      

    

This will return me something like this:

.btn.#0000ff {
  color: #4b8df8;
  background-color: #3781f7;
  border-color: "";
}

      

        
        
        
      

    

Well, as the .btn picture shows, this is not normal. I would like to show it like this:

 .btn.blue{ ... }

      

        
        
        
      

    

I notice that less will automatically convert the color name to a HEX value. I tried to use quotes as well, but that seems to be a bad solution too. Is there a solution to fix this in an elegant way?

Thank.