画像から配色を取り出す
その絵が何色でできているかを、カラーコードで。
ここにファイルをドロップ
またはクリックして端末から選択対応形式: JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF
1回に1ファイル1ファイル20 MBまで1日5回までProで制限を解除✓ オフラインでも利用可能
ファイルは端末の外に出ません
このツールはブラウザ内だけで動作します。アップロードも保存も行わないため、処理を始める前にインターネット接続を切っても問題ありません。
使用例
例：夏祭りポスター用の夕暮れの海辺イラストから、3色のカラーコードを取り出す
町内会の夏祭りのポスターに使う、平らな色で描いた800×600ピクセルのPNGイラスト「umibe.png」。上の240ピクセルがオレンジの夕焼け空、中の150ピクセルが青緑の海、下の210ピクセルがベージュの砂浜です。抽出する色の数は初期値の8色のまま、「色を読み取る」を押します。
- 画像は長い辺240ピクセルに縮めてから、画素を色ごとにまとめます。
- 8色を選んでも、出てくるのは3色だけです。この絵には3色しかなく、ないものを作って8色にそろえることはしません。
- 1行に「#F6A04D rgb(246, 160, 77) 40%」のように、カラーコード、RGB、画像の中での割合が並びます。
| 色 | カラーコード | RGB | 画像の中の割合 |
|---|---|---|---|
| 夕焼けのオレンジ | #F6A04D | rgb(246, 160, 77) | 40% |
| 砂浜のベージュ | #F1D7A7 | rgb(241, 215, 167) | 35% |
| 海の青緑 | #1F6F8B | rgb(31, 111, 139) | 25% |
一覧は「umibe-色一覧.txt」、色見本は割合に合わせた幅の「umibe-パレット.png」で保存できます。ポスターの文字色を決めるなら「コントラスト比チェック」で確かめます。オレンジの上の白文字は2.09:1で、太字の大きな文字にも足りません。海の青緑の上の白文字なら5.67:1で、本文の基準（AA、4.5:1）を満たします。
使い方
- 画像を追加します。写真でも、気に入ったサイトのスクリーンショットでも、絵画でもかまいません。
- 取り出す色の数を選びます。5色なら配色、12色になると目録に近くなります。
- 一覧が出ます。各色にカラーコードが付いているので、そのまま貼り付けられます。
- 画像の上をクリックすると、その1ピクセルの正確な色が分かります。ブランドカラーを合わせるときはこちらです。
よくある質問
- 主要な色はどうやって選んでいますか。
- 画像のすべての画素を色ごとにまとめ、大きいかたまりから取り出しています。見栄えのする配色ではなく、その絵が実際に何でできているかが返ります。森の写真なら緑ばかりになりますが、実際に緑ばかりだからです。
- 選んだ色が思った色と少し違います。
- 1ピクセルを拾っているからで、JPEGの圧縮は個々の画素をわずかに動かします。輪郭の近くではなく、色の平らなところの中央を選んでください。JPEGよりPNGのほうが正確です。
- RGBやHSLでも取り出せますか。
- RGBは一覧に入っています。1行ごとにカラーコード、rgb()、画像の中での割合が「#F6A04D rgb(246, 160, 77) 40%」のように並びます。HSLやCSS変数にしたいときは、カラーコードを「カラーコード変換」に貼り付けてください。
- 12色を選んだのに、3色しか出てきません。
- 平らな色で描いたイラストやロゴには、もともとその数の色しかないからです。選んだ数は「最大で」この数という意味です。色の境目のにじみのように、全体の2％に満たず、ほかの2色の中間か近い色になっているものは、いちばん近い色に足して数えます。青と白の中の小さな赤い点のような、ほかの色の中間ではない色は小さくても残ります。写真のように色が多い画像なら、選んだ数まで出てきます。
- 取り出した色をそのまま文字色に使っても大丈夫ですか？
- 背景との明るさの差を確かめてから使ってください。画像の中で目立つ色どうしでも、文字にすると読みにくいことがあります。カラーコードを「コントラスト比チェック」に貼れば、本文や大きな文字の基準（AA・AAA）を満たすかが分かります。
- 画像はアップロードされますか。
- いいえ。ブラウザの中で画素を読んでいるだけで、どこにも送られません。