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

このツールでできること

画像を読み込むと、知覚的な色空間 OKLab の上で代表色をまとめて抽出します。色ごとに面積の割合・いちばん近い色との色差・明度・白地と黒地でのコントラスト比が並び、近すぎる色には印が付きます。抽出条件は色数のほか、近似色をどこまで束ねるか、背景色を除くか、低彩度の色を無彩色にまとめるかで調整できます。「抽出範囲」を肌色や特定の色相に絞れば、抽出色数をまるごとその色域の中の階調に使えます。

作画のどの工程で使うか

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

使い方

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

入力項目の意味

抽出色数

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

抽出方法

バランス(K-means)は面積の大きい色を中心にまとめ、絵全体の骨格をつかむのに向きます。アクセント重視(メディアンカット)は色空間を占有範囲で分割するため、面積が小さくても色相・明度の離れた差し色が残りやすくなります。

抽出範囲

クラスタリングに回す画素を、あらかじめ 1 つの色域へ絞ります。肌色はイラストの肌に合わせた窓で、淡いピンクオレンジのハイライトから濃い褐色の影までを拾い、鮮やかな橙や黄は外します。赤系〜ピンク系は OKLCh の色相帯で定義しています。

基準色と近さ

「カスタム色域」で使います。基準色との OKLab 色差がしきい値以下の画素だけを対象にします。0.02 が並べてようやく違いが分かる差、0.10 が別の色として認識される差、0.42 がいちばん淡い肌と濃い褐色の肌の差にあたります。

統合の強さ

この値以下の OKLab 距離にある色を 1 色にまとめます。しきい値は画面に数値で出ます。

背景色を除外

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

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

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

最短色差

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

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

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

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

• 面積の帯は、その色が画像に占める割合です。大きい色が主調色、数 % に留まる色が差し色にあたります。差し色のつもりの色の面積が主調色に近いときは、絵の中でその色が効いていません。
• 最短色差が 0.02 を下回る色は並べても見分けが付きません。役割の違う 2 色(ベースと影など)にこの印が付いたら、明度か彩度のどちらかを離します。意図した近似なら印は無視して構いません。
• コントラスト比は白地・黒地に置いたときの読みやすさです。線画や文字に使う色は 4.5:1 以上、太い線や広い面で見せる色は 3: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 として扱います。ICC プロファイルや CMYK での見え方は考慮しません。印刷での色の転びは印刷プリフライトで確認してください。
• 抽出範囲は色の値だけで判定するので、肌と木肌・茶髪のように色域が重なるものは区別できません。
• CSP のカラーセットファイルや Adobe のスウォッチ形式では書き出せません。
• 背景色の推定は外周の帯の最頻色によるものです。抽出範囲を絞ると外周も一緒に減るため、背景色が推定されなくなることがあります。

画像・入力データの扱い

画像の読み込みも抽出も指標の計算も、すべてブラウザ内で行います。画像や抽出したパレットを外部に送信することはありません。抽出条件と並び順の選択はブラウザの localStorage に保存されますが、読み込んだ画像は保存されず、ページを閉じると消えます。

CLIP STUDIO PAINT とはどんなソフトか

CLIP STUDIO PAINT(クリップスタジオペイント)は、株式会社セルシスが開発しているイラスト・マンガ・アニメーション制作用のペイントソフトです。汎用の画像編集ソフトとの違いは、ペン入れに向いた筆圧設定、コマ割りとフキダシ、トーン、3D 素材、パース定規といった、紙と印刷を前提にした制作機能が最初から入っている点にあります。Windows・macOS・iPad・iPhone・Android・Chromebook で動きます。

体験版と購入の選択肢

• 公式サイトで無料の体験版が配布されています。描き味と必要な機能を自分の環境で確かめてから判断できます。
• グレードは PRO と EX の 2 つで、複数ページのマンガ原稿を 1 つの作品としてまとめて扱う機能が要るかどうかが主な分かれ目です。
• 買い方は買い切りの一括払いと、月額・年額のプランがあります。使える端末の種類と台数はプランによって変わります。
• 価格・プランの構成・対応端末は改定されることがあるため、最新の条件は公式サイトで確認してください。

このツールと CLIP STUDIO PAINT の関係

このページのツールはブラウザだけで動くので、CLIP STUDIO PAINT を持っていなくても計算や書き出しはそのまま使えます。ただしここで得られるのは CLIP STUDIO PAINT へ持ち込むための材料で、抽出した色は、CLIP STUDIO PAINT のカラーセットに登録するか、書き出したスウォッチ PNG からスポイトで拾って使います。考え方の部分は他のペイントソフトにも流用できますが、数値と書き出しは CLIP STUDIO PAINT に合わせて作ってあります。