Funzioni di colore Sass

Funzioni di colore Sass

Dividiamo le funzioni di colore in Sass in tre parti: funzioni di impostazione del colore, funzioni di lettura del colore e funzioni di operazione del colore:

Funzione di impostazione del colore Sass

Funzioni di operazione sui colori Sass Funzione
rgb(red, green, blue)

Impostare il colore utilizzando il modello Red-Green-Blue (RGB).
Specificare il valore del colore RGB tramite rgb(red, green, blue).
Ogni parametro definisce l'intensità del colore, può essere un intero tra 0 e 255 o una percentuale (da 0% a 100%).

Esempio:

rgb(0, 0, 255);
// Il colore è rappresentato in blu, perché il parametro blue è impostato al valore massimo (255), mentre gli altri parametri sono impostati a 0
rgba(red, green, blue, alpha)

Imposta il colore utilizzando il modello Red-Green-Blue-Alpha (RGBA).
Il valore di colore RGBA è un'estensione del valore di colore RGB, con un canale alpha - che specifica l'opacità del colore.
alpha Il parametro è un numero tra 0.0 (completamente trasparente) e 1.0 (completamente opaco).

Esempio:

rgba(0, 0, 255, 0.3); // Blu con opacità
hsl(hue, saturation, lightness)

Imposta il colore utilizzando il modello Hue-Saturation-Lightness - e rappresenta la rappresentazione cilindrica delle coordinate del colore.
L'intero (Hue) è un angolo sul cerchio delle colori (da 0 a 360) - 0 o 360 sono rosso, 120 sono verde, 240 sono blu
La saturazione (Saturation) è una percentuale; 0% rappresenta un ombreggiatura grigia, 100% rappresenta un colore pieno.
La luminosità (Lightness) è una percentuale; 0% è nero, 100% è bianco.

Esempio:

hsl(120, 100%, 50%); // Verde
hsl(120, 100%, 75%); // Verde chiaro
hsl(120, 100%, 25%); // Verde scuro
hsl(120, 60%, 70%); // Verde chiaro

hsla(hue, saturation, lightness, alpha)

Imposta il colore utilizzando il modello Hue-Saturation-Lightness-Alpha (HSLA).
Il valore di colore HSLA è un'estensione del valore di colore HSL, con un canale alpha - che specifica l'opacità del colore.
alpha Il parametro è un numero tra 0.0 (completamente trasparente) e 1.0 (completamente opaco).

Esempio:

hsl(120, 100%, 50%, 0.3); // Verde con opacità
hsl(120, 100%, 75%, 0.3); // Verde chiaro con opacità

grayscale(color)

Imposta una tonalità di grigio con la stessa luminosità del colore.

Esempio:

grayscale(#7fffd4);

Risultato: #c6c6c6
complement(color)

Imposta il colore complementare.

Esempio:

complement(#7fffd4);

Risultato: #ff7faa
invert(color, Crea un colore misto tra il colore 1 e il colore 2.)

Imposta il colore inverso o negativo.
Crea un colore misto tra il colore 1 e il colore 2.Il parametro è opzionale e deve essere un numero tra 0% e 100%. Il valore predefinito è 100%.

Esempio:

invert(white);

Risultato: nero

Funzione di recupero del colore Sass

Funzioni di operazione sui colori Sass Funzione
red(color)

Restituisce il valore rosso del colore con un numero tra 0 e 255.

Esempio:

red(#7fffd4);

Risultato: 127

red(red);

blue(blue);
green(color)

Restituisce il valore verde del colore con un numero tra 0 e 255.

Esempio:

green(#7fffd4);

blue(blue);

green(blue);

green(blue);
Risultato: 0color)

blue(

Esempio:

Restituisce un numero tra 0 e 255 che rappresenta il valore blu del colore.

blue(#7fffd4);

Risultato: 212

blue(blue);
Risultato: 255color)

hue(

Esempio:

Restituisce un numero tra 0deg e 360deg che rappresenta la tonalità del colore.

hue(#7fffd4);
Risultato: 160degcolor)

saturation(

Esempio:

Restituisce un numero tra 0% e 100% che rappresenta la saturazione HSL del colore.

saturation(#7fffd4);
Risultato: 100%color)

lightness(

Esempio:

Restituisce un numero tra 0% e 100% che rappresenta la luminosità HSL del colore.

lightness(#7fffd4);
Risultato: 74.9%color)

opacity(

Esempio:

alpha(

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

opacity(

Esempio:

Restituisce un numero tra 0 e 1 che rappresenta il canale alpha del colore.

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

Risultato: 0.5

Funzioni di operazione sui colori Sass Funzione
Descrizione & EsempioUn peso maggiore significa che dovrebbe essere utilizzato più, color2, Crea un colore misto tra il colore 1 e il colore 2.)

mix(
Crea un colore misto tra il colore 1 e il colore 2. weight
I parametri devono essere tra il 0% e il 100%. Il valore predefinito è 50%. Un peso maggiore significa che dovrebbe essere utilizzato più。
Un peso minore significa che dovrebbe essere utilizzato più color2。

adjust-hue(color, gradi)

Regola la tonalità del colore in gradi da -360 a 360.

Esempio:

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

Risultato: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)

Regola uno o più parametri di colore di una quantità specificata.
Questa funzione aggiunge o sottrae la quantità specificata ai valori di colore esistenti.

Esempio:

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

Risultato:
change-color(color, red, green, blue, hue, saturation, lightness, alpha)

Imposta uno o più parametri di colore su nuovi valori.

Esempio:

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

Risultato: #ffffd4
scale-color(color, red, green, blue, saturation, lightness, alpha) Scala uno o più parametri di colore.
rgba(color, alpha)

Crea un nuovo colore utilizzando il canale alpha fornito.

Esempio:

rgba(#7fffd4, 30%);

Risultato: rgba(127, 255, 212, 0.3)
lighten(color, amount) Creare colori più chiari utilizzando quantità tra 0% e 100%.
amount I parametri aumentano la luminosità HSL in percentuale.
darken(color, amount) Creare colori più scuri utilizzando quantità tra 0% e 100%.
amount I parametri riducono la luminosità HSL in percentuale.
saturate(color, amount) Creare colori più saturi utilizzando quantità tra 0% e 100%.
amount I parametri aumentano la saturazione HSL in percentuale.
desaturate(color, amount) Creare colori con una saturazione inferiore utilizzando quantità tra 0% e 100%.
amount I parametri riducono la saturazione HSL in percentuale.
opacify(color, amount) Creare colori meno opachi utilizzando numeri tra 0 e 1.
amount I parametri aumentano il canale Alpha in base al loro valore.
fade-in(color, amount) Creare colori meno opachi utilizzando numeri tra 0 e 1.
amount I parametri riducono il canale Alpha in base al loro valore.
transparentize(color, amount) Creare colori più trasparenti utilizzando numeri tra 0 e 1.
amount I parametri riducono il canale Alpha in base al loro valore.
fade-out(color, amount) Creare colori più trasparenti utilizzando numeri tra 0 e 1.
amount I parametri aumentano il canale Alpha in base al loro valore.