LESS css: trying to use the red, green, and blue functions to get rgb values and then insert into gradient

Question

I'm trying to pull individual r, g, b values from preferably a hex value, then insert those values into a background gradient. The idea is that I don't have to fiddle around with individual rgb values. I'm trying to use the red(@color), green(@color), blue(@color) functions but the error I get is: error evaluating function `rgb`: color functions take numbers as parameters ``` @color: #E28141; .test-gradient (@color, @topalpha, @topstop, @bottomalpha, @bottomstop) { @red1:red(@color); @green1:green(@color); @blue1:blue(@color); background: linear-gradient(to bottom, rgba(@red1,@green1,@blue1,@topalpha) @topstop,rgba(@red1,@green1,@blue1,@bottomalpha) @bottomstop); } ``` Martin pointed out that the above code actually works so I'm including the actual mixin I'm trying to use: ``` .test-gradient (@color, @topalpha, @topstop, @bottomalpha, @bottomstop) { @red1:red(@color); @green1:green(@color); @blue1:blue(@color); background: rgb(@red1,@green1,@blue1); background: -moz-linear-gradient(t…

Accepted Answer

it seems to work fine to me,

i tried this:

```
.test-gradient(@color, .5, 10%, .9, 90%);
```

and the output was:

```
background: linear-gradient(to bottom, rgba(226, 129, 65, 0.5) 10%, rgba(226, 129, 65, 0.9) 90%);
```

so I am not sure what you were passing in the variables, maybe you can show us an example that produces the error.

Edit:

you just had some typos (used `green` insted of `@green` once and `@@red` in another place). This should work now:

```
.test-gradient (@color, @topalpha, @topstop, @bottomalpha, @bottomstop) {
@red1:red(@color);
@green1:green(@color);
@blue1:blue(@color);
background: rgb(@red1, @green1, @blue1);
background: -moz-linear-gradient(top, rgba(@red1,@green1,@blue1,@topalpha) @topstop, rgba(@red1,@green1,@blue1,@bottomalpha) @bottomstop);
background: -webkit-gradient(linear, left top, left bottom, color-stop(@topstop,rgba(@red1,@green1,@blue1,@topalpha)), color-stop(@bottomstop,rgba(@red1,@green1,@blue1,@bottomalpha)));
background: -webkit-linear-gradient(top, rgba(@red1,@green1,@blue1,@topalpha) @topstop,rgba(@red1,@green1,@blue1,@bottomalpha) @bottomstop);
background: -o-linear-gradient(top, rgba(@red1,@green1,@blue1,@topalpha) @topstop,rgba(@red1,@green1,@blue1,@bottomalpha) @bottomstop);
background: -ms-linear-gradient(top, rgba(@red1,@green1,@blue1,@topalpha) @topstop,rgba(@red1,@green1,@blue1,@bottomalpha) @bottomstop);
background: linear-gradient(to bottom, rgba(@red1,@green1,@blue1,@topalpha) @topstop,rgba(@red1,@green1,@blue1,@bottomalpha) @bottomstop);
}
```

Note:

functions `tint`, `shade`, `multiply`, `screen`, `overlay`, `hardlight`, `difference`, `exclusion`, `average`, `negation`, `softlight`, `red`, `green`, `blue` and `contrast` have been only introduced in LESS 1.3.1.

In older versions of LESS for example

```
red(#E28141)
```

will return

```
red(#E28141)
```

instead of the number

```
226
```

LESS css: trying to use the red, green, and blue functions to get rgb values and then insert into gradient

Solution

Problem