64
Less Color Channel Functions
Less color channel functions are the built-in functions which are used to set value about a channel. The channel sets the value according to the color definition. The HSL colors consist of hue, saturation and lightness channel and the RGB colors consist of red, green and blue channel.
A list of color channel functions:
| Index | Function | Description | Example |
|---|---|---|---|
| 1) | hue | In hsl color space, the hue channel is extracted of the color object. | background: hue(hsl(80, 90%, 40%)); it compiles in the CSS to show only hue value as: background: 80; |
| 2) | saturation | In hsl color space, the saturation channel is extracted of the color object. | background: saturation(hsl(80, 90%, 40%)); it compiles in the CSS to show only saturation value as: background: 90%; |
| 3) | lightness | In hsl color space, the lightness channel is extracted of the color object. | background: lightness(hsl(80, 90%, 40%)); it compiles in the CSS to show only lightness value as: background: 30%; |
| 4) | hsvhue | In hsv color space, the hue channel is extracted of the color object. | background: hsvhue(hsv(80, 90%, 40%)); it compiles in the CSS to show hue value as: background: 80; |
| 5) | hsvsaturation | In hsl color space, the saturation channel is extracted of the color object. | background: hsvsaturation(hsv(80, 90%, 40%)); it compiles in the CSS to show only saturation value as: background: 90%; |
| 6) | hsvvalue | In hsl color space, the value channel is extracted of the color object. | background: hsvvalue(hsv(80, 90%, 40%)); it compiles in the CSS to show value as: background: 40%; |
| 7) | red | The red channel is extracted of the color object. | background: red(rgb(10, 20, 30)); it compiles in the CSS to show only red value: background: 10; |
| 8) | green | The green channel is extracted of the color object. | background: green(rgb(10, 20, 30)); it compiles in the CSS as shown below: background: 20; |
| 9) | blue | The blue channel is extracted of the color object. | background: blue(rgb(10, 20, 30)); it compiles in the CSS to show only blue value: background: 30; |
| 10) | alpha | The alpha channel is extracted of the color object. | background: alpha(rgba(5, 15, 25, 1.5)); it compiles in the CSS to show alpha value as: background: 2; |
| 11) | luma | luma value is calculated of a color object. | background: luma(rgb(50, 250, 150)); it compiles in the CSS to show luma value as: background: 71.2513323%; |
| 12) | luminance | The luma value is calculated without gamma correction. | background: luminance(rgb(50, 250, 150)); it compiles in the CSS as shown below: background: 78.53333333%; |
Next TopicLess hue()