LESS - Color Defination Functions

Description

LESS provides number of useful color functions to alter and manipulate colors in different ways. LESS supports some of the Color Definition Functions as shown in the table below −

Sr.No. Function & Description Example
1

rgb

It creates color from red, green and blue values. It has following parameters −

  • red − It contains integer between 0 - 255 or percentage between 0 - 100%.

  • green − It contains integer between 0 - 255 or percentage between 0 - 100%.

  • blue − It contains integer between 0 - 255 or percentage between 0 - 100%.

 
rgb(220,20,60)

it converts color with rgb values as −

#dc143c
2

rgba

It determines color from red, green, blue and alpha values. It has the following parameters −

  • red − It contains integer between 0 - 255 or percentage between 0 - 100%.

  • green − It contains integer between 0 - 255 or percentage between 0 - 100%.

  • blue − It contains integer between 0 - 255 or percentage between 0 - 100%.

  • alpha − It contains number between 0 - 1 or percentage between 0 - 100%.

 
rgba(220,20,60, 0.5)

it converts color object with rgba values as −

rgba(220, 20, 60, 0.5)
3

argb

It defines hex representation of color in #AARRGGBB format. It uses the following parameter −

  • color − It specifies color object.

 
argb(rgba(176,23,31,0.5))

it returns the argb color as −

#80b0171f
4

hsl

It generates the color from hue, saturation and lightness values. It has following parameters −

  • hue − It contains integer between 0 - 360 which represents degrees.

  • saturation − It contains number between 0 - 1 or percentage between 0 - 100%.

  • lightness − It contains number between 0 - 1 or percentage between 0 - 100%.

 
hsl(120,100%, 50%)

it returns the color object using HSL values as −

#00ff00
5

hsla

It generates the color from hue, saturation, lightness and alpha values. It has the following parameters −

  • hue − It contains integer between 0 - 360 which represents degrees.

  • saturation − It contains number between 0 - 1 or percentage between 0 - 100%.

  • lightness − It contains number between 0 - 1 or percentage between 0 - 100%.

  • alpha − It contains number between 0 - 1 or percentage between 0 - 100%.

 
hsla(0,100%,50%,0.5)

it specifies the color object using HSLA values as −

rgba(255, 0, 0, 0.5);
6

hsv

It produces the color from hue, saturation and value values. It contains following parameters −

  • hue − It contains integer between 0 - 360 which represents degrees.

  • saturation − It contains number between 0 - 1 or percentage between 0 - 100%.

  • value − It contains number between 0 - 1 or percentage between 0 - 100%.

 
hsv(80,90%,70%)

it converts color object with hsv values as −

#7db312
7

hsva

It produces the color from hue, saturation, value and alpha values. It uses the following parameters −

  • hue − It contains integer between 0 - 360 which represents degrees.

  • saturation − It contains number between 0 - 1 or percentage between 0 - 100%.

  • value − It contains number between 0 - 1 or percentage between 0 - 100%.

  • alpha − It contains number between 0 - 1 or percentage between 0 - 100%.

 
hsva(80,90%,70%,0.6)

it specifies color object with hsva values as −

rgba(125, 179, 18, 0.6)
Advertisements