画像から色を抽出（カラーコード取得）
クリックでカラーコード、ボタひとつで画像の配色パレット。
ここにファイルをドロップ
またはクリックして端末から選択対応形式: JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF
1回に1ファイル1ファイル20 MBまで1日5回までProで制限を解除✓ オフラインでも利用可能
ファイルは端末の外に出ません
このツールはブラウザ内だけで動作します。アップロードも保存も行わないため、処理を始める前にインターネット接続を切っても問題ありません。
使用例
例：2色のロゴから、チラシに使うカラーコードを取り出す
町内会のロゴ logo.png は、白地に紺の四角とオレンジの帯。お祭りのチラシを同じ色で作りたいのに、元のデザインデータは見つからず、手元にあるのはこのPNG画像だけです。
- 紺の四角をクリックすると #1B3A6B、rgb(27, 58, 107)。オレンジの帯をクリックすると #F28C28、rgb(242, 140, 40)。コードをクリックするとコピーできます。
- 抽出する色の数で「5色」を選び、「メインカラーを抽出」を押すと、それぞれの色が画像に占める割合も出ます。
- チラシを作るアプリでは、色の設定のHEXの欄に1B3A6B、またはRGBの欄に27・58・107を入れれば、ロゴと同じ紺になります。
| 色 | HEX | RGB | 画像に占める割合 |
|---|---|---|---|
| 白 | #FFFFFF | rgb(255, 255, 255) | 64% |
| 紺 | #1B3A6B | rgb(27, 58, 107) | 27% |
| オレンジ | #F28C28 | rgb(242, 140, 40) | 9% |
5色を選んでも、出てくるのは3色です。単色で塗ったロゴには3つの色しかなく、ふちにできる中間の色は別の色として数えません。色の多い写真なら、選んだ数の色がほぼ埋まります。
使い方
- 画像をボックスにドロップします。下に画像が表示されます。
- 画像の好きな場所をクリックすると、その色がHEXとRGBのカラーコード付きで一覧に加わります。コードをクリックするとコピーできます。
- 画像全体のメインカラーを知りたいときは、色の数を選んで「メインカラーを抽出」を押します。
- 一覧をコピーするか、各色の割合がわかる配色画像と一緒に保存します。
よくある質問
- クリックした色はどのくらい正確ですか？
- ポインタの下にある1ピクセルの色を、画像そのものから読み取っています。写真は隣り合うピクセルでも少しずつ色が違うので、範囲の色を知りたいときは何か所かクリックしてください。
- メインカラーはどう決めていますか？
- k-means法で画像のピクセルを選んだ数の色のグループに分け、グループごとの平均の色を、画像に占める割合と一緒に表示します。透明な部分は含めません。
- デザインデータのカラーコードと少し違います。
- JPGの圧縮やカラープロファイルの違いで、色がわずかにずれることがあります。ロゴなど正確な色が必要なときは、PNGで書き出した画像から取るか、デザインデータ自体を確認してください。
- HEXとRGBはどう使い分けますか？
- 同じ色の書き方の違いです。#1B3A6Bは赤・緑・青の強さを16進数2桁ずつで書いたもので、ウェブやデザインアプリの色の欄に入れます。rgb(27, 58, 107)は同じ色を0〜255の数字で表したもので、RGBの数字を入れる色の設定に使います。
- スクリーンショットから色を調べられますか？
- 調べられます。PNGで保存されたスクリーンショットは圧縮で色が崩れないので、ウェブページのボタンや文字の色も、クリックした1ピクセルのコードがそのまま出ます。
- 画像はアップロードされますか？
- いいえ。画像はこのページのキャンバスに描いて、そこから色を読み取ります。無料プランでは「メインカラーを抽出」が1日5回まで使えます。クリックでの取得は回数に数えません。