Less - Color Defination Functions
LESS - Color Definition Functions
Section titled “LESS - Color Definition Functions”Description
Section titled “Description”LESS provides a powerful set of built-in functions for defining colors. These functions allow you to create colors using various color models like RGB, HSL, and HSV, providing flexibility in how you specify colors in your stylesheets. These are foundational for dynamic theming and consistent color palettes.
| Sr.No. | Function & Description | Example & Output |
|---|---|---|
| 1 | rgb(red, green, blue)Creates a color from Red, Green, and Blue channel values. Parameters:
| color: rgb(220, 20, 60);Output: |
| 2 | rgba(red, green, blue, alpha)Creates a color from Red, Green, Blue, and Alpha (transparency) channel values. Parameters:
| color: rgba(220, 20, 60, 0.5);Output: |
| 3 | argb(color)Creates an ARGB hexadecimal representation of a color (e.g., #AARRGGBB). Parameter:
Note: While available, direct usage of ARGB hex is less common in modern CSS than RGBA or 8-digit hex (#RRGGBBAA). | background: argb(rgba(176, 23, 31, 0.5));Output: |
| 4 | hsl(hue, saturation, lightness)Creates a color from Hue, Saturation, and Lightness values. Parameters:
| color: hsl(120, 100%, 50%);Output: |
| 5 | hsla(hue, saturation, lightness, alpha)Creates a color from Hue, Saturation, Lightness, and Alpha values. Parameters:
| color: hsla(0, 100%, 50%, 0.5);Output: |
| 6 | hsv(hue, saturation, value)Creates a color from Hue, Saturation, and Value (Brightness) values. Parameters:
| color: hsv(80, 90%, 70%);Output: |
| 7 | hsva(hue, saturation, value, alpha)Creates a color from Hue, Saturation, Value, and Alpha values. Parameters:
| color: hsva(80, 90%, 70%, 0.6);Output: |
These definition functions are often used in conjunction with LESS Color Operation Functions (e.g., lighten(), darken(), saturate()) to create dynamic and harmonious color schemes.