Sassの変数を使い $color: #ea2a2a; と定義したとします。

background: lighten($color, 10%);	設定されたカラーに対して明るく調整された背景色が指定されます。
background: darken($color, 10%);	設定されたカラーに対して暗く調整された背景色が指定されます。

lightenを適用してみる

• 10%
• 20%
• 30%
• 40%

darkenを適用してみる

• 10%
• 20%
• 30%
• 40%

background: saturate($color, 10%);	設定されたカラーに対して彩度を上げた背景色が指定されます。
background: desaturate($color, 10%);	設定されたカラーに対して彩度を下げた背景色が指定されます。

saturateを適用してみる

Sassの変数を使い $color: #521818; と定義したとします。

• 10%
• 20%
• 30%
• 40%

desaturateを適用してみる

Sassの変数を使い $color: #fbb4b4; と定義したとします。

• 10%
• 20%
• 30%
• 40%