イラストの配色を数値で見直す — 出現割合・色差・コントラスト比の使い方

主調色と差し色を面積のバランスで読む

画像から代表色を抽出すると、各色のカードに「出現割合」が表示されます。これは抽出の対象になった画素のうち、その色が占める割合で、抽出範囲を絞っている場合は絞り込み後の画素が母数になります。面積の大きい色が主調色、数%にとどまる色が差し色です。

• 差し色のつもりで選んだ色の出現割合が主調色に近いときは、その色は絵の中で「差し色」として効いていません。面積を削るか、彩度や明度を主調色から離して主張を強めます。
• 抽出色数を増やすと、同じ主調色が複数の近似色に分かれて出現割合が下がることがあります。「統合の強さ」を上げて近い色をまとめ直すと、面積比が正しく合算されます。
• 抽出範囲を肌色などの色域に絞ると、出現割合は画像全体ではなくその色域内での比率になります。肌の中でベース・影・チークがどの面積比で塗られているかを見るときはこの絞り込みを使います。

色差(OKLab)で「似すぎている色」を見つける

このツールはOKLab上のユークリッド距離で、近い色どうしを比較します。0.02の注意表示や0.10の参考値は編集上の目安で、誰にとっても見分けられる／見分けられない境界ではありません。色面の大きさ、隣り合う色、表示条件、見る人によって差の感じ方は変わります。数値は見直す組み合わせを探すために使い、実際の絵の中でも比較してください。

• 印が付いた 2 色が、ベースと影のように役割の違う色であれば、明度か彩度のどちらかを離します。狙って似せた色であれば印は無視して構いません。
• どこまで離せば十分かの参考になるのが肌色の抽出範囲です。いちばん淡いハイライト寄りの肌(#FFE4D1 相当)といちばん濃い影の肌(#8D5A3C 相当)の色差は 0.42 で、「同系色の明暗の範囲」の上限にあたります。0.1 前後は別色として意図的に描き分けている距離感の目安になります。
• 「統合の強さ」スライダーは、この色差をしきい値として近似色を 1 色にまとめる機能です。しきい値の数値は画面にそのまま表示されるので、どこまで束ねたかを後から確認できます。

CLIP STUDIO PAINT にも L*a*b* を扱う欄があり、Ver.5.1 ではカラースライダーへの Lab 追加とパレット下部への Lab 値表示も入りました。ただし名前が似ているだけで、L*a*b*(CIELAB)と OKLab は別の色空間です。同じ色でも数値は一致せず、色差のしきい値もそのままでは通用しません。ここで挙げた 0.02 や 0.10 は OKLab の数値なので、CSP の L*a*b* 欄へ入れないでください。色を移すときは、このツールの HEX を sRGB の数値として転記します。CSP側のカラープロファイルや表示条件によって見え方は変わり得るため、同じ HEX でも同じ見え方になる保証はありません。

コントラスト比の目安 — 4.5:1 と 3:1 は WCAG の数値

コントラストは、前景色と特定の背景色をWCAGの相対輝度式 (明るい方+0.05) ÷ (暗い方+0.05) で比較した値です。ツールで実際に使う背景色を選び、その背景に対する集計を見ます。白・黒との比は別々の参考値です。一方の背景で基準を満たしても別の背景での可読性や、イラスト全体の見やすさを保証しません。

4.5:1 以上

WCAG AA が通常サイズの本文文字に求める最低コントラストです。ツールで選択した背景色と文字色の組み合わせで確認します。別の背景での可読性や、線画・イラスト全体の見やすさを保証する数値ではありません。

3:1 以上

WCAG AA の大きな文字に対する最低コントラストです。識別に必要なUI部品や図形にも、隣接色との3:1を求める別の基準があります。実際に隣り合う色を背景として選び直して確認してください。太い線や広い色面すべてに適用できる、絵の見やすさの保証ではありません。

選択した背景と白・黒の参考値

集計はツールで選択した背景色との比です。白・黒との比は別々の参考値なので、白紙や黒ベタに置く場合に使います。暗い背景でも純黒とは限りません。実際の背景色を選び、背景が複数ある場合はそれぞれ確認してください。

肌色だけ抽出して影色を整理する

「抽出範囲」を肌色にすると、クラスタリングに回す画素があらかじめ肌の色域(OKLCh で色相 30〜85 度、彩度 0.025〜0.13、明度 0.3〜0.97 の窓)に絞られます。鮮やかな橙や黄、極端に暗い・明るい画素は対象から外れるため、抽出色数をそのまま「肌の中の階調」に使えます。

1. 画像を読み込み、「抽出範囲」で肌色を選びます。抽出色数は 4〜6 程度から始めると、ベース・影・チークの主だった階調を拾いやすくなります。
2. 並び順を明度順にして、各カードの明度と出現割合を上から見ます。いちばん明るいハイライトからいちばん暗い影までの明度差が、そのキャラクターの肌の階調の幅です。
3. 影の色が濁っていないかは、彩度とコントラスト比を併せて見ます。影の部分だけ極端に彩度が落ちていると、その部分だけ無彩色に寄って浮いて見えることがあります。
4. 色が 1 色も出ないときは、その画像の肌が窓の外にあります。「カスタム色域」に切り替えて肌の一点を基準色に指定し、近さのしきい値を広げてください。

他の作品の配色を研究する手順

1. 研究したいカットを画像として読み込み、抽出色数を多め(8〜12)にして配色の骨格を粗く取り出します。
2. 出現割合の大きい色から順に主調色・準主調色・差し色に分類し、面積比を控えます。差し色は数%しかないことが多く、この少なさ自体が観察の対象になります。
3. 肌色や特定の色相に絞った抽出をやり直し、ベースと影の色差・明度差を主調色側の階調と比べます。影の彩度の落とし方に作品ごとの癖が出ます。
4. 書き出した CSV には HEX・出現割合・最短色差・コントラスト比が並ぶので、複数カットを並べて数値だけで配色の傾向を比較できます。
5. 明部から暗部への配色の流れを研究したいときは、同じ画像をグラデーションマップツールにも読み込みます。画像の読み込みだけでは現在のストップは変わりません。「再抽出」または「抽出色でストップを作り直す」で代表色を明度順のストップにし、色相の流れを確認します。この操作は編集済みストップを置き換えるため、残す場合は先にJSONを書き出してください。

決めた色を CLIP STUDIO PAINT の[カラーセット]にまとめる

数値で詰めた配色は、CLIP STUDIO PAINT 側にまとめておくと、作画のたびに拾い直さずに済みます。色見本を並べておく場所が[カラーセット]パレットです。

1. [ウィンドウ]メニューから[カラーセット]を選び、パレットを表示します。上部のドロップダウンが使用中のセットで、図では[標準カラーセット]が選ばれています。
2. パレット右上のレンチのアイコンから[カラーセットの編集]を開き、[新規設定を追加]でこの絵のためのセットを作ります。既存のセットを下敷きにするなら[現在の設定を複製]、名前を付け直すなら[設定名の変更]、要らないセットは[削除]です。
3. [OK]で閉じ、上部のドロップダウンを作ったセットに切り替えてから、主調色・差し色として決めた色をそのセットに溜めていきます。

よくある疑問

出典と確認条件

資料確認日: 2026-09-06。既存の掲載画面はCSP 5.0.4で、項目名はバージョンにより異なる場合があります。

• W3C: WCAGのコントラスト基準