What are the color channel functions in Less?

LESS (Learner CSS) is a preprocessor developed on top of normal CSS, allowing developers to easily maintain and customize CSS code. For example, it allows creating variables and functions in CSS code. Therefore, developers don’t need to write duplicate codes like we usually do in normal CSS.

The color channel function is also another important function of Less, which takes a color value as input and returns the value of a specific color channel.

In this tutorial, we will learn about the 12 color channel functions in Less through examples. This is a 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

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

Example

In the example below, we store the orange rgb value as the value of the "mycolor" variable. After that, we use the red() function by passing "myclor" as parameter and store the return value in the "redchannle" variable.

In the output, the user 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

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

Example

In the example below, we store the RGB color value in the "mycolor" variable. We always write the intensity of green as the second argument to the rgb() method.

We use the green() function to get the green color channel value from the rgb value. In the output, we can see that it returns 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 associated with the color passed as argument.

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

Example

Here we pass the "#FF5733" hexadecimal color value as the parameter of the blue() function, which is the shade of orange.

The output shows 51 as the value of the blue channel, which means the intensity of blue in that 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 obtain the opacity of the current color, which represents the alpha channel value.

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

Example

The "color" variable in the following example stores rgba color values. Here we are passing "0.9" as the alpha channel value in rgba.

We use the alpha() function to get the opacity of the "color", 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

hue() function is used to obtain the hue value of a specific color. It returns the hue angle of a color on the color wheel, with values ​​between 0 and 360.

Example

In the example, we store the RGB value in the "color" variable. After that, we used the hue() function to get the hue value of the current color.

We use hue values ​​when defining colors using hsl(). The Hue() function returns the rgb(34, 9, 0) color value 16.

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

Output

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

Saturation() function

saturation() function returns the saturation value of the color passed as argument, ranging from 0 to 100%.

Example

In this example, we take an rgb(34, 9, 76) color to get its saturation value. Here, we execute the saturation() function in the hsl() method to obtain the saturation value of the current color.

In the output we can observe that it returns 78.8% as the saturated value

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

Output

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

Brightness() function

brightness() function is used to obtain the brightness of a specific 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 when defining other colors using the hsl() method. In the output, the user can observe that the Brightness() method returns a value of 16.7%.

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

Output

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

Hsvhue() function

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

Example

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

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

Output

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

Hsvsaturation() function

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

Example

In this example, we use the hsvsaturation() function by passing the color value as 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%);
}

输出

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

Hsvvalue() 函数

hsvalue()函数用于获取hsv颜色模型中的亮度值。

示例

这里，我们使用 hsvvalue() 函数来获取 hsv 模型中颜色的亮度。它返回 100%，我们可以在输出中看到。

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

输出

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

Luma() 函数

luma() 函数用于通过伽马校正获取特定值的亮度值。它返回 1 到 100 之间的值。

示例

在下面的示例中，我们使用 luma() 函数获取经过伽玛校正的 rgb(50, 250, 150) 颜色的亮度值。在输出中，我们可以看到它返回了 71.251% 的值。

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

输出

.demo {
   Background: 71.251%
}

亮度()函数

luminance() 函数还用于获取特定值的亮度值，但不进行伽玛校正。

示例

在这个例子中，我们使用luminance()函数来获取没有伽马校正的rgb(50,250,150)颜色的亮度值。用户可以观察相同颜色值的luma()和luminance()函数的输出值之间的差异。

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

输出

.demo {
  Background: 78.533 %
}

The above is the detailed content of What are the color channel functions in Less?. For more information, please follow other related articles on the PHP Chinese website!