こんにちは。アートピースの安居院です。
突然ですが、気に入ったWebサイトの色を確認したいと思ったことはありませんか？
とっても簡単にWebサイトのカラーコードが調べられるツールを3つ紹介します。
目次
●色を抽出するカラーピッカーとは
画面上の色情報を瞬時に取得できる機能のこと。
Chromeの拡張機能を入れることで簡単にサイト上の色を抽出して他の作業に活用できます。
業務効率もアップできるので、是非追加してみてください。
●Chromeの拡張機能を追加する方法
それでは、実際にGoogle Chromeの拡張機能を使うための方法について解説していきます。
まずは拡張機能のインストール方法です。
例として「ColorPick Eyedropper」で説明します。設定も必要なく、3ステップで完了します！
1. ブラウザ「Google Chrome」で ColorPick Eyedropper にアクセスし、「Chromeに追加」をクリック。
2.「ColorPick Eyedropperを追加しますか？」というウィンドウが現れるので、「拡張機能を追加」をクリック。
3.ヘッダーメニューに「ColorPick Eyedropper」のアイコンが登場したら導入完了。
●Webサイトの色を抽出するChromeの拡張機能 3選
①ColorPick Eyedropper の使い方
1.色を抽出したいサイトを開き、追加した「ColorPick Eyedropper」のアイコンをクリック。
十字架のカーソルに変わります。
2.知りたい色のところに十字架のカーソルを合わせると、カラーコードが出てくる。
今回は緑の部分が「4DCB55」と出ています。
3.合わせたカーソルをクリックすると自動的にカラーコードがコピーできています。
イラストレーターなどですぐに使用することができるのでとても簡単。
4. X印を押すとカラーピックモードが終了します。
②Color Zilla の使い方
1.上記で説明した「●Chromeの拡張機能を追加する方法」 と同じやり方で「Color Zilla」を追加してください。
右上に追加されます。
2.色を抽出したいサイトを開き、追加した「Color Zilla」のアイコンをクリック。
メニューバーが開かれます。
一番上の「Pick Color From Page」をクリック。クリックするとページ内の任意の箇所からカラーコードを抽出で きます。
3.表示される十字架のカーソルを抽出したい部分に合わせてクリックすると、下記のようなバーが表示されます。
4.クリックするとクリップボードにコピーされるので、そのままカラーコードをペーストすることが可能です。
Xバツを押して終了。
③16進数カラーピッカー の使い方
1.上記で説明した「●Chromeの拡張機能を追加する方法」と同じやり方で「16進数カラーピッカー」を追加してくだ さい。右上に追加されます。
2.色を抽出したいサイトを開き、追加した「16進数カラーピッカー」のアイコンをクリック。
メニューバーが開かれます。
3.四角枠内のアイコンをクリックして、ページ内の任意の箇所からカラーコードを抽出します。
4.マウスと並走する■が表示されます。抽出したい箇所をクリックします。
5.再度右上の16進数カラーピッカーをクリックすると先ほどの抽出したカラーコードが表記されます。
●そもそもカラーコードとは
カラーコードは、Web上で色を表現するために用いられる数値のことです。16進数カラーコードとも呼ばれます。
・シャープ（#）に続く6桁の16進数で表記される。
・2桁ごとに赤・青・緑の濃淡が表され、16進数（0～F）の0が最も薄く、Fに近づくほど濃い色となる。
●RGBとは
RGBは光の３原色ともいい、RED(レッド)GREEN(グリーン)BLUE(ブルー)に頭文字を取ったもので、主にコンピュータやテレビのモニターなどの表示色で使われます。
・RGBの特徴は色を混ぜれば混ぜるほど明るい色へと変化していき、最終的には白になる。
・Webデザインをする時に使うカラーモードはRGB。
●CMYK とは
CMYKは印刷の4原色ともいい、「C=Cyan（シアン）」「M=Magenta（マゼンタ）」「Y=Yellow（イエロー）」「K=Key Plate（黒）」のそれぞれの頭文字を取ったもので、チラシやカタログ、ポスターなど印刷されたものは一般的にCMYKで再現されています。
・特徴は色を混ぜれば混ぜるほど濃い色へと変化していくこと。
・プリンターなどの印刷機で黒をきれいに表現できるので、印刷物をする時はCMYK。
●まとめ
色を抽出する3つのChromeの拡張機能の主な使い方をご紹介して参りました。
自分自身、以前は色を抽出したいと思ったときに画面をスクショして、
イラレ/フォトショで色を抽出するという二度手間の作業を行っていました。
そんな面倒な作業をせずとも、簡単にWebサイトのおしゃれなカラーを抽出できる便利な機能をぜひ使用してみてください。
