イラスト配色パレット抽出ツール

このツールでできること

画像から主な色を取り出し、どの色がどれくらい使われているかを表示します。よく似た色には印が付きます。取り出す色の数を変えたり、背景の色を除いたり、似た色をまとめたりできます。肌色や赤系など、特定の色だけを取り出すこともできます。

• W3C: WCAGのコントラスト基準 — 公式資料・2026-09-06確認

こんなときに使えます

• 既存のイラストや資料写真から、配色の骨格を数値として取り出すとき
• キャラクターや作品ごとの色を決めて、複数のカットで使い回すとき
• 肌のベース・影・チークを分けて取り出し、影の濁りや赤みの量を点検するとき
• 他の作品の肌の塗りを、色数と色差の面から研究するとき
• 選んだ色が線や文字として読めるかをコントラスト比で確かめ、似た色が増えすぎていないかを色差で点検するとき

使い方

1. 画像を読み込み、抽出色数を決めます。
2. 肌だけ・青系だけを見たいときは「抽出範囲」を選びます。一覧に無い色域は「カスタム色域」で基準色と近さを指定します。
3. 似た色ばかりが並ぶときは「統合の強さ」を上げます。しきい値の数値がその場に表示されます。
4. 背景が画面の大半を占める絵では「背景色を除外」を入れます。
5. くすんだ色を一系統にまとめたいときは「低彩度の色を無彩色にまとめる」を入れます。
6. パレットの各カードで、面積・最短色差・明度・白地と黒地のコントラスト比を確認します。
7. 並び順を選ぶか手動で整えたら、JSON・CSS・CSV・PNG のいずれかで書き出します。

入力項目の意味

抽出色数

取り出す代表色の数(2〜12)です。近似色の統合で減るため、実際に並ぶ色数は少なくなる場合があります。

抽出方法

「バランス(K-means)」は、画像で多く使われている色を中心に取り出します。全体の配色を知りたいときに向いています。「アクセント重視(メディアンカット)」は、小さな面積の差し色も残したいときに試してください。

抽出範囲

取り出す色を、肌色や赤系などに絞ります。「肌色」は淡いピンクやオレンジから褐色までを対象にし、鮮やかな橙や黄色は除きます。すべての肌色を正しく選べるわけではないので、結果を見ながら調整してください。

基準色と近さ

「カスタム色域」では、基準の色と、それにどれくらい近い色まで取り出すかを指定します。数値を大きくすると範囲が広がります。近さはOKLabという色の比較方法で計算しており、人による見分けやすさを保証する数値ではありません。

統合の強さ

似ている色を1色にまとめるための基準です。数値を大きくするほど、より違いのある色もまとめます。色の近さはOKLabという方法で計算します。

背景色を除外

外周から推定した背景色と近い色を対象から外します。外周が一様でない画像では背景を推定せず、この設定も効きません。

低彩度の色を無彩色にまとめる

彩度がしきい値を下回る色の色味を落として無彩色へ寄せます。明度差は残るので、白と黒が 1 色に潰れることはありません。

最短色差

そのカードの色と、パレット内で最も近い色との OKLab 距離です。0.02 を下回ると「近すぎる色あり」として印が付きます。

コントラスト比(白 / 黒)

白地に置いたときと黒地に置いたときの比です。4.5:1 以上で本文、3:1 以上で大きな文字や図形に使える目安です。

数値から主従と可読性を判断する

• 面積の帯は、その色が画像に占める割合です。大きい色が主調色、数 % に留まる色が差し色にあたります。差し色のつもりの色の面積が主調色に近いときは、絵の中でその色が効いていません。
• 最短色差0.02未満は近い色を見直す目安で、見分けられないという判定ではありません。実際の絵の中で役割を比較し、必要なら明度や彩度を離します。意図した近い階調なら残して構いません。
• コントラストの集計には、実際に使う背景色を選びます。白・黒との比は別々の参考値です。WCAGの通常文字4.5:1、大きな文字3:1は、その文字が置かれる背景との比であり、イラストの品質全体を判定する値ではありません。
• 抽出範囲を絞っているときは、パレットの上にどの色域から抽出したかが出ます。対象画素が 64px を下回るときは、その旨も併記されます。
• CSV には色ごとの HEX・RGB・画素数・面積比・最短色差・コントラスト比が入ります。

[カラーセット]パレットに登録する

CLIP STUDIO PAINT の[カラーセット]パレットは[ウィンドウ]メニュー→[カラーセット]で表示します。[色の追加]は「現在の選択色」をタイルにする仕組みなので、登録したい色を先に描画色にしておく必要があります。

1. パレットのメニューから[カラーセットの編集]を開き、[新規設定を追加]で空のセットを作ります。既定のセットを残したまま作品用のセットを増やせます。
2. [ウィンドウ]メニュー→[カラーサークル]でパレットを出し、メインカラーのアイコンをダブルタップして[色の設定]ダイアログを開きます。
3. ダイアログの[HEX]欄にこのツールの HEX を入力します。RGB 欄に R/G/B を入れても同じです。
4. カラーセットパレットの[色の追加]を押すと、いまの描画色がタイルとして追加されます。並べたい順に 1 色ずつ繰り返します。
5. 色を間違えたタイルは、正しい描画色にしてから[色の置き換え]で直せます。不要なタイルは[色の削除]で消せます。
6. 完成したセットはカラーセットファイル(拡張子 cls)か Adobe Photoshop スウォッチとして書き出せます。別の端末や次の作品へ持ち回せます。

スウォッチ PNG からスポイトで拾う

• 書き出したスウォッチ PNG をキャンバスに読み込み、[スポイト]ツールでタイルをタップすると、その位置の色が描画色になります。ペンや筆などを選んでいるときは[Alt]キーを押しながらクリックしても同じです。
• 拾った色をそのまま[色の追加]へ送れば、HEX を打ち直さずにセットが作れます。[カラーセット]パレットのメニューで[スポイト取得色の自動登録]を入れておけば、スポイトで取った色が自動で登録されます。
• 重ねた画像から色が拾えないときは、[ツール詳細]パレットで参照するレイヤーの設定を見直します。
• 書き出した CSS や JSON の HEX を使う場合も、入力先は同じ[色の設定]ダイアログの[HEX]欄です。カラーセットファイルとしては書き出せないため、CSV を直接読み込ませることはできません。

[色の設定]ダイアログには以前から L*a*b* の欄があり、Ver.5.1 ではカラースライダーへの Lab 追加と、カラーサークル・カラーセットのパレット下部への Lab 値表示も入りました。ただしこのツールが使っているのは L*a*b*(CIELAB)ではなく OKLab で、別の色空間です。同じ色でも数値は一致しないので、このツールが出す色差や明度の数値を CSP の L*a*b* 欄へそのまま入れないでください。色を渡すときは HEX を使えば、どちらの色空間を経由しても同じ色になります。

詳しい仕組み

抽出は長辺 160px へ縮小した画素に対して、OKLab 空間の K-means を 10 回反復して行います。知覚的にほぼ同じ白やベージュを別の色として残さないための物差しです。初期値は乱数ではなく「面積 × いちばん近い種からの距離の二乗」が最大の色を順に選ぶ決定的な方式なので、同じ画像なら毎回同じパレットになります。抽出範囲の判定はクラスタリングの前段で行い、画素を OKLCh に直して色相・彩度・明度の窓に入るかを見ます。近似色の統合は 2 グループ間の最大距離で判定する完全連結法です。最短距離で判定すると、近い色が数珠つなぎになってパレットが潰れるためです。コントラスト比は WCAG の相対輝度で計算します。

確認できること・できないこと

抽出はあくまで画素の統計で、「絵として重要な色」ではなく「面積の大きい色」が優先されます。小さな差し色は抽出色数を増やさないと拾われないことがあり、1 画素だけの色や細い線の色は縮小の段階で消えます。

• 色はsRGBとして扱います。印刷色はCSPで出力先ICCプロファイルを使ってソフトプルーフし、重要な色は校正刷りで確認します。本サイトの入稿前チェックのチャンネル近似は印刷色を予測しません。
• 抽出範囲は色の値だけで判定するので、肌と木肌・茶髪のように色域が重なるものは区別できません。
• CSP のカラーセットファイルや Adobe のスウォッチ形式では書き出せません。
• 背景色の推定は外周の帯の最頻色によるものです。抽出範囲を絞ると外周も一緒に減るため、背景色が推定されなくなることがあります。

画像・入力データの扱い

画像の解析はブラウザ内で行います。編集した色と抽出条件は端末内へ保存され、設定の共有リンクにも含まれます。JSONを書き出して本ツールへ読み込めば別端末で再開できます。元画像は保存やリンクに含まれないため、必要なら選び直してください。