Prevent variable color name to be converted into hex in less class names

Question

I want to use a variable that will contain the name of a color (red, blue, green, etc) and to 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 to me something like this:

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

Well, the way that .btn is displayed it's not ok. I would like to display it like this:

 .btn.blue{ ... }

I notice that less is automatically converting the color name into HEX value. I also tryied with quotes but it seems is not a good solution either. Is there any solution to fix this into an elegant way?

Thanks.