前回の SCSS でのカラー管理 に引き続き、比較的利用頻度の高いカラー操作についてのメモとなります。
配列で管理されたカラーのバリエーション作成時等に活用できれば、大幅なコストダウンにつながるかと思います。
INDEX
目次
- 利用頻度の高いカラー操作の一覧
- まとめ
利用頻度の高いカラー操作の一覧
指定色の明度を上げる（10% 明るく）
[code]
lighten($color, 10%);
[/code]
指定色の明度を下げる（10% 暗く）
[code]
darken($color, 10%);
[/code]
指定色の彩度を上げる（10% 彩度を上げる）
[code]
saturate($color, 10%);
[/code]
指定色の彩度を下げる（10% 彩度を下げる）
[code]
desaturate($color, 10%);
[/code]
指定色をグレースケールに変換
[code]
grayscale($color);
[/code]
指定色の補色を返す
[code]
complement($color);
[/code]
指定色を反転
[code]
invert($color);
[/code]
まとめ
補色を返す、指定色を反転は、色彩をプログラマブルに操作したい場合を除き利用頻度は低いですが、明るく・暗く、彩度、グレースケール変換はボタンデザインで活躍するかと思います。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
