人気の株主優待

weblovelog

ウェブ業界人のためのウェブ情報サイト。

オンライン上の色を取得したい!Chrome拡張機能の「ColorZilla」が使える

   

はじめに

色々なウェブサイトを見ていると、「あっ!この色きれい」とか、

ウェブ制作をしていると、「この画像と同じ色を他に使いたいけど、色のコードなんやったっけ?」ってなことありません?

そんな時、皆さんはどうやって「色」の確認していますか?

「photoshop開けて〜」って言いかけた人がいたら、ちょっと待ったぁ!!

Chrome拡張機能の「ColorZilla」さえ使えば簡単ですよ。
カラーコードで取得はもちろん、RGB値も画像のサイズまで表示してくれちゃいます。
 
colorzilla

ColorZillaの使用方法

① まずChromeウェブストアへ行ってColorZillaを検索し、無料でインストールします。
colorzilla

② すると、ウィンドウの右上にスポイトの様なアイコンがでてきます。
スポイトアイコン

③ 好きなサイトを開けて、スポイトアイコンをクリック!すると、下図のようなナビが開きます。この一番上にある「Pick Color From Page」をクリックで選択します。
picker

④ マウスのカーソルがプラスになっていますか?サイト内の好きな箇所へカーソルを移動させてください。上部にカラーコードが表示されているはずです。(下図赤枠参照)
i
※アップルストアさんを見本で使わせていただいています。

⑤ 参考にしたい色の箇所でクリックすると、スポイトアイコンの色が変わります。先程のナビの「Color Picker」をクリックしてください。
u

⑥ すると、下図のようなものが現れます。あなたの取得した色情報が記載されています。Color historyも追加されていますね。
c

⑦ 「Webpage Color Analyzer」からは、ページに使用されている色を知ることができます。
page

他にも機能が充実しているので、是非使ってみてください。

 ColorZilla

 

 - WEB, web便利機能 , , ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  関連記事