画像から配色抽出
写真から代表色を最大12色抽出し、HEX・RGB・HSLでコピーできます。アップロード不要、ブラウザ内で処理します。
ツールを準備しています。
ユーザーの評価
まだレビューはありません。このツールを使ったことがあれば、最初のレビューを書いてください。
画像から配色抽出の詳しい使い方ガイド
使い方と例を確認し、知りたいことはトピックから探せます。
はじめに確認すること
- 対応形式
- JPG・PNG・WebPなど、ブラウザが開ける画像を1枚、25MBまで。
- 色の数
- 2個から12個まで。写真の色の種類が少ない場合は、ある分だけ表示されます。
- 色の抽出方式
- メディアンカット。色が広く散らばった軸で、繰り返し分けます。
- 割合の表示
- 各色が占めるピクセルの割合も一緒に表示します。
- 地点の色の読み取り
- 画像を押すと、その地点の色を別に読み取ります。
- 書き出し
- HEXの一覧・CSS変数・JSONから選びます。
- 対象外
- ほとんど透明なピクセルは、代表色から除きます。
- 処理する場所
- 写真をサーバーに送らず、このブラウザの中だけで読み取ります。
画像から配色抽出の使い方
写真を1枚入れてください
ドラッグ&ドロップするか、押して選ぶと、すぐに代表色を抽出します。色を数えるときは長辺を220pxに縮小して見るので、大きな写真でもほとんど待つことがなく、縮小しても代表色はほとんど変わりません。
抽出する色の数を決めてください
初期設定は6個です。全体の雰囲気だけを見るなら3〜4個、配色を細かく分けるなら8個以上に上げてみてください。数を変えると、すぐに再計算します。
好きな地点の色を別に読み取ってください
代表色にない色が必要なときは、プレビュー画像のその部分を押してください。画面に見えているサイズではなく、元の縦横比で座標を換算して読み取るので、小さく見て押しても正確な色が出ます。
コードをコピーするか、書き出してください
色ごとにHEXをすぐにコピーでき、下でHEXの一覧・CSS変数・JSONのいずれかを選んで、全体をコピーしたりファイルとして保存したりできます。ほかの形式が必要なときは、カラーコード変換に続けてお使いください。
こんな作業に使えます
どの色がどれだけ使われているかまで見ます
色を1つずつ数える代わりに、似た色をまとめて代表色を決めます。色が最も広く散らばっている方向に分け続ける「メディアンカット」という方式なので、写真全体の雰囲気を表す色が残ります。各色が画面で占める割合も一緒に表示するので、どの色が主役の色で、どの色がアクセントかがすぐに分かります。ほとんど透明な部分は目に見えないため、数えません。
全体の色と、1点の色の両方を扱います
代表色の一覧とは別に、写真の上を押すと、その地点の色を正確に読み取ります。ロゴの特定の部分や、服1着の色のように、狭い領域が必要なときに使ってください。抽出した色は、HEXの一覧・CSS変数・JSONから選んで書き出せるので、コードにそのまま貼り付けられます。
例で結果を確かめる
夕焼けの写真から5色を抽出する
オレンジ色の空の写真 · 色の数 5#F2A65A 42.3%
#D9643A 26.1%
#3C4A6B 18.7%
#1B2036 9.4%
#F7E3C6 3.5%透明な部分があるロゴ画像
背景が透明なPNGのロゴロゴに実際に使われている色だけが表示されます。代表色と地点の色は用途が違います
表を左右にスクロールすると続きが見られます。
| 区分 | 何が得られるか | 使う場面 |
|---|---|---|
| 代表色の一覧 | 写真全体で広く使われている色と割合 | 雰囲気に合った配色を作るとき |
| 押した地点の色 | その1点の正確な色 | ロゴや特定の部分の色を合わせるとき |
| カラーコード変換 | すでに知っているコードの別の表記 | 抽出したコードを別の形式に変えるとき |
結果が思ったとおりにならないとき
似た色ばかり複数出ます
写真に同じ系統の色が広く広がっている場合です。色の数を3〜4個に減らすと、系統ごとにまとまって表示されます。
欲しい色が一覧にありません
狭い領域の色は割合が低く、代表色に入りません。プレビューのその部分を直接押して読み取ってください。
代表色が見つからなかったと表示されます
画像全体が透明の場合に表示されます。見えるピクセルがなければ、数える色もないためです。
画像を読み取れないと表示されます
ブラウザが開けない形式です。HEICなら、HEIC JPG変換で変えてから入れてください。
知っておきたい用語
- HEX
- #28613Eのように、色を6桁で書く方式です。ウェブで最も広く使われています。
- HSL
- 色相・彩度・明度で色を書く方式です。明るさだけを少し変えたいときに便利です。
- メディアンカット
- 色が広く散らばった方向で、繰り返し半分に分けて代表色を決める方法です。
- 主役の色
- 画面で最も広く使われている色です。割合が最も高い色が当てはまります。
画像から配色抽出のよくある質問
色はいくつまで出ますか?
2個から12個まで選べます。ただし、写真にある色の種類が指定した数より少ない場合は、ある分だけ表示されます。
印刷用の色に変換してくれますか?
変換しません。画面の色(HEX・RGB・HSL)だけを扱います。CMYKやPANTONEの特色は、印刷所の色管理の基準に従う必要があり、ここで変換すると実際の印刷物と異なる場合があります。
大きな写真でも使えますか?
使えます。色を数えるときは長辺を220pxに縮小して見るので、大きな写真もすぐに終わり、縮小しても代表色はほとんど変わりません。
同じ写真なら、いつも同じ色が出ますか?
出ます。ランダムに選ぶのではなく、決まった方法で分けるので、結果は毎回同じです。
色の割合をすべて足すと100%ですか?
はい。見えるピクセルだけを基準にするので、代表色の割合の合計が全体になります。
複数枚を一度に入れられますか?
今は1枚ずつ扱います。写真ごとに代表色が異なるため、1枚ずつ確認するほうが正確です。