◎［小ワザ］Windows や Mac の Google Chrome のスポイトツールを使って画面内に表示されている要素から色の値を取得する

Google Chrome バージョン103あたりから、デベロッパーツールのカラーピッカーに付いているスポイトツールを使って、PC画面内の色を取り出すことができるようになった。

 

Google Chrome のカラーピッカー

サンプルは、Macbook Pro（macOS 11.7）、Google Chrome バージョン106を使用した。

 

● Google Chrome 右上の縦型三点リーダーアイコンをクリックする。

 

●［その他のツール］から［デベロッパーツール］を選ぶ。

 

●［スタイル］タブを選び、ソースの color 関連（変数の色も含む）を探す。color の値の直前にその色を反映した四角形があるのでそれをクリックする。

 

● カラーピッカーが立ち上がるので、新しい色を選び変更できる。次の画像はすでに色を変更済なので、左側のサンプルページプレビューのbodyのテキストの色に変更が反映されている。

 

●このカラーピッカーには［スポイト］ツールが付属しているので、これをクリックして有効化させ、画面内の好きな場所に移動して色の値を取得できる。そのまま色の値の置き換えも可能。

 

●［スポイト］ツールを有効化すると、マウスのカーソルは大きな円になり、目的の位置に移動し、クリックして円の中心部の色を取得できる。色の取得を取り消す場合は、再度［スポイト］ツールをクリックする。また、色の置き換えを取り消す場合は、［command］+［Z］（Windowsでは、［Ctrl］+［Z］）のショートカットを使う。

 

● 同様の色の値の取得は、Photoshop でもできる（下の関連ページ参照）が、アートボード内でスポイトツールを左クリックのまま長押しして目的の色要素までドラッグしていく必要があるので、Google Chrome のほうが楽に行える。

 

関連ページ「◎［小ワザ］［Photoshop］Windows や Mac の画面内に表示されている要素から色の値を取得する」