ウェブサイトの配色を調べたい時、「この色のカラーコードってなんだろう？」と思ったことはありませんか？
多くの方がChrome拡張機能の「カラーピッカー」を使っているかもしれませんね。もちろんそれらの拡張機能も素晴らしいツールですが、実はChromeには標準で非常に便利なカラーピッカー機能が搭載されていることをご存知でしょうか？
今回は、拡張機能のインストール不要で使える、Chromeデベロッパーツールのカラーピッカー機能の使い方についてご紹介します。
デベロッパーツールを開く
Windowsの場合ですが ファンクションのF12を押します。それか、ページ上で右クリック → 「検証」を選択をおします。ChromebookではF12のキーがないので、この方法になります。
右側に下のようなのが出てきます。elementのstylesの方を下にスクロールするとカラーが表示されているところが見つかります。
色見本をクリックしてカラーピッカーを開く
見本の色の部分をクリックするとしたのようなのが表示されます。
スポイトツールをクリック
カラーピッカー上部に表示されるスポイトアイコン（またはマウスカーソルがスポイトになる）をクリックし、ウェブページ上のどこでも好きな場所のピクセルをクリックすると、そのピクセルの色を正確に取得できます。
まとめ
今回は、Chromeに標準搭載されているカラーピッカー機能をご紹介しました。
拡張機能をインストールすることなく、手軽にウェブサイトの色を調べたり、調整したりできるこの機能は、ブログ運営者やウェブ制作者にとって非常に強力な味方となるはずです。
もしこれまで拡張機能を使っていた方も、ぜひ一度Chromeの標準カラーピッカー機能を試してみてください。その便利さにきっと驚くはずです！多機能ではないですが、ちょっとしたことに使うのであれば、ブラウザが重くなりませんのでスペック低いパソコンでも使いやすいです。
