画像からカラーコードを調べるカラーコード抽出

画像の色を調べられます

写真やイラストの、気になる場所の色を調べられます。HEX、RGB、HSL の3つの書き方で出ます。

デザインで使う色を写したいときや、手元の画像と同じ色を作りたいときに使えます。

使い方

1. 点線の枠へ画像をドロップするか、枠をクリックして画像を選びます。パソコンでは、コピーした画像を貼り付けることもできます。
2. パソコンでは、色を知りたい場所にカーソルを乗せます。その場の色と、まわりの拡大が表示されます。クリックすると、その色が残り、場所に印が付きます。
3. スマホでは、色を知りたい場所をタップします。タップした場所に印が付き、まわりの拡大が画像の下に出ます。
4. 別の画像にするときは、もう一度枠から選びます。今の画像をやめるときは「画像を外す」を押します。

画面では小さく見えても、色は元の画像のものです

大きな写真は、画面に収まる大きさで表示します。小さい画像は、色を指しやすい大きさまで広げて、ドットがぼやけないように表示します。

表示の大きさを変えても、調べるのは元の画像のその場所の色です。横長の写真を半分の大きさで見ているとき、画面の真ん中は、元の写真の真ん中の色です。

パソコンでは、カーソルのそばにまわりの拡大が出ます。スマホでは、タップした場所の拡大が画像の下に出ます。中央の枠が、今見ている色です。

HEX、RGB、HSLとは

HEX、RGB、HSL は、同じ色の書き方です。

• HEX は、#3A7BD5 のように、# から始まる6桁です。
• RGB は、赤・緑・青の強さを、0から255の数字で表します。
• HSL は、色あい、鮮やかさ、明るさで表します。

たとえば、この青は次の3つが同じ色です。

透けている色

PNG や WebP のように、背景が透ける画像では、透け具合も一緒に出ます。透けていない色は RGB だけ、透けている色は RGBA も出ます。

数字は 0 から 1 です。1に近いほど透けておらず、0に近いほど透けています。0.8 は、少し透けている状態です。見本は市松模様の上に出るので、透け具合が分かります。

使える画像

JPEG、PNG、WebP、AVIF、それに iPhone でよく使う HEIC、HEIF を選べます。1枚ずつ、50MB までです。

HEIC は、お使いのブラウザが表示できるときだけ開きます。開けないときは、JPEG で保存してから選んでください。iPhone の写真アプリから選ぶと、JPEG になって渡されることがあります。

GIF は開けません。ウェブサイトに出ている画像をドラッグしてきても読み込めません。自分のパソコンやスマホに保存されている画像を選んでください。選んだ画像は、このページから外へ送られません。

写真アプリと番号が違うとき

iPhone で撮った写真は、写真アプリやデザインのソフトに出る番号と、このページの番号が少し違うことがあります。

このページは、画面に見えている色の番号を出します。

よくある質問