CSSフィルター(filter)で一気に着色。これヤバいな

ボックスの着色もこれ一発だわ

中身が単純な文字情報なら、これでいける

元のDボックス

強調方向での着色

「良い」情報

filter:hue-rotate(163deg);で色相変化

さらにfilter:satuate(2.5);で彩度強調

減衰方向での着色

「悪い」情報

青緑系の色相で、彩度を下げる

 

とりあえず、覚書!

元画像

filter:contrast(0.7) sepia(1) hue-rotate(324deg) saturate(3);

これで灰色系の図形(画像)は一気に着色できる。hue-rotateが0でセピアの色のまま

ボックス全体にインラインで記述した場合。背景の白なども全部染まっている

コントラストを0.4に弱めて(白飛びがなくなり中間調が着色される)、背景をnoneにして、色相を回転(セピア色から203°青紫)、saturateを6に(色濃)