Fonctions de couleur Sass

Fonctions de couleur Sass

Nous divisons les fonctions de couleur dans Sass en trois parties : fonctions de définition de couleur, fonctions d'obtention de couleur et fonctions d'opération de couleur :

Fonction de couleur Sass

Fonctions d'opérations de couleur Sass Fonction
rgb(rouge, vert, bleu)

Définir la couleur en utilisant le modèle Red-Green-Blue (RGB).
Définir la valeur de la couleur RGB par l'intermédiaire de rgb(red, green, blue).
Chaque paramètre définit l'intensité de la couleur, qui peut être un entier compris entre 0 et 255, ou une valeur en pourcentage (de 0% à 100%).

Exemple :

rgb(0, 0, 255);
// Affiché en bleu, car le paramètre blue est réglé sur sa valeur maximale (255), tandis que les autres paramètres sont définis sur 0
rgba(rouge, vert, bleu, alpha)

Définir la couleur en utilisant le modèle Red-Green-Blue-Alpha (RGBA).
La valeur de couleur RGBA est une extension de la valeur de couleur RGB, avec un canal alpha - qui spécifie l'opacité de la couleur.
alpha Le paramètre est un nombre entre 0,0 (complètement transparent) et 1,0 (complètement opaque).

Exemple :

rgba(0, 0, 255, 0.3); // Bleu transparent
hsl(teinte, saturation, luminosité)

Définir la couleur en utilisant le modèle Hue-Saturation-Lightness - et représente la représentation cylindrique des couleurs.
L' teinte (teinte) est un degré sur la roue des couleurs (de 0 à 360) - 0 ou 360 est rouge, 120 est vert, 240 est bleu
La saturation (saturation) est une valeur en pourcentage ; 0% représente une teinte grise, 100% représente une pleine couleur.
La luminosité (luminosité) est une valeur en pourcentage ; 0% est noir, 100% est blanc.

Exemple :

hsl(120, 100%, 50%); // Vert
hsl(120, 100%, 75%); // Vert pâle
hsl(120, 100%, 25%); // Vert foncé
hsl(120, 60%, 70%); // Vert pâle

hsla(teinte, saturation, luminosité, alpha)

Définir la couleur en utilisant le modèle Hue-Saturation-Lightness-Alpha (HSLA).
La valeur de couleur HSLA est une extension de la valeur de couleur HSL, avec un canal alpha - qui spécifie l'opacité de la couleur.
alpha Le paramètre est un nombre entre 0,0 (complètement transparent) et 1,0 (complètement opaque).

Exemple :

hsl(120, 100%, 50%, 0.3); // Vert avec transparence
hsl(120, 100%, 75%, 0.3); // Vert pâle avec transparence

grayscale(color)

Définir une teinte grise ayant la même luminosité que la couleur.

Exemple :

grayscale(#7fffd4);

Résultat : #c6c6c6
complement(color)

Définir la couleur complémentaire.

Exemple :

complement(#7fffd4);

Résultat : #ff7faa
invert(color, Créer une couleur mélangée de couleur 1 et couleur 2.)

Définir la couleur inverse ou négative.
Créer une couleur mélangée de couleur 1 et couleur 2.Le paramètre est optionnel et doit être un nombre entre 0% et 100%.

Exemple :

invert(white);

Résultat : noir

Fonction de récupération de la couleur Sass

Fonctions d'opérations de couleur Sass Fonction
red(color)

Renvoie la valeur rouge de la couleur entre 0 et 255 en tant que nombre.

Exemple :

red(#7fffd4);

Résultat : 127

red(red);

结果：255
green(color)

Renvoie la valeur verte de la couleur entre 0 et 255 en tant que nombre.

Exemple :

green(#7fffd4);

结果：255

green(blue);

结果：0
blue(color)

以 0 到 255 之间的数字返回颜色的蓝色值。

Exemple :

blue(#7fffd4);

结果：212

blue(blue);

结果：255
hue(color)

以 0deg 到 360deg 之间的数字形式返回颜色的色调。

Exemple :

hue(#7fffd4);

结果：160deg
saturation(color)

以 0% 到 100% 之间的数字形式返回颜色的 HSL 饱和度。

Exemple :

saturation(#7fffd4);

结果：100%
lightness(color)

以 0% 到 100% 之间的数字形式返回颜色的 HSL 亮度。

Exemple :

lightness(#7fffd4);

luminosité(#7fffd4);
Résultat: 74.9%color)

opacity(

Exemple :

alpha(

alpha(#7fffd4);
Résultat: 1color)

opacity(

Exemple :

Retourner un nombre entre 0 et 1 qui représente le canal alpha de la couleur.

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

Résultat: 0.5

Fonctions d'opérations de couleur Sass Fonction
Description et exempleUn poids plus grand signifie qu'il devrait être utilisé plus de, color2, Créer une couleur mélangée de couleur 1 et couleur 2.)

mix(
Créer une couleur mélangée de couleur 1 et couleur 2. poids
Les paramètres doivent être compris entre 0% et 100%. La valeur par défaut est de 50%. Un poids plus grand signifie qu'il devrait être utilisé plus de.
Une poids plus petit signifie qu'il devrait être utilisé plus de color2.

adjust-hue(color, degrés)

Ajuster la teinte de la couleur en degrés de -360 à 360.

Exemple :

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

Résultat: #8080ff
adjust-color(color, rouge, vert, bleu, teinte, saturation, luminosité, alpha)

Ajuster une ou plusieurs valeurs en quantité spécifiée.
Cette fonction ajoute ou soustrait une quantité spécifiée aux valeurs de couleur existantes.

Exemple :

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

Résultat:
change-color(color, rouge, vert, bleu, teinte, saturation, luminosité, alpha)

Modifier un ou plusieurs paramètres de couleur en valeur nouvelle.

Exemple :

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

Résultat: #ffffd4
scale-color(color, rouge, vert, bleu, saturation, luminosité, alpha) Ajuster une ou plusieurs valeurs de couleur.
rgba(color, alpha)

Créer une nouvelle couleur en utilisant le canal alpha fourni.

Exemple :

rgba(#7fffd4, 30%);

Résultat : rgba(127, 255, 212, 0.3)
lighten(color, amount) Créez des couleurs plus claires en utilisant des quantités comprises entre 0% et 100%.
amount Les paramètres augmentent la luminosité HSL en pourcentage.
darken(color, amount) Créez des couleurs plus foncées en utilisant des quantités comprises entre 0% et 100%.
amount Les paramètres diminuent la luminosité HSL en pourcentage.
saturate(color, amount) Créez des couleurs plus saturées en utilisant des quantités comprises entre 0% et 100%.
amount Les paramètres augmentent la saturation HSL en pourcentage.
desaturate(color, amount) Créez des couleurs moins saturées en utilisant des quantités comprises entre 0% et 100%.
amount Les paramètres diminuent la saturation HSL en pourcentage.
opacify(color, amount) Créez des couleurs moins opaques en utilisant des quantités comprises entre 0 et 1.
amount Les paramètres augmentent le canal Alpha selon leur valeur.
fade-in(color, amount) Créez des couleurs moins opaques en utilisant des quantités comprises entre 0 et 1.
amount Les paramètres diminuent le canal Alpha selon leur valeur.
transparentize(color, amount) Créez des couleurs plus transparentes en utilisant des quantités comprises entre 0 et 1.
amount Les paramètres diminuent le canal Alpha selon leur valeur.
fade-out(color, amount) Créez des couleurs plus transparentes en utilisant des quantités comprises entre 0 et 1.
amount Les paramètres augmentent le canal Alpha selon leur valeur.