シャドウの色はブラックとは限らない、さまざまなカラーにあった適切なシャドウの色が分かるオンラインツール
Post on:2018年8月30日
最近のWebデザインには使用される要素には、さまざまなカラーが使用されています。それらの要素にシャドウを与える際には、シャドウの色はブラックとは限りません。グレーであればグレー系シャドウ、レッドであればレッド系シャドウがぴったりです。
さまざまなカラーにあった適切なシャドウの色が分かるオンラインツールを紹介します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018082705.png)
Material Icon Shadow Color Picker
シャドウカラーピッカーでは、Material Designで使用されているカラーを元に、そのカラーにあったシャドウを生成することができます。
いくつかシャドウのカラーを見てましょう。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018082706-01.png)
#ef5350のレッドに対するシャドウは、#d32f2f
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018082706-02.png)
#ab47bcのパープルに対するシャドウは、#7b1fa2
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018082706-03.png)
#5c6bc0のブルーに対するシャドウは、#303f9f
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018082706-04.png)
#26a69aのグリーンに対するシャドウは、#00796b
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018082706-05.png)
#9ccc65のライトグリーンに対するシャドウは、#689f38
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018082706-06.png)
#ffee58のイエローに対するシャドウは、#fbc02d
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018082706-07.png)
#ffa726のオレンジに対するシャドウは、#f57c00
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018082706-08.png)
#8d6e63のブラウンに対するシャドウは、#5d4037
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018082706-09.png)
#757575のグレーに対するシャドウは、#212121
下記ページで、さまざまなカラーにあった適切なシャドウの色が分かります。
See the Pen Material Icon Shadow Color Picker by Adam Quinlan (@quinlo) on CodePen.
sponsors