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

このツールでできること

画像から主な色を取り出し、それぞれの色がどれくらいの面積で使われているかを表示します。よく似た色どうしには印が付きます。

取り出す色の数を変えたり、背景の色を除いたり、似た色をまとめたりできます。肌色や赤系など、特定の色だけを取り出すこともできます。

• 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未満なのは、似すぎていないか見直す目安です。見分けられないという意味ではありません。絵の中でその2色の役割を比べて、必要なら明るさや鮮やかさを離します。わざと似せた色なら、そのままでかまいません。
• コントラストの集計には、実際に使う背景の色を選んでください。カードの「白 / 黒」は、それとは別の参考値です。WCAGの基準(ふつうの文字は4.5:1、大きな文字は3:1)は、文字とその背景との比で、イラスト全体の良し悪しを決めるものではありません。
• [抽出範囲]を絞っているときは、パレットの上に、どの範囲から取り出したかが表示されます。対象の画素が64pxに満たないときは、そのことも表示されます。
• CSVには、色ごとのHEX・RGB・画素数・面積の割合・最短色差・コントラスト比が入ります。

クリスタの[カラーセット]パレットに登録する

クリスタの[カラーセット]パレットは、[ウィンドウ]メニュー→[カラーセット]で表示します。[色の追加]は「今選んでいる描画色」を追加する機能なので、登録したい色を先に描画色にしておきます。

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という別の仕組みです。同じ色でも数値は一致しないので、このツールの色差や明度の数値を、クリスタのL*a*b*欄に入れないでください。色を移すときは、HEXを使えば同じ色になります。

詳しい仕組み

色の取り出しは、画像を長い辺が160pxになるまで縮小してから行います。似た色のまとまりを探すK-meansという方法を、OKLabという色の表し方の上で10回くり返します。OKLabを使うのは、見た目にほとんど同じ白やベージュを、別々の色として残さないためです。

探し始めの色は乱数では選ばず、「面積 × すでに選んだ色からの距離の2乗」がいちばん大きい色から順に決めます。そのため、同じ画像なら毎回同じパレットになります。

[抽出範囲]の判定は、色を取り出す前に行います。画素ごとに色相・鮮やかさ・明るさ(OKLCh)を求めて、範囲に入るかを見ます。似た色をまとめるときは、2つのグループの中でいちばん遠い色どうしの差で判断します。いちばん近い色どうしで判断すると、少しずつ違う色が次々につながって、パレットが1色にまとまってしまうからです。コントラスト比は、WCAGの計算方法で求めています。

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

色の取り出しは、画素を数えた結果です。「絵として大事な色」ではなく、「面積の大きい色」が優先されます。小さな差し色は、[抽出色数]を増やさないと拾われないことがあります。1画素だけの色や細い線の色は、縮小したときに消えてしまいます。

• 色はsRGBとして扱います。印刷したときの色は、クリスタで印刷所のカラープロファイルを使ってプレビューし、大事な色は校正刷りで確かめてください。このサイトの入稿前チェックも、印刷の色を予測するものではありません。
• [抽出範囲]は色の値だけで判断するので、肌と木の色、茶色い髪のように色が重なるものは区別できません。
• このツールからは、クリスタのカラーセットファイルやAdobeのスウォッチ形式では書き出せません。
• 背景の色は、画像のふちでいちばん多い色から推定します。[抽出範囲]を絞ると、ふちの画素も減るので、背景の色が推定されなくなることがあります。

画像と入力データの扱い

画像はブラウザの中で解析します。編集した色と取り出しの設定は端末に保存され、共有リンクにも含まれます。JSONを書き出してこのツールに読み込めば、別の端末でも続きから作業できます。元の画像は保存やリンクに含まれないので、必要なら選び直してください。