デザイナーやエンジニアがよく使う、Google Chromeのデベロッパーツールに備わっているカラーピッカー機能がパワーアップしました。
今まではChromeブラウザ内のカラーしか取得できなかったのですが、ブラウザ外のカラーも取得することが可能になりました。
使い方はスポイトを使うだけ。
詳しく説明していきます。
Chromeのバージョンを10.3にする
新機能なので、ブラウザをアップデートする必要があります。
最新のバージョンは10.3（2022/7/20時点）なので、まずは自身のバージョンを確認してください。
画面右上の点々アイコンから、「設定」を開きます。
画面左側にあるメニューから、「Chromeについて」をクリック。
画面右側に現在のバージョンが表示されるので、10.3以下の場合はアップデートをしてください（アップデートをするとブラウザが再起動されます）。
デベロッパーツールのスポイト機能を使う
Chromeデベロッパーツールのスポイト機能を使います。
まずは「F12キー」または「右クリック ⇒ 検証」でデベロッパーツールを起動します。
開いているページ内の、CSSでカラー指定されている箇所（「color」や「background-color」など）を探します。
見つけたら、上記画像の四角い部分をクリックします。
するとカラーピッカーが起動するので、スポイトアイコンをクリック。
虫眼鏡のようなカーソルに変わるので、そのままブラウザ外のカラーコードを知りたい箇所をクリックすると取得できます。
まとめ
「既にあるサイトの一部分だけ色を変えてみてみたい」
「ここのカラーコードを知りたい」
「ブラウザ上でサイトの配色を決めたい」
などなど、色んなシーンで役に立ちそうですね。