画像から代表色を抜き出してグラデーションのランプを作り、その場で元画像に当てた結果を見比べながら整えます。作ったランプは CLIP STUDIO PAINT のグラデーションマップへ写して使えます。
このツールでできること
画像を読み込むと代表色が抽出され、明度順に並んだストップとしてランプ上に置かれます。ストップはドラッグでも矢印キーでも動かせ、色は HEX 欄かカラーピッカーで差し替えられます。ランプを変えるたびにプレビューが更新されるので、元画像・適用後・左右分割を切り替えながら「色がどれだけ動いたか」を確認できます。結果は JSON・CSS・ランプ PNG として書き出せます。
作画のどの工程で使うか
- グレースケールで塗った絵に、後から一括で色を乗せる下地を作るとき
- 既存のイラストの配色を、別の色調へ寄せた案を試すとき
- 影・中間・ハイライトの色を数値として決めて、シリーズを通して使い回すとき
使い方
- 画像を読み込みます。抽出色数を変えたら「再抽出」でやり直せます。
- ランプのハンドルをドラッグして、暗い側と明るい側の色の分かれ目を調整します。矢印キーで 1%、Shift と一緒に押すと 10% ずつ動きます。
- ランプの空いている場所をクリックすると、その位置に見えている色でストップが追加されます。ヘッダーの「ストップを追加」でも、間隔が最も広い場所に追加できます。
- 各行の HEX 欄で色を、右の数値欄で位置(%)を細かく指定します。
- プレビューの表示を 左右分割 にし、スライダーを動かして適用前後を比べます。
- JSON・CSS・ランプ PNG を書き出すか、表示されている HEX と位置を CSP のグラデーションマップへ写します。
入力項目の意味
- 抽出色数
- 画像から取り出す代表色の数(2〜12)です。取り出した色は明度順に並べられ、そのままストップの初期配置になります。
- ストップ
- ランプ上の色の基準点です。位置は 0% が最も暗い側、100% が最も明るい側に対応します。ストップとストップの間は直線的に補間されます。
- 位置
- ストップの左からの割合(%)です。元画像の輝度がこの位置に読み替えられるので、暗部を広く取りたければ暗い色のストップを右へ寄せます。
- 比較モード
- 元画像・適用後・左右分割の 3 種類です。左右分割では境界のスライダーを動かして、同じ場所での適用前後を直接比べられます。
結果の読み方と CLIP STUDIO PAINT への持ち込み方
- CLIP STUDIO PAINT では、グラデーションマップの補正レイヤーを作り、ノードの位置とカラーをここで表示されている位置(%)と HEX に合わせます。ストップの数と順番を同じにすれば、同じ変換になります。
- ランプ PNG はキャンバスに読み込んでスポイトで色を拾えます。JSON にはストップの位置・色と CSS 文字列が入りますが、CSP のグラデーションセットの形式ではありません。
- 透明部分は元画像の透明度がそのまま残ります。切り抜き素材に当てても背景が復活することはありません。
- プレビューは長辺 760px に縮小した画像で行うため、原寸の書き出しではありません。CSP 側で当てた結果が最終的な絵になります。
計算の根拠
適用後の色は、元画像の各画素の輝度をランプ上の位置に読み替えて決まります。輝度は 0.2126 × R + 0.7152 × G + 0.0722 × B で、これを 0〜255 の 256 段へ量子化し、あらかじめ作っておいた 256 段ぶんの参照表を引いて色を得ます。ストップ間の補間は RGB 値の直線補間で、透明度は元画像の値をそのまま残します。ストップは常に位置の昇順に並べ替えられ、0〜100% の範囲へ丸められます。代表色の抽出は、長辺 160px へ縮小した画素に対する RGB 空間の K-means で行い、明度順に並べたものをストップの初期値にします。
精度と対象外のこと
色の補間は sRGB の値をそのまま直線で結ぶ方式で、OKLab のような知覚的に等歩度な補間ではありません。離れた色相どうしを結ぶと、中間で彩度が落ちて濁ることがあります。気になる場合は、間に中間色のストップを足して制御してください。
- CLIP STUDIO PAINT のグラデーションセット(.grd などのファイル)としては書き出せません。位置と HEX を手で写す形になります。
- CSP のグラデーションマップが内部で使う明度の求め方と、ここで使う輝度式が完全に一致する保証はありません。見え方が違う場合はストップの位置で調整してください。
- プレビューは縮小画像に対する変換なので、細部の階調は原寸と多少異なります。合成モードやレイヤーの不透明度も扱いません。
画像・入力データの扱い
画像の読み込み、代表色の抽出、変換のすべてをブラウザ内で行い、画像や作ったランプを外部に送信することはありません。抽出色数と比較モードの選択はブラウザの localStorage に保存されますが、読み込んだ画像は保存されず、ページを閉じると消えます。
よくある質問
作ったグラデーションを CSP に直接読み込めますか?
ファイルとしての読み込みには対応していません。CSP のグラデーションマップで、ここに表示されている位置(%)と HEX を同じ順番で入力してください。ストップ数が同じなら同じ変換になります。
ストップは何個まで置けますか?
上限はありませんが、下限は 2 個です。ハンドルが重なると掴み分けられなくなるため、既にストップがある位置のすぐ近くには追加されません。
抽出色を変えたら手で直したストップが消えました。
「再抽出」と「抽出色でストップを作り直す」は、現在のストップを抽出結果で置き換える操作です。手で整えた状態を残したい場合は、先に JSON か CSS で書き出しておいてください。
グレースケール以外の画像に当ててもよいですか?
当てられます。色の付いた画像でも輝度だけを見て変換するため、元の色相は結果に残りません。元の色を活かしたい場合は、CSP 側で合成モードや不透明度を使って重ねてください。