画像から色を抽出
画像に使われている色を取り出して、カラーコード(HEX・RGB)で表示します。
1. 色を取り出す画像を選ぶ
JPEG・PNG・WebP・GIF・HEIC(iPhoneの写真)に対応しています。
ここに画像をドラッグ&ドロップ
または
2. 使われている色
画像によく使われている色を、多い順に並べました。押すとコピーできます。
色の数
表示の形式
3. まとめて使う
取り出した色を、画像で保存したり、まとめてコピーしたりできます。
処理はこの端末の中で行われ、画像はアップロードされません。
色は画像を縮めてから数えるので、ごく小さな部分の色はパレットに出ないことがあります。そのときはスポイトで取り出してください。
役に立ったら、シェアしてもらえるとうれしいです
使い方
1. 画像を選ぶ
「ファイルを選ぶ」をタップして、色を調べたい写真や画像を選びます。
色を調べたい画像を、ページのどこかにドラッグ&ドロップします。「ファイルを選ぶ」からでも選べます。
2. 使われている色を見る
画像の下に、よく使われている色が多い順に並びます。「色の数」や「表示の形式」を変えられて、色をタップするとコピーできます。
画像によく使われている色が、多い順に並びます。「色の数」で5・8・12色から選べて、「表示の形式」でHEX・RGB・HSLを切り替えられます。色を押すとコピーできます。
3. スポイトで色を取り出す
画像の上をタップすると、その場所の色を取り出してコピーします。少し長押ししてから指を動かすと拡大鏡が出て、細かい場所を選べます。指を離したところの色を取り出します。
画像の上にカーソルを乗せると、その場所の色が見えます。クリックすると、色を取り出してコピーします。押したままドラッグすると拡大鏡が出て、細かい場所を選べます。離したところの色を取り出します。
4. まとめて使う
「パレットを画像で保存」で、色とカラーコードを並べた画像を保存できます。
「パレットを画像で保存」で、色とカラーコードを並べた画像を保存できます。「HEXをまとめてコピー」「CSSの変数でコピー」で、全部の色をまとめてコピーすることもできます。
こんなときにおすすめ
写真やイラストの配色を参考にしたい
好きな写真やイラストから色を取り出して、資料・スライド・サイトの配色に使えます。
デザインや資料を作る人
ロゴや商品の色を調べたい
画像の上を押すだけで、その場所の色のカラーコードが分かります。ロゴやブランドの色を確かめるときに。
Web制作・広報の担当者
CSSにそのまま使いたい
パレットを「CSSの変数でコピー」すれば、スタイルシートにそのまま貼り付けられます。
Webエンジニア
手芸や塗装の色選びに
写真の色をカラーコードで控えておけば、塗料や毛糸、布を選ぶときの目安になります。
ものづくりをする人
使う前に知っておきたいこと
- 画面の色は、モニターや写真の明るさによって見え方が変わります。印刷に使う色(CMYK)は、印刷所の色見本で確かめてください。
- 強く圧縮されたJPEGでは、同じ色に見える部分にも少しずつ違う色が混ざります。ぴったりの色は、スポイトで取り出してください。
- 画像を軽くしたいときは「画像を圧縮」が便利です。
カラーコードについて
カラーコードは、色を数字で表したものです。Webやデザインのソフトでは、HEX・RGB・HSLの3つの書き方がよく使われます。どれも同じ色を表していて、書き方が違うだけです。
このツールは、画像を小さく縮めてから、見た目が近い色同士をまとめて、よく使われている色を探します。割合(%)は、画像の中でその色に近い部分がどれくらいあるかの目安です。
よくある質問
使う前に気になりやすいことをまとめました。
画像はどこかに送られますか?
送られません。処理はすべてお使いの端末のブラウザの中で行われ、画像がサーバーにアップロードされることはありません。
取り出した色は正確ですか?
スポイトで取り出した色は、押した場所の画素の色そのものです。パレットの色は、近い色をまとめた平均なので、画像のどの点ともぴったり同じにならないことがあります。
欲しい色がパレットに出てきません。
「色の数」を12にすると、少ない色も出やすくなります。ごく小さな部分の色は、画像の上を押してスポイトで取り出してください。
色をコピーするには、どうすればいいですか?
パレットの色を押すとコピーされます。スポイトで取り出した色も、押した時点でコピーされます。「HEXをまとめてコピー」で全部の色を一度にコピーすることもできます。
HEX・RGB・HSLは、どう違いますか?
同じ色の書き方の違いです。HEXは「#」と16進数、RGBは赤・緑・青の強さ、HSLは色合い・鮮やかさ・明るさで表します。使う場所に合わせて切り替えてください。
印刷用の色(CMYK)は分かりますか?
分かりません。このツールで分かるのは、画面に表示するための色(sRGB)です。印刷に使うときは、印刷所の色見本で確かめてください。
透明な部分はどうなりますか?
パレットを作るときは、透明な部分を数えません。
パレットを保存できますか?
「パレットを画像で保存」で、色とカラーコードを並べたPNG画像を保存できます。「CSSの変数でコピー」で、スタイルシートに使える形でコピーすることもできます。
iPhoneの写真(HEIC)も使えますか?
使えます。JPEG・PNG・WebP・GIFのほか、iPhoneのHEICの写真からも色を取り出せます。
無料で使えますか?
無料です。登録も不要で、広告もありません。
ほかのツール
- 写真の位置情報(Exif)を削除
写真に残る位置情報や撮影日時などを、画質を落とさずに消します。
- 写真のExifを編集
写真の撮影日時・位置情報・カメラの機種・作成者を、画質を落とさずに書き換えます。
- 画像にモザイク・ぼかし
スクリーンショットや写真の名前・住所・顔などを、モザイクや塗りつぶしで隠します。
- 画像をWebPに変換
PNGやJPEGを、軽くて画質のよいWebP形式に変換します。
- 画像をPNGに変換
JPEGやWebPを、画質が落ちないPNG形式に変換します。
- 画像をJPGに変換
PNGやWebPを、どこでも開けるJPG(JPEG)形式に変換します。