What are the color channel functions in Less?

The LESS (learner CSS) is a preprocessor developed on top of the normal CSS to allow developers to maintain and customize the CSS code easily. For example, it allows to create variables and functions inside the CSS code. So, developers don’t require to write repetitive code as we generally do in normal CSS.

The color channel function is also another great feature of Less which takes the color value as an input and returns the value of the particular color channel.

In this tutorial, we will learn about 12 color channel functions in Less with their examples. Here is the list of all color channel functions.

• Red() function

• Green() function

• Blue() function

• Alpha() function

• Hue() function

• Saturation() function

• Brightness() function

• Hsvhue() function

• Hsvsaturation() function

• Hsvvalue() function

• Luma() function

• Luminance() function

Red() Function

The red() is a first color channel function in our list. It takes a color value as a parameter and returns the value between 0 and 255, which is the intensity of the red color in the current color.

Example

In the example below, we have stored the rgb value of orange color as a value of the ‘mycolor’ variable. After that, we used the red() function by passing the ‘myclor’ as a parameter, and stored the return value in the ‘redchannle’ variable.

In the output, users can observe that the value of the ‘redchannle’ variable is 255.

@mycolor: rgb(255, 165, 0);
@redchannel: red(@mycolor);
.element {
   background-color: @redchannel;
}

Output

.element {
   background-color: 255;
}

Green() Function

The green() is at the second position in our list of the less color channel functions. It takes a color value and returns the intensity of the green color between 0 and 255.

Example

In the example below, we have stored the rgb color value in the ‘mycolor’ variable. We always write the intensity of the green color as a second parameter of the rgb() method.

We have used the green() function to get the color channel value of the green color from the rgb value, and in the output, we can check that it has returned 15.

@mycolor: rgb(0, 15, 0);
@greenchannel: green(@mycolor);
.element {
   color: @greenchannel;
}

Output

.element {
   color: 15;
}

Blue() Function

The blue() function returns the value of the blue channel related to the color passed as a parameter.

Users can follow the example below to use the blue() function in less.

Example

Here, we have passed the ‘#FF5733’ hexadecimal color value as a parameter of the blue() function, which is a shade of the orange color.

The output shows 51 as a value of the blue color channel, meaning the intensity of the blue color in the particular color is 51.

@bluechannel: blue(#FF5733);
.output {
   color: @bluechannel;
}

Output

.output {
   background-color: 51;
}

Alpha() Function

As the name suggests, the alpha() function is used to get the opacity of the current color, representing the alpha channel value.

In the rgba() color format, we pass the alpha value as the last parameter.

Example

The ‘color’ variable in the example below stores the rgba color value. Here, we have passed the ‘0.9’ as an alpha channel value in the rgba.

We used the alpha() function to get the opacity of the ‘color’, and it returns 0.9, which we can see in the output.

@color: rgba(25, 77, 91, 0.9);
@alphachannel: alpha(@color);
.output {
   opacity: @alphachannel;
}

Output

.output {
   opacity: 0.9;
}

Hue() Function

The hue() function is used to get the hue value of a particular color. It returns the hue angle of the color on the color wheel, whose value is between 0 and 360.

Example

In the example, we have stored the rgb value in the ‘color’ variable. After that, we have used the hue() function to get the hue value of the current color.

We have used the hue value while defining the color using the hsl(). The hue() function returns the 16 for the rgb(34, 9, 0) color value.

@color: rgb(34, 9, 0);
@huevalue: hue(@color);
.element {
   color: hsl(@huevalue, 100%, 50%);
}

Output

.element {
   color: hsl(16, 100%, 50%);
}

Saturation() Function

The saturation() function returns the saturation value of the color passed as a parameter between 0 and 100%.

Example

In this example, we have taken the rgb(34, 9, 76) color to get its saturation value. Here, we have executed the saturation() function inside the hsl() method to get the saturation value of the current color.

In the output, we can observe that it returns 78.8% as a saturation value

@color: rgb(34, 9, 76);
.element {
   color: hsl(21, saturation(@color), 50%);
}

Output

.element {
   color: hsl(21, 78.8%, 50%);
}

Brightness() Function

The brightness() function is used to get the brightness of the particular function. It returns a value between 0% and 100%.

Example

Here, we get the brightness value of the rgb(34, 9, 76) color and use it while defining the other color using the hsl() method. In the output, users can observe that brightness() method returns the 16.7% value.

@color: rgb(34, 9, 76);
.element {
   color: hsl(21, 78.8%, brightness(@color));
}

Output

.element {
   color: hsl(21, 78.8%, 16.7%);
}

Hsvhue() Function

The hsvhue() function is used to get the hue value in the hsv color model.

Example

In this example, we have used the hsvhue() function to get the hue value in the hsv model, which returns the value between 0 and 360. In the output, we can observe that it returns 16 for the color value.

@ hsvhueValue: hsvhue(rgb(255, 87, 51);
.demo {
   background-color: hsv(@hsvhueValue, 70%,60%);
}

Output

.demo {
   background-color: hsv(16, 70%, 60%);
}

Hsvsaturation() Function

The hssaturation() function is used to get the saturation value in the hsv color model.

Example

In this example, we used the hsvsaturation() function by passing the color value as a parameter. In the output, we can see that it returns 100% saturation.

@hsvsaturationValue: hsvsaturation(rgb(255, 87, 51);
.demo {
   background-color: hsv(65, @hsvsaturationValue,80%);
}

Output

.demo {
   background-color: hsv(65, 100%, 80%);
}

Hsvvalue() Function

The hsvalue() function is used to get the brightness value in the hsv color model.

Example

Here, we have used the hsvvalue() function to get the brightness of the color in the hsv model. It returns 100%, which we can see in the output.

@hsvvalue: hsvvalue(rgb(255, 87, 51);
.demo {
   background-color: hsv(65, 90%, @hsvvalue);
}

Output

.demo {
   background-color: hsv(65, 90%, 100%);
}

Luma() Function

The luma() function is used to get the luma value for a particular value with the gamma correction. It returns the value between 1 and 100.

Example

In the example below, we used the luma() function to get the luma value of the rgb(50, 250, 150) color with gamma correction. In the output, we can see that it returns 71.251% value.

.demo {
   background: luma(rgb(50, 250, 150));
}

Output

.demo {
   Background: 71.251%
}

Luminance() Function

The luminance() function is also used to get the luma value for a particular value but without the gamma correction.

Example

In this example, we have used the luminance () function to get the luma value of rgb(50, 250, 150) color without gamma correction. Users can observe the difference between the output value of the luma() and luminance() functions for the same color value.

.demo {
   background: luminance(rgb(50, 250, 150));
}

Output

.demo {
  Background: 78.533 %
}