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

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

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

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

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

色の近さは、知覚的に均等な色空間 OKLab 上のユークリッド距離(色差)で判定します。RGB の数値差は暗部と明部で見た目の差とのずれが大きくなりますが、OKLab の距離はどの明るさでもおおむね見た目の近さに比例します。目安は、0.02 で「並べてようやく違いが分かる」差、0.10 で「別の色として認識される」差です。各カードにはパレット内で最も近い色との色差(最短色差)が表示され、0.02 を下回ると「近すぎる色あり」の印が付きます。

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

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

各カードの「コントラスト比(白 / 黒)」は、その色を白地(#FFFFFF)に置いた場合と黒地(#000000)に置いた場合、それぞれとの比です。計算式は WCAG(Web Content Accessibility Guidelines、Web コンテンツのアクセシビリティ基準)が定義する相対輝度から求める (明るい方の輝度 + 0.05) ÷ (暗い方の輝度 + 0.05) で、値は 1(同じ明るさ)から 21(白と黒)の範囲に収まります。4.5:1 と 3:1 という目安も、このツール独自の基準ではなく WCAG のコントラスト達成基準にある数値です。

4.5:1 以上

WCAG が通常サイズの文字に求めるコントラストの最低基準です。線画や小さな文字に使う色は、この基準を満たしていれば白地・黒地どちらでも判読性が落ちにくいと判断できます。

3:1 以上

大きな文字や、アイコン・図形の輪郭のように「文字ではないが意味を持つ要素」に対する WCAG の基準です。太い線や広い面で見せる色は、4.5: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. 明部から暗部への配色の流れそのものを研究したいときは、同じ画像をグラデーションマップツールにも読み込みます。抽出された代表色が明度順のストップとして並ぶため、暗くなるにつれて色相がどちらへ転んでいるかを 1 本のランプとして確認できます。

よくある疑問