MENOS - Funções do canal de cores

Neste capítulo, entenderemos a importância das funções do canal de cores no LESS. O LESS suporta algumas funções embutidas que definem o valor de um canal. O canal define o valor dependendo da definição da cor. As cores HSL possuem canal de matiz, saturação e luminosidade e as cores RGB possuem canal de vermelho, verde e azul. A tabela a seguir lista todas as funções do canal de cores -

Sr. Não. Descrição da função Exemplo
1

hue

No espaço de cores HSL, o canal de matiz é extraído do objeto de cor.

 
background: hue(hsl(75, 90%, 30%));

Compila no CSS conforme mostrado abaixo -

background: 75;
2

saturation

No espaço de cores HSL, o canal de saturação é extraído do objeto de cor.

 
background: saturation(hsl(75, 90%, 30%));

Compila no CSS conforme mostrado abaixo -

background: 90%;
3

lightness

No espaço de cores HSL, o canal de luminosidade é extraído do objeto de cor.

 
background: lightness(hsl(75, 90%, 30%));

Compila no CSS conforme mostrado abaixo -

background: 30%;
4

hsvhue

No espaço de cores HSV, o canal de matiz é extraído do objeto de cor.

 
background: hsvhue(hsv(75, 90%, 30%));

Compila no CSS conforme mostrado abaixo -

background: 75;
5

hsvsaturation

No espaço de cores HSL, o canal de saturação é extraído do objeto de cor.

 
background: hsvsaturation(hsv(75, 90%, 30%));

Compila no CSS conforme mostrado abaixo -

background: 90%;
6

hsvvalue

No espaço de cores HSL, o canal de valor é extraído do objeto de cor.

 
background: hsvvalue(hsv(75, 90%, 30%));

Compila no CSS conforme mostrado abaixo -

background: 30%;
7

red

O canal vermelho é extraído do objeto colorido.

 
background: red(rgb(5, 15, 25));

Compila no CSS conforme mostrado abaixo -

background: 5;
8

green

O canal verde é extraído do objeto colorido.

 
background: green(rgb(5, 15, 25));

Compila no CSS conforme mostrado abaixo -

background: 15;
9

blue

O canal azul é extraído do objeto colorido.

 
background: blue(rgb(5, 15, 25));

Compila no CSS conforme mostrado abaixo -

background: 25;
10

alpha

O canal alfa é extraído do objeto de cor.

 
background: alpha(rgba(5, 15, 25, 1.5));

Compila no CSS conforme mostrado abaixo -

background: 2;
11

luma

o valor luma é calculado a partir de um objeto colorido.

 
background: luma(rgb(50, 250, 150));

Compila no CSS conforme mostrado abaixo -

background: 71.2513323%;
12

luminance

O valor luma é calculado sem correção de gama.

 
background: luminance(rgb(50, 250, 150));

Compila no CSS conforme mostrado abaixo -

background: 78.53333333%;