シャドウの色はブラックとは限らない、さまざまなカラーにあった適切なシャドウの色が分かるオンラインツール
Post on:2018年8月30日
最近のWebデザインには使用される要素には、さまざまなカラーが使用されています。それらの要素にシャドウを与える際には、シャドウの色はブラックとは限りません。グレーであればグレー系シャドウ、レッドであればレッド系シャドウがぴったりです。
さまざまなカラーにあった適切なシャドウの色が分かるオンラインツールを紹介します。

Material Icon Shadow Color Picker
シャドウカラーピッカーでは、Material Designで使用されているカラーを元に、そのカラーにあったシャドウを生成することができます。
いくつかシャドウのカラーを見てましょう。

#ef5350のレッドに対するシャドウは、#d32f2f

#ab47bcのパープルに対するシャドウは、#7b1fa2

#5c6bc0のブルーに対するシャドウは、#303f9f

#26a69aのグリーンに対するシャドウは、#00796b

#9ccc65のライトグリーンに対するシャドウは、#689f38

#ffee58のイエローに対するシャドウは、#fbc02d

#ffa726のオレンジに対するシャドウは、#f57c00

#8d6e63のブラウンに対するシャドウは、#5d4037

#757575のグレーに対するシャドウは、#212121
下記ページで、さまざまなカラーにあった適切なシャドウの色が分かります。
See the Pen Material Icon Shadow Color Picker by Adam Quinlan (@quinlo) on CodePen.
sponsors