【色解析】Webサイトの文字や写真全てに使われている色を調べる方法

   

Webサイト制作、デザインでカラー決めで困った時に他サイトで使われている色を参考にする、調べる際に役立つ方法を2つ紹介します。Webで色を表示させるには、色を表示する「カラーコード」と呼ばれるコードを調べる必要があります。今回は、外部サイトを利用する方法と、プラグインを利用する方法です。

Sponsored Link

「Web Color Date」で調べる

▶️Web Color Date

こちらで、気になるサイトのURLを入力します。例えば私のサイトトップページURL「mugcup8.com」を入力すると、

こんな感じです。写真やイラストものURLで調べる事も可能です。

「Websites with Similar Colors」 類似色が使われているウェブサイトも出てくるのでデザインをする上で、参考にする事も出来ます。

Chromeの拡張プラグイン「ColorPick Eyedropper」を使用する

▶️ColorPick Eyedropper

上記リンクからGoogle Chrome に追加します。

アドレスバー右側にHueサークルアイコンが出てくるのでクリックします。

クリックしたら色が表示されるウィンドウが出てくるので、調べたい色の部分にカーソルを合わせると色が表示されます。

ドット単位での色表示なので、薄い場所や濃い場所でカラーコードが変わってくるので、好きな色部分を探し表示させて下さい。

 

以上2つの方法である程度の色コードを簡単に調べる事が出来るようになります。表示されたカラーコードずばりを使うか、近い色を探すなどこちらのサイトを参考にするとよいでしょう。

▶️原色大辞典

細かいリンクカラーやバーの色、ロゴの色など色々参考にして、自分のサイトデザインに役立てて下さい。

 - Webデザイン, ブログ関連