デザインブログ、SOKOLABOのソコラボのソコです！
WEB制作の際、画像で作ったアイコンの色を変える時にいちいちphotoshopやillustratorで修正するのって手間がかかりますよね。
サイトカラーを変える度にアドビソフトとエディタを行ったり来たりして工数もかかります。
そんな時に単色で作った画像をCSSだけでで自由に変更できる便利なテクニックをお伝えしますね★
単色で作ったアイコンをCSSだけで変更するやり方
まずは黒色(#000000)で作ったアイコンをサイトに実装します。
例えばよくあるようなこんなやつ。
ここではCSSをいじって下記のような感じに青くしてみます
コードはこんな感じ
See the Pen CSS色変え by soko (@soko2021) on CodePen.
解説していきますね！
使うプロパティはシンプル！「filter」のみ！
プロパティはいたってシンプル「filter」だけ。
filterの色相や彩度、明度などを変更できる機能をフル活用して画像の色を変更します。
もう一度CSSを出しますね。
filter: invert(70%) sepia(80%) saturate(2800%) hue-rotate(170deg) brightness(105%);
これを日本語に直すと
filter:
invert (階調)
sepia(セピア)
saturate(彩度)
hue-rotate(色相)
brightness(明度)
日本語に直せばフォトショを使っている人には馴染み深い単語ばかりですよね！
では順々にいってみましょう！
【１】invertで階調を変更して灰色にする
invert(70%)
ちなみに値を100％にすると真っ白になります。
【2】sepiaで画像に色をつける
sepia(25%)
ほのかに色がつきました。
セピアの色が赤くなる性質を利用して無彩色の画像に色を付けています。
ちなみに値を100%にすると発色の良いピンクゴールドになります。
【3】saturateで彩度をあげる
saturate(2800%)
ここで発色の度合いを調整します。
限界突破なパーセンテージにしてめちゃめちゃ色がつきました。
値を低くするほどダルトーンのようなマットな仕上がりになります。
【5】hue-rotateで色を変える
hue-rotate(170deg)
この値を変えて赤、青、黄色、緑と色を変更していきます。
【6】brightnessで明るさを変える
brightness(115%)
最後に明るさを変更します。
今回は明度を上げて少し軽い印象に仕上げました。
完成っ！
あとがき
いかがでしょうか！
最初はパラメータが多くて難しそうな印象を受けるかもしれませんが、
慣れれば作業工数を大幅に減らせるし、実際にサイトで色合いをモニタリングしながら調整できるのでクオリティも上げやすくなると思います！
ぜひぜひ活用してくださいね★
これからもWBデザインやサイト制作周りに便利な情報をお届けしますね！
それでは！
