Less - Color Channel Functions
LESS - Color Channel Functions
Section titled “LESS - Color Channel Functions”LESS provides a suite of built-in functions to extract and manipulate individual channels of a color. These functions operate on color objects and return numerical values or percentages representing a specific component of the color, such as its hue, saturation, lightness, red, green, blue, or alpha transparency. This allows for precise color adjustments and the creation of dynamic color schemes.
These functions are invaluable for creating themes, adjusting colors programmatically, or ensuring color contrast and accessibility. They primarily work with HSL (Hue, Saturation, Lightness), HSV (Hue, Saturation, Value), and RGB (Red, Green, Blue) color models, including alpha channels (RGBA, HSLA).
Below is a list of common color channel functions in LESS:
| Sr.No. | Function | Description | Example (LESS code showing extraction and usage) |
|---|---|---|---|
| 1 | hue(color) | Extracts the hue channel of a color in the HSL color space. Returns a unitless number between 0 and 360. | // LESS @my-color: hsl(90, 75%, 50%); @extracted-hue: hue(@my-color); // @extracted-hue is 90 .example { // Usage: create a new color with the extracted hue border-color: hsl(@extracted-hue, 100%, 30%); // hsl(90, 100%, 30%) } |
| 2 | saturation(color) | Extracts the saturation channel of a color in the HSL color space. Returns a percentage value (0% to 100%). | // LESS @my-color: hsl(90, 75%, 50%); @extracted-saturation: saturation(@my-color); // @extracted-saturation is 75% .example { background-color: hsla(120, @extracted-saturation, 60%, 0.5); } |
| 3 | lightness(color) | Extracts the lightness channel of a color in the HSL color space. Returns a percentage value (0% to 100%). | // LESS @my-color: hsl(90, 75%, 50%); @extracted-lightness: lightness(@my-color); // @extracted-lightness is 50% .example { color: hsl(240, 50%, @extracted-lightness); } |
| 4 | hsvhue(color) | Extracts the hue channel of a color in the HSV color space. Returns a unitless number between 0 and 360. | // LESS @my-color: hsv(120, 100%, 100%); // Pure green in HSV @hsv-h: hsvhue(@my-color); // @hsv-h is 120 .example { color: hsv(@hsv-h, 80%, 90%); } |
| 5 | hsvsaturation(color) | Extracts the saturation channel of a color in the HSV color space. Returns a percentage value (0% to 100%). | // LESS @my-color: hsv(120, 100%, 100%); @hsv-s: hsvsaturation(@my-color); // @hsv-s is 100% .example { color: hsv(150, @hsv-s, 70%); } |
| 6 | hsvvalue(color) | Extracts the value (brightness) channel of a color in the HSV color space. Returns a percentage value (0% to 100%). | // LESS @my-color: hsv(120, 100%, 100%); @hsv-v: hsvvalue(@my-color); // @hsv-v is 100% .example { color: hsv(180, 90%, @hsv-v); } |
| 7 | red(color) | Extracts the red channel of a color in the RGB color space. Returns a number between 0 and 255. | // LESS @my-color: rgb(255, 128, 0); // Orange @red-component: red(@my-color); // @red-component is 255 .example { border-left-color: rgb(@red-component, 100, 50); } |
| 8 | green(color) | Extracts the green channel of a color in the RGB color space. Returns a number between 0 and 255. | // LESS @my-color: rgb(255, 128, 0); @green-component: green(@my-color); // @green-component is 128 .example { border-top-color: rgb(100, @green-component, 50); } |
| 9 | blue(color) | Extracts the blue channel of a color in the RGB color space. Returns a number between 0 and 255. | // LESS @my-color: rgb(255, 128, 0); @blue-component: blue(@my-color); // @blue-component is 0 .example { border-right-color: rgb(100, 50, @blue-component + 100); // rgb(100,50,100) } |
| 10 | alpha(color) | Extracts the alpha (transparency) channel of a color. Returns a number between 0 (fully transparent) and 1 (fully opaque). | // LESS @my-color: rgba(0, 0, 255, 0.5); // Semi-transparent blue @alpha-value: alpha(@my-color); // @alpha-value is 0.5 .example { background-color: rgba(255, 0, 0, @alpha-value - 0.2); // rgba(255,0,0,0.3) } |
| 11 | luma(color) | Calculates the luma (perceived brightness) of a color using a weighted average of RGB components, typically with gamma correction. Returns a percentage (0% to 100%). Useful for determining text color contrast. | // LESS @dark-bg: #333333; @light-bg: #eeeeee; @luma-dark: luma(@dark-bg); // e.g., approx 12.9% @luma-light: luma(@light-bg); // e.g., approx 87.7% .example { // Use luma to decide text color (conceptual) color: if((luma(@dark-bg) < 50%), white, black); } |
| 12 | luminance(color) | Calculates the relative luminance of a color, similar to luma but typically refers to the Y component in the XYZ color space (without gamma correction, or assuming linear RGB). Returns a percentage (0% to 100%). Often used in accessibility calculations for contrast ratios. | // LESS @my-color: #00FF00; // Pure Green @lum: luminance(@my-color); // e.g., approx 71.5% .example { // Generally used in more complex contrast calculations // —debug-luminance: unit(@lum,); } |
These functions, combined with other color manipulation functions like lighten(), darken(), saturate(), desaturate(), spin(), and mix(), give developers fine-grained control over colors in LESS, enabling sophisticated and dynamic styling.