カラーパレット作成ツール

このツールでできること

画像を読み込むと、知覚的な色空間 OKLab の上で代表色をまとめて抽出します。色ごとに、画面に占める面積の割合・いちばん近い色との色差・明度・白地と黒地でのコントラスト比が並び、近すぎる色にはその場で印が付きます。抽出条件は色数のほか、近似色をどこまで束ねるか、背景色を除くか、低彩度の色を無彩色にまとめるかで調整できます。色は手で差し替え・追加・並べ替えもできます。

作画のどの工程で使うか

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

使い方

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

入力項目の意味

抽出色数

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

統合の強さ

この値以下の OKLab 距離にある色を 1 色にまとめます。しきい値は画面に数値で出ます。0.02 が「並べてようやく違いが分かる」水準の目安です。

背景色を除外

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

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

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

最短色差

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

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

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

結果の読み方と CLIP STUDIO PAINT への持ち込み方

• 面積の帯は、その色が画像内で占める割合です。割合の大きい色が主調色、小さい色が差し色にあたります。
• 「近すぎる色あり」が多いパレットは、色数を減らすか統合の強さを上げると整理できます。逆に、意図して微妙な色差を使い分けているなら、そのままで構いません。
• CLIP STUDIO PAINT のカラーセットは CSV を直接読み込めないため、HEX を 1 色ずつカラーセットへ登録するか、書き出したスウォッチ PNG をキャンバスへ読み込んでスポイトで拾ってください。
• CSV には色ごとの HEX・RGB・画素数・面積比・最短色差・コントラスト比が入るので、表計算ソフトで配色を管理する用途にも使えます。

計算の根拠

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

精度と対象外のこと

抽出はあくまで画素の統計です。「絵として重要な色」ではなく「面積の大きい色」が優先されるため、小さな差し色は抽出色数を増やさないと拾われないことがあります。抽出前に長辺 160px へ縮小するため、1 画素だけの色や細い線の色は代表色に残りません。

• 色は sRGB として扱います。画像に埋め込まれた ICC プロファイルの解釈や、CMYK での見え方は考慮しません。印刷での色の転びは印刷プリフライトで確認してください。
• CSP のカラーセットファイルや Adobe のスウォッチ形式では書き出せません。
• 背景色の推定は外周の帯の最頻色によるもので、外周が絵で埋まっている画像では推定しません。

画像・入力データの扱い

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

よくある質問