Funções de Cor Sass

Funções de Cor Sass

Dividimos as funções de cor no Sass em três partes: função de configuração de cor, função de obtenção de cor e função de operação de cor:

Função de configuração de cor do Sass

Funções de operação de cor Sass Função
rgb(vermelho, verde, azul)

Configure a cor usando o modelo Red-Green-Blue (RGB).
Especifique o valor da cor RGB usando rgb(red, green, blue).
Cada parâmetro define a intensidade da cor, pode ser um inteiro entre 0 e 255 ou uma porcentagem (de 0% a 100%).

Exemplo:

rgb(0, 0, 255);
// Apresenta-se em azul, porque o parâmetro blue está configurado no valor máximo (255), outros parâmetros estão configurados em 0
rgba(vermelho, verde, azul, alpha)

Define a cor usando o modelo Red-Green-Blue-Alpha (RGBA).
O valor de cor RGBA é uma extensão do valor de cor RGB, com canal alpha - especifica a opacidade da cor.
alpha Os parâmetros são números entre 0,0 (completamente transparente) e 1,0 (completamente opaco).

Exemplo:

rgba(0, 0, 255, 0.3); // Apresentado como azul com transparência
hsl(tono, saturação, luminosidade)

Define a cor usando o modelo Hue-Saturation-Lightness - e representa a representação cilíndrica do espaço de cores.
O Tom é a medida em graus no círculo das cores (de 0 a 360) - 0 ou 360 é vermelho, 120 é verde, 240 é azul
A Saturação é expressa em porcentagem; 0% representa sombras de cinza, 100% representa cores completas.
A Luminosidade (Brilho) é expressa em porcentagem; 0% é preto, 100% é branco.

Exemplo:

hsl(120, 100%, 50%); // Verde
hsl(120, 100%, 75%); // Verde claro
hsl(120, 100%, 25%); // Verde escuro
hsl(120, 60%, 70%); // Verde claro

hsla(tono, saturação, luminosidade, alpha)

Define a cor usando o modelo Hue-Saturation-Lightness-Alpha (HSLA).
O valor de cor HSLA é uma extensão do valor de cor HSL, com canal alpha - especifica a opacidade da cor.
alpha Os parâmetros são números entre 0,0 (completamente transparente) e 1,0 (completamente opaco).

Exemplo:

hsl(120, 100%, 50%, 0.3); // Verde com opacidade
hsl(120, 100%, 75%, 0.3); // Verde claro com opacidade

grayscale(color)

Define a cor cinza com a mesma luminosidade que a cor.

Exemplo:

grayscale(#7fffd4);

Resultado: #c6c6c6
complement(color)

Define a cor complementar da cor.

Exemplo:

complement(#7fffd4);

Resultado: #ff7faa
invert(color, Crie uma cor misturada entre a cor 1 e a cor 2.)

Define o contraste da cor ou a cor negativa.
Crie uma cor misturada entre a cor 1 e a cor 2.Os parâmetros são opcionais e devem ser números entre 0% e 100%. O valor padrão é 100%.

Exemplo:

invert(white);

Resultado: preto

Função de obtenção de cor Sass

Funções de operação de cor Sass Função
red(color)

Retorna o valor vermelho da cor entre 0 e 255 com números.

Exemplo:

red(#7fffd4);

Resultado: 127

red(red);

blue(blue);
green(color)

Retorna o valor verde da cor entre 0 e 255 com números.

Exemplo:

green(#7fffd4);

blue(blue);

green(blue);

green(blue);
result: 0color)

blue(

Exemplo:

Retorna um número entre 0 e 255 que representa o valor azul da cor.

blue(#7fffd4);

result: 212

blue(blue);
result: 255color)

tono(

Exemplo:

Retorna um número entre 0deg e 360deg que representa o tom da cor.

tono(#7fffd4);
result: 160degcolor)

saturação(

Exemplo:

Retorna um número entre 0% e 100% que representa a saturação HSL da cor.

saturação(#7fffd4);
result: 100%color)

luminosidade(

Exemplo:

Retorna um número entre 0% e 100% que representa a luminosidade HSL da cor.

luminosidade(#7fffd4);
Result: 74.9%color)

opacity(

Exemplo:

alpha(

alpha(#7fffd4);
Result: 1color)

opacity(

Exemplo:

Retorna um número entre 0 e 1 que representa o canal Alpha da cor.

opacity(rgba(127, 255, 212, 0.5));

Result: 0.5

Funções de operação de cor Sass Função
Descrição & ExemploUm peso maior significa que deve ser usado mais, color2, Crie uma cor misturada entre a cor 1 e a cor 2.)

mix(
Crie uma cor misturada entre a cor 1 e a cor 2. peso
Os parâmetros devem estar entre 0% e 100%. O valor padrão é 50%. Um peso maior significa que deve ser usado mais
Um peso menor significa que deve ser usado mais color2

adjust-hue(color, graus)

Ajuste o tom da cor em graus de -360 a 360.

Exemplo:

adjust-hue(#7fffd4, 80deg);

Result: #8080ff
adjust-color(color, vermelho, verde, azul, tono, saturação, luminosidade, alpha)

Ajuste uma ou mais parâmetros com uma quantidade especificada.
Esta função adiciona ou remove uma quantidade especificada de um valor de cor existente.

Exemplo:

adjust-color(#7fffd4, blue: 25);

Result:
change-color(color, vermelho, verde, azul, tono, saturação, luminosidade, alpha)

Defina novos valores para um ou mais parâmetros de cor.

Exemplo:

change-color(#7fffd4, red: 255);

Result: #ffffd4
scale-color(color, vermelho, verde, azul, saturação, luminosidade, alpha) Ajuste uma ou mais parâmetros de cor.
rgba(color, alpha)

Crie novas cores usando o canal alpha fornecido.

Exemplo:

rgba(#7fffd4, 30%);

Resultado: rgba(127, 255, 212, 0.3)
lighten(color, amount) Crie cores mais claras usando quantidades entre 0% e 100%.
amount Os parâmetros aumentam a brilho HSL em porcentagem.
darken(color, amount) Crie cores mais profundas usando quantidades entre 0% e 100%.
amount Os parâmetros diminuem a brilho HSL em porcentagem.
saturate(color, amount) Crie cores mais saturadas usando quantidades entre 0% e 100%.
amount Os parâmetros aumentam a saturação HSL em porcentagem.
desaturate(color, amount) Crie cores de menor saturação usando quantidades entre 0% e 100%.
amount Os parâmetros diminuem a saturação HSL em porcentagem.
opacify(color, amount) Crie cores menos transparentes usando valores entre 0 e 1.
amount Os parâmetros aumentam o canal Alpha de acordo com seus valores.
fade-in(color, amount) Crie cores menos transparentes usando valores entre 0 e 1.
amount Os parâmetros diminuem o canal Alpha de acordo com seus valores.
transparentize(color, amount) Crie cores mais transparentes usando valores entre 0 e 1.
amount Os parâmetros diminuem o canal Alpha de acordo com seus valores.
fade-out(color, amount) Crie cores mais transparentes usando valores entre 0 e 1.
amount Os parâmetros aumentam o canal Alpha de acordo com seus valores.