Chromeの拡張機能にあるColorPick Eyedropperを利用しブラウザ上の色番号を簡単に知る方法を紹介します。
素敵なサイトで使われているデザインの色や特定の色番号を知りたい人は、ぜひこの記事を読んでみて下さい。
目次(クリックでジャンプ)
ColorPick Eyedropperで色番号を調べる方法
- ColorPick Eyedropperのダウンロード
- ColorPick Eyedropperの起動
- ColorPick Eyedropperで色の読み取り
1.ColorPick Eyedropperのダウンロード
Chromeウェブストアにアクセスし検索バーに「ColorPick Eyedropper」を入力。
![ColorPick Eyedropper Chromeウェブストア](https://photoroamer.jp/wp-content/uploads/2020/11/c2f44a08b6d4499c2ea4917ccb80d138.jpg)
![ColorPick Eyedropper Chromeウェブストア](https://photoroamer.jp/wp-content/uploads/2020/11/c2f44a08b6d4499c2ea4917ccb80d138.jpg)
一覧の中からColorPick Eyedropperを選択。
![ColorPick Eyedropper Chromeウェブストア ダウンロード](https://photoroamer.jp/wp-content/uploads/2020/11/08e44ee535047a2632c8906b2119da23.png)
![ColorPick Eyedropper Chromeウェブストア ダウンロード](https://photoroamer.jp/wp-content/uploads/2020/11/08e44ee535047a2632c8906b2119da23.png)
「Chromeに追加」ボタンを押しダウンロードを開始。
![ColorPick Eyedropper Chromeウェブストア ダウンロードボタン](https://photoroamer.jp/wp-content/uploads/2020/11/327ee483680e31561cf5ccc1f1e2a8bb.png)
![ColorPick Eyedropper Chromeウェブストア ダウンロードボタン](https://photoroamer.jp/wp-content/uploads/2020/11/327ee483680e31561cf5ccc1f1e2a8bb.png)
2.ColorPick Eyedropperの起動
ダウンロード後にGoogle Chromeを開くと画面右上のメニュバーにColorPick Eyedropperのアイコンが追加されているのでアイコン選択しColorPick Eyedropperを起動。
![ColorPick Eyedropper 利用方法](https://photoroamer.jp/wp-content/uploads/2020/11/fa2212c3498b18cab5de5c64cf50e96e.jpeg)
![ColorPick Eyedropper 利用方法](https://photoroamer.jp/wp-content/uploads/2020/11/fa2212c3498b18cab5de5c64cf50e96e.jpeg)
3.ColorPick Eyedropperで色の読み取り
ColorPick Eyedropperを起動すると画面上にカーソルが表示されカーソルのある場所の色番号が表示されます。
![ColorPick Eyedropper 色番号](https://photoroamer.jp/wp-content/uploads/2020/11/56884d1f7a1700fee85c11f4018a04d3.jpeg)
![ColorPick Eyedropper 色番号](https://photoroamer.jp/wp-content/uploads/2020/11/56884d1f7a1700fee85c11f4018a04d3.jpeg)
色番号をコピーすることでウェブ上の画面で見た色と全く同じ色を使うことができます。