画像から色を抽出

画像に使われている色を取り出して、カラーコード(HEX・RGB)で表示します。

1. 色を取り出す画像を選ぶ

JPEG・PNG・WebP・GIF・HEIC(iPhoneの写真)に対応しています。

ここに画像をドラッグ&ドロップ

または

2. 使われている色

画像によく使われている色を、多い順に並べました。押すとコピーできます。

色の数

表示の形式

3. まとめて使う

取り出した色を、画像で保存したり、まとめてコピーしたりできます。

処理はこの端末の中で行われ、画像はアップロードされません。

色は画像を縮めてから数えるので、ごく小さな部分の色はパレットに出ないことがあります。そのときはスポイトで取り出してください。

役に立ったら、シェアしてもらえるとうれしいです

使い方

  1. 1. 画像を選ぶ

    「ファイルを選ぶ」をタップして、色を調べたい写真や画像を選びます。

  2. 2. 使われている色を見る

    画像の下に、よく使われている色が多い順に並びます。「色の数」や「表示の形式」を変えられて、色をタップするとコピーできます。

  3. 3. スポイトで色を取り出す

    画像の上をタップすると、その場所の色を取り出してコピーします。少し長押ししてから指を動かすと拡大鏡が出て、細かい場所を選べます。指を離したところの色を取り出します。

  4. 4. まとめて使う

    「パレットを画像で保存」で、色とカラーコードを並べた画像を保存できます。

こんなときにおすすめ

  • 写真やイラストの配色を参考にしたい

    好きな写真やイラストから色を取り出して、資料・スライド・サイトの配色に使えます。

    デザインや資料を作る人

  • ロゴや商品の色を調べたい

    画像の上を押すだけで、その場所の色のカラーコードが分かります。ロゴやブランドの色を確かめるときに。

    Web制作・広報の担当者

  • CSSにそのまま使いたい

    パレットを「CSSの変数でコピー」すれば、スタイルシートにそのまま貼り付けられます。

    Webエンジニア

  • 手芸や塗装の色選びに

    写真の色をカラーコードで控えておけば、塗料や毛糸、布を選ぶときの目安になります。

    ものづくりをする人

使う前に知っておきたいこと

  • 画面の色は、モニターや写真の明るさによって見え方が変わります。印刷に使う色(CMYK)は、印刷所の色見本で確かめてください。
  • 強く圧縮されたJPEGでは、同じ色に見える部分にも少しずつ違う色が混ざります。ぴったりの色は、スポイトで取り出してください。
  • 画像を軽くしたいときは「画像を圧縮」が便利です。

カラーコードについて

カラーコードは、色を数字で表したものです。Webやデザインのソフトでは、HEX・RGB・HSLの3つの書き方がよく使われます。どれも同じ色を表していて、書き方が違うだけです。

このツールは、画像を小さく縮めてから、見た目が近い色同士をまとめて、よく使われている色を探します。割合(%)は、画像の中でその色に近い部分がどれくらいあるかの目安です。

カラーコードの書き方のちがい
書き方の例よく使う場面
HEX#F5A524Webやデザインのソフト
RGBrgb(245, 165, 36)CSSや画像編集のソフト
HSLhsl(37, 91%, 55%)明るさや鮮やかさを変えたいとき

よくある質問

使う前に気になりやすいことをまとめました。

画像はどこかに送られますか?

送られません。処理はすべてお使いの端末のブラウザの中で行われ、画像がサーバーにアップロードされることはありません。

取り出した色は正確ですか?

スポイトで取り出した色は、押した場所の画素の色そのものです。パレットの色は、近い色をまとめた平均なので、画像のどの点ともぴったり同じにならないことがあります。

欲しい色がパレットに出てきません。

「色の数」を12にすると、少ない色も出やすくなります。ごく小さな部分の色は、画像の上を押してスポイトで取り出してください。

色をコピーするには、どうすればいいですか?

パレットの色を押すとコピーされます。スポイトで取り出した色も、押した時点でコピーされます。「HEXをまとめてコピー」で全部の色を一度にコピーすることもできます。

HEX・RGB・HSLは、どう違いますか?

同じ色の書き方の違いです。HEXは「#」と16進数、RGBは赤・緑・青の強さ、HSLは色合い・鮮やかさ・明るさで表します。使う場所に合わせて切り替えてください。

印刷用の色(CMYK)は分かりますか?

分かりません。このツールで分かるのは、画面に表示するための色(sRGB)です。印刷に使うときは、印刷所の色見本で確かめてください。

透明な部分はどうなりますか?

パレットを作るときは、透明な部分を数えません。

パレットを保存できますか?

「パレットを画像で保存」で、色とカラーコードを並べたPNG画像を保存できます。「CSSの変数でコピー」で、スタイルシートに使える形でコピーすることもできます。

iPhoneの写真(HEIC)も使えますか?

使えます。JPEG・PNG・WebP・GIFのほか、iPhoneのHEICの写真からも色を取り出せます。

無料で使えますか?

無料です。登録も不要で、広告もありません。