読者です 読者をやめる 読者になる 読者になる

SEOカフェ

〜 SEOで悩んだらコーヒーブレイクしたら良いと思うんだ〜

【狙い撃ち】Webサイトからカラーコードを抽出する便利ツール『ColorPick Eyedropper』

Webサイトからカラーコードを抽出する便利ツール『ColorPick Eyedropper』

たくさんのWebサイトを見ていると、使いたい色や参考にしたい色がありますよね。

実はテキストやCSS、バナー画像といったどんなカラーコードも瞬時に取得できるツールがあります。

それが『ColorPick Eyedropper』なのです。

f:id:kiyopiko-business:20161121002142j:plain

・Web上の気になる色コードを瞬時に取得
・テキストやバナー画像であっても簡単に取得できる。

気になる色コードを本当に一瞬で入手できるオススメツール!

#ffffffといった16進法での取得になるから、RGBを知りたい人は取得してから検索エンジンで調べると分かるよ!
ブラウザは我らがGoogle Chromeです。

ダウンロードの方法

下記ページからダウンロードしちゃいましょう!

ColorPick Eyedropperのダウンロード画面

ColorPick Eyedropperのダウンロード

右上の青ボタンからダウンロードできます。
特に再起動や細かい設定はいらないのがまた良いところ!

使い方

ダウンロードに成功したらブラウザの右上に、狙撃手が狙いそうなマークが出現します!

ColorPick Eyedropperのダウンロード後の狙撃手マーク

ここをポチっと押すとターゲット照準が出てくるから、気になる箇所をロックオンするだけなの!

背景色のカラーコードも抽出できる

背景色のカラーコードも抽出できるし、

画像のカラーコードも抽出できる

画像のカラーコードも抽出できる!!

この拡張機能があるだけで、Webサイト上で見かける気になる色や近しい色を好きなだけ調べることができちゃいます〜!

f:id:kiyopiko-business:20161121003144j:plain

欲しい色が見つからない場合

Web上にある多くの色を見ていても、しっくり来ない時は配色サイトがあるので参考にしてみてはいかがかしら。

adobeのカラーコード抽出ツール

Adobe Color CC

有名なadobeツール。
作成した配色パターンを何と「Photoshop」や「Illustrator」で使用することも簡単に!!
他のユーザーと共有することもできるから何とも素晴らしいツールですこと。

マウスで直感的にカラーコードを抽出するツール

Colordot

画像だと分かりにくいけど、マウスを動かすと色も変化する面白サイト。
それに伴って当然ながらカラーコードも取得できるから直感的に抽出したい人にはオススメ。

色の濃淡具合を教えてくれるツール

Color - Style - Material design guidelines

似たような配色が複数必要な時には、このサイトがオススメ。
h1やh2、h3といった見出しの色を少しずつ変えたいという人は重宝するはず。

サイトの中段くらいからたくさん候補となる色が並んでるからファーストビューで戻るボタン押さないように!

まとめ

まとめるほどのことでもないけど、一応まとめる(笑)

・Web上の気になる色コードを瞬時に取得
・テキストやバナー画像であっても簡単に取得できる。
・どうしても気になる色が見つからなかったら配色サイトを参考に

サイトカラーを固定すると全体が締まってカッコよくなるからね!

有名な話ではあるけど、1サイトの中で使って良い色は大きく3色とされているの。

・ベース
・メイン
・アクセント

www.m-hand.co.jp

ここを意識しながら考えると無駄なチラつきがないから滞在時間にも影響があるかもね!

スポンサーリンク