サイト内や画像中のカラーコードを調べる方法3選

2021年5月16日

サイト制作などをしていると、画像に合わせたカラーコードを使いたい場面が出てきます。

ディベロッパーツール

サイト上のカラーコードなら、Chromeの拡張機能「ディベロッパーツール」で調べるのが正確です。

Windowsは「F12」Macは「option + command + i」を押して起動します。

選択ツール」(画像参照)をクリックして、見たいところを選ぶと、カラーコードを含めたコードが表示されます。

ここではカラーコードの調べ方だけを紹介しましたが、より詳しく知りたい方はディベロッパーツールの使い方をご覧ください。

画像カラーピッカー

画像カラーピッカー

画像からカラーコードを取得する方法です。画像中のコードはディベロッパーツールでは見ることができないので、こちらを使うと便利です。

このタイプのサイトはいろいろありますが、中でもこれが使いやすいかと思います。

任意の画像をドラッグ&ドロップまたはURLで読み込むと、カーソルを当てた箇所のカラーコードが表示されます。

画像カラーピッカー

Mac純正カラーピッカー

Macには「Digital Color Meter」というカラーピッカー機能がついています。

「アプリケーション」もしくは「command + space」で検索し、起動します。

最初の設定をします。ビュー→値を表示→「16進数(Hexadecimal)」を選びます。

任意の箇所にカーソルを当て、「command + shift + c」でコピーするとカラーコードをペーストすることができます。

一見、変に見えますが、ペーストすると#から始まるコードになるので大丈夫です(この場合は#60BDBBです)。

最後に

カラーコードを調べる方法まとめでした!

場面に応じて使い分けていたがくと良いかと思います。

それでは良いディベロッパー/ブロガーライフを😄

スポンサーリンク