【悪用厳禁】お気に入りのサイトとお揃いの色にできる…？カラーコード抽出ツール「ColorPick Eyedropper」の使い方を解説

転職ポートフォリオを始めとした制作物を作っていると、他の制作物を参考にすることも多いでしょう。

一方で、どういった技術や内容で作られているものなのかというのは、意外に知らない方も多いはず。

そこで、今回はお気に入りの制作物で使われている色彩情報を抽出できる「ColorPick Eyedropper」の使い方について解説します。

もしお気に入りのサイトや制作物とお揃いの色を自分の制作物へ取り入れたいと考えている方は、ぜひ参考にしてみてください。

カラーコード抽出ツール「ColorPick Eyedropper」で出来ること

出来ることは、以下の通り。

• 画面上の色をピックアップする
• 色の情報を取得する
• 取得した色の履歴を管理する

拡張機能ゆえ機能はシンプルでありながらも、ネット上で検索できるものであれば、どこからでも色を取得できる優れモノ。

なので例えば、第三者が作った制作物やいつも閲覧しているお気に入りのサイトなど。

普段何気なく見ているものと同じ色の組み合わせを自分の制作物の中でも再現できてしまう、そんな夢のツールです。

「この色の組み合わせどうやったら再現できるんだろ…？」「この雰囲気可愛くて好き！真似してみたい！」といったものがある方は、ぜひ使ってみましょう。

カラーコード抽出ツール「ColorPick Eyedropper」の使い方を解説

具体的な使い方は、以下の通り。

1. Chromeウェブストアから「ColorPick Eyedropper」を検索して「拡張機能を追加」
2. 追加したら、右上にカラーパレット柄のアイコンが追加されるので、そこをクリック
3. あとは制作物から取得したい色の箇所にカーソルを合わせてクリック。すると、16進数でカラーコードが取得できます

※文字だけじゃ分かりづらいという場合は、上記のショート動画を参考に使ってみてください。

抽出した色に合う色を探す方法

そんな時は「Colorable」を使ってみましょう。

「Colorable」の詳しい使い方については、下記の記事で紹介しています。もし単色の色だけじゃなくて、複数の色を別の組み合わせで使ってみたいという方は、合わせて参考にしてみてください。

おわりに

今回は、カラーコード抽出ツール「ColorPick Eyedropper」の使い方について解説しました。

もしお気に入りのサイトや制作物の配色を参考にしてみたいという方は、ぜひ使ってみてください。