任意の画像のある地点をクリックしてRGBカラーコードを取得できるサービス「画像カラーピッカー」

WEBサイトのデザインにおいて、「色」は重要な要素です。CSSで色を指定する際には「RGBカラーコード」が使用されることがありますが、今回は任意の画像のある地点をクリックして、その地点の色のRGBカラーコードを取得できるサービス「画像カラーピッカー」を紹介します。

もくじ

  • 「画像カラーピッカー」の概要
  • 使い方

「画像カラーピッカー」の概要

「画像カラーピッカー」では、任意の画像のある地点の色の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色を指定します。数字が大きくなれば大きくなるほどその色の成分が強くなります。

このブログを応援する・寄付する

当ブログでは暗号通貨による寄付を募っております。

Bitcoin:

Monacoin:

Litecoin: