Sample List

Sassを用いたカラー調整

明るくするlighten / 暗くするdarken

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

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

lightenを適用してみる

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

darkenを適用してみる

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

彩度を上げるsaturate / 彩度を下げるdesaturate

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

saturateを適用してみる

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

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

desaturateを適用してみる

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

  • 10%
  • 20%
  • 30%
  • 40%
一覧に戻る