サイト内や画像中のカラーコードを調べる方法3選
![](https://yuhostyles.com/wp-content/uploads/2020/03/photo-1513542789411-b6a5d4f31634.jpeg)
サイト制作などをしていると、画像に合わせたカラーコードを使いたい場面が出てきます。
ディベロッパーツール
サイト上のカラーコードなら、Chromeの拡張機能「ディベロッパーツール」で調べるのが正確です。
Windowsは「F12」、Macは「option + command + i」を押して起動します。
「選択ツール」(画像参照)をクリックして、見たいところを選ぶと、カラーコードを含めたコードが表示されます。
![](https://yuhostyles.com/wp-content/uploads/2020/11/Screen-Shot-2020-11-01-at-18.33.55-1024x552.jpg)
ここではカラーコードの調べ方だけを紹介しましたが、より詳しく知りたい方はディベロッパーツールの使い方をご覧ください。
画像カラーピッカー
![画像カラーピッカー](https://yuhostyles.com/wp-content/uploads/2020/11/Screen-Shot-2020-11-01-at-18.23.16-1024x536.jpg)
画像からカラーコードを取得する方法です。画像中のコードはディベロッパーツールでは見ることができないので、こちらを使うと便利です。
このタイプのサイトはいろいろありますが、中でもこれが使いやすいかと思います。
任意の画像をドラッグ&ドロップまたはURLで読み込むと、カーソルを当てた箇所のカラーコードが表示されます。
Mac純正カラーピッカー
Macには「Digital Color Meter」というカラーピッカー機能がついています。
「アプリケーション」もしくは「command + space」で検索し、起動します。
![](https://yuhostyles.com/wp-content/uploads/2020/11/Screen-Shot-2020-11-01-at-19.08.21-1024x644.jpg)
最初の設定をします。ビュー→値を表示→「16進数(Hexadecimal)」を選びます。
![](https://yuhostyles.com/wp-content/uploads/2020/11/Screen-Shot-2020-11-01-at-19.12.05-1024x584.jpg)
任意の箇所にカーソルを当て、「command + shift + c」でコピーするとカラーコードをペーストすることができます。
![](https://yuhostyles.com/wp-content/uploads/2020/11/Screen-Shot-2020-11-01-at-19.18.00-1024x646.jpg)
一見、変に見えますが、ペーストすると#から始まるコードになるので大丈夫です(この場合は#60BDBBです)。
最後に
カラーコードを調べる方法まとめでした!
場面に応じて使い分けていたがくと良いかと思います。
それでは良いディベロッパー/ブロガーライフを😄