任意の画像のある地点をクリックしてRGBカラーコードを取得できるサービス「画像カラーピッカー」
投稿日：2016年08月14日
最終更新日：
もくじ
- 「画像カラーピッカー」の概要
- 使い方
「画像カラーピッカー」の概要
「画像カラーピッカー」では、任意の画像のある地点の色のRGBカラーコードを取得することが出来ます。「この画像のこの部分の色をWEBサイト使いたいけど、RGBカラーコードが分からないからCSSで指定できない…」という時などに便利かもしれません。
使い方
まずは画像カラーピッカー – Web開発ツールズにアクセスしましょう。こんな感じの画面が表示されるはずです。「参照」ボタンをクリックし、RGBカラーコードを取得したい色が存在する任意の画像を選択しましょう。
画像が読み込まれたら、RGBカラーコードを取得したい任意の地点をクリックしましょう。HTMLコード(16進数6桁・CSS等で使用するもの)とRGBコード(3色の成分ごとに表示・10進数1～3桁×3色)が取得されます。
蛇足ではありますが、RGBカラーモデルでは、光の三原色である赤(Red)・緑(Green)・青(Blue)の加法混色で様々な色を表現します。2016年現在、典型的なPCモニターでは赤・緑・青の各色を256段階(＝8bitで表現できる)で表現することにより、256の3乗(2の24乗)＝1677万7216色を表現しています。
CSSの場合は、16進数6桁の数字でRGBの3色を指定します。数字が大きくなれば大きくなるほどその色の成分が強くなります。 [CSS] /* 6桁の中から各色に2桁ずつ割り振られている。1,2桁目が赤 3,4桁目が緑 5,6桁目が青 */ #RRGGBB /* 赤を指定する */ #FF0000 /* 緑を指定する */ #00FF00 /* 青を指定する */ #0000FF /* 白を指定する */ #FFFFFF /* 黒を指定する */ #000000 /* 使い方の例 hoge要素の背景色を黄色(#FFFF00)にする */ hoge { background: #FFFF00; } [/CSS]
