WEB制作者向け無料テーマ「Arkhe」をリリースしました

SCSSで明度・彩度・色相・透明度などをコントロールできるカラー関数一覧

Sass(SCSS)でカラーの明度・彩度・色相・透明度などを%指定で変更できるカラー関数について、どんな種類があるのかをまとめてみました。

ちなみに、この「カラー関数」、英語サイトで「color function」と表記されていたので勝手にそう読んでいますが、公式の呼び方はわからないです。笑

 

//明度
lighten($color, 15%);
darken($color, 15%);

//彩度
saturate($color, 15%);
desaturate($color, 15%);

//色相
adjust-hue($color, 50deg);

//透明度・不透明度
transparentize( $color, 0.8 );
rgba( $color, 0.2 );

//白/黒とミックスさせる? (明度とだいたい同じ)
tint($color, 15%);
shade($color, 15%);

こちらのサイトでそれぞれ詳しいことが説明されています。(英語のサイトです)

また、どのように色が変化しているかを実際に見ながら調節できる、「Sass Color Generator」というすごく便利なwebサービスもありますので、このようなサイトも活用するといいかもしれません!

 

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次