RCC (立命館コンピュータークラブ)Advent Calendar 2024

scss・css探検隊 ~color編~

Posted at 2024-12-25

導入

UIデザイナーを目指して修行するために、いろんなライブラリやscss, cssを知っておく必要があると考えたので、いろいろ調べてアウトプットしていこうという企画です。できたら毎日1つ紹介していきたいなぁと思います

だと思ってきました

cssのcolorって、だれでも使うし当たり前のように

color:red

だとか

color:linear-gradient(90deg, #5BC7F9 0%, #FF6FEC 50%, #FF537B 100%);

とかって書いてきたはずです。いまさらcolorなんか勉強して何になるんだよと思いましたが、ちゃんと調べてみると色々おもしろいな、勉強しておくべきだなと思った部分がいくつもありましたので、今回は、scss内で使える便利なcolorの操作関数を紹介します

色を混ぜられるやつです。

mix(color1, color2, weight):2つの色を混ぜ合わせる

のようにして呼び出します。

普通に

color: mix(blue, red, 50%);  /* 紫になる */

とか単純に色を混ぜるのにも使えるのはもちろん、特に便利だなと思ったのが

color: mix(yellow, white, 5%);

のようにして白黒を混ぜたいときには本当に便利です！

後々紹介するlightenやdarkenでも代替可能ではありますが、色味が気に入らないことが多く、デザインかじってる身からするとほんとにありがたいです。

他にも、現在使ってる2,3色の色味から似てる色を引っ張ってくるときに疑似カラーパレットとしても使えます。個人的にかなりお気に入りです。

先ほどチラっと述べたlightenとdarken関数です。

lighten(color, amount): 色を明るくする
darken(color, amount): 色を暗くする

のようにして呼び出します。

例としては、

color: lighten(#ff0000, 20%);  /* 20%明るい赤 */
color: darken(#ff0000, 20%);   /* 20%暗い赤 */

のようにして使います。

これを使えば爆速でhoverとかonClickのスタイルを作れます！
いつもだと

カラーパレット開いて
→基準の色から少し上(下)げた色味のカラーコードを出す
→貼り付け
→これを全Varient分繰り返し

とかいう本当に頭の悪い書き方をしなければなりませんでしたが、これを使えば

基準色決める
→相対値で明る(暗)くする
→コピペで基準職だけ変えれば楽々Varient作成

というスタイリッシュムーブに早変わり。
もう直でカラーコード指定するのはやめましょう。

明度調整の他にも、lighten関数らと同じように書けて便利なものがいくつかあります。

彩度(鮮やかさ)調整に使えるsaturate, desaturate関数

saturate(color, amount): 彩度を上げる
desaturate(color, amount): 彩度を下げる

透明度調整に使えるtransparentize, opacify関数

color: transparentize(#ff0000, 0.3);  /* 30%透明に */
color: opacify(#ff0000, 0.3);         /* 30%不透明に */

これめっちゃ使えます
オーバーレイで使ったり、背景の枠で使ったり、いちいちalphaを設定しなくてもこれ一つでできます。押せないボタンのUIとかにもいいんじゃないでしょうか。

実用性はあるかわからないけど、軽い画像処理的なものもできます。

grayscaleでグレースケール化

color: grayscale(#ff0000);

補色を出せるcomplement関数

color: complement(#ff0000);

反転色を出せるinvert関数

color: invert(#ff0000);

うーん、実用性はほぼないでしょう。そもそもデザインする人ならみなさんカラーパレットは使ってると思うので、これで反対色とかは出せるしなぁ...(笑)
まぁ小ネタ程度に知っておくのも悪くないんじゃないでしょうか。