SCSSで色を便利に調整する方法を共有します。
SCSSで色を調整する
【基礎】色を変数で指定する
$main-color: #376db0;こちらで、scssファイル内で$main-colorを使用すれば、便利です。
明度調節
輝度を上げる
color: lighten( $main-color, 15% );
輝度を下げる
color: darken( $main-color, 15% );
彩度の調節
彩度を上げる
color: saturate( $main-color, 15% );
彩度を下げる
color: desaturate( $main-color, 15% );
透明度の調節
50%透明度を下げる
color: transparentize( $main-color, 0.5 );もしくは
color: rgba( $main-color, 0.5 );
色相の変更
color: adjust-hue($main-color, 60deg);
色の反転
color: invert($main-color);
グレースケールに変更
color: grayscale($main-color);
色相の補色(色相環の反対色)に変更
color: complement($main-color);
2つのカラーコードの中間色
color: mix(#fff, #000);
以上です。
