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サービスもありますので、このようなサイトも活用するといいかもしれません!

 

目次
- Thank you for reading. -

あなたの1クリックが励みになります\( ̄ー ̄)/

コメント

コメントする

CAPTCHA


TOPへ Top