Color

L'objet color apporte un ensemble de méthodes qui permettent de modifier les couleurs.

Définitioncolor.adjust

Cette fonction ajuste les composants d'une couleur de manière relative, en modifiant leur valeur actuelle d'une quantité donnée.

Plusieurs options de modification sont offertes.

1
color.adjust($color, $red: <value>, $green: <value>, $blue: <value>, $hue: <value>, $saturation: <value>, $lightness: <value>, $alpha: <value>)

Exemple :

1
p {
2
  color: color.adjust(#ff0000, $green: 50); // Ajoute 50 à la composante verte
3
}

Ce qui donne :

1
p {
2
  color: #ff3200; // La valeu verte augmente de 32 (50 decimal -> 32 hexa) rouge et bleue inchangées
3
}

Définitioncolor.scale

Cette fonction augmente ou réduit un composant proportionnellement, en modifiant à l'aide d'un pourcentage.

1
color.scale($color, $red: <percentage>, $green: <percentage>, $blue: <percentage>, $saturation: <percentage>, $lightness: <percentage>, $alpha: <percentage>)

Exemple :

1
p {
2
  color: color.scale(#00aaff, $red: 50%, $green: 10%, $blue: -50%);
3
}

Ce qui donne :

1
p {
2
  color: rgb(127.5, 195.5, 127.5);
3
  // 50% en plus de 00 -> 127.5, 10% en plus de aa -> 195.5, 50% en moins de ff -> 127.5
4
}

Définitioncolor.change

Cette fonction remplace les valeurs.

1
color.change($color, $red: <value>, $green: <value>, $blue: <value>, $hue: <value>, $saturation: <value>, $lightness: <value>, $alpha: <value>)

Exemple :

1
p {
2
  color: color.change(#00aaff, $red: 255);
3
}

Ce qui donne :

1
p {
2
  color: #ffaaff;
3
}

DéfinitionRemplacement des anciennes fonctions

Dans sass, il existait des fonctions pour gérer la couleur. Dans la dernière version, elles sont remplacées par les méthodes précédentes.

Diminuer proportionnellement la luminosité :

1
darken($color, $val) // $val pourcentage
1
color.scale($color, $lightness: -$val)

Augmenter proportionnellement la luminosité :

1
lighten($color, $val) // $val pourcentage
1
color.scale($color, $lightness: $val)

Augmenter proportionnellement la saturation :

1
saturate($color, $val) // $val pourcentage
1
color.scale($color, $saturation: $val)

Diminuer proportionnellement la saturation :

1
desaturate($color, $val) // $val pourcentage
1
color.scale($color, $saturation: -$val)

Décaler la teinte de 180° pour obtenir la couleur complémentaire.

1
complement($color)
1
color.adjust($color, $hue: 180deg)

Augmenter proportionnellement l’opacité (alpha).

1
fade-in($color, $val) // $val poucentage
1
color.scale($color, $alpha: $val)

Diminuer proportionnellement l’opacité (alpha).

1
fade-out($color, $val) // $val poucentage
1
color.scale($color, $alpha: -$val)

Mélanger deux couleurs :

1
mix($color1, $color2, $val) // $val pourcentage de $color1 dans le mélange
1
color.mix($color1, $color2, $val)

Convertir une couleur en nuances de gris :

1
grayscale($color)
1
color.grayscale($color)

Inverser les composants d'une couleur pour obtenir son opposé :

1
invert($color)
1
color.invert($color)