クリスタ用グラデーションマップ作成ツール

このツールでできること

画像を開くと、画像から取り出した色と、今のグラデーションを当てたプレビューが表示されます。画像を開いただけでは、編集中のグラデーションは変わりません。画像の色で作り直したいときは、「再抽出」か「抽出色でストップを作り直す」を押します。

バーの上に並ぶ色の点を「ストップ」と呼びます。ストップの位置はドラッグや矢印キーで、色はHEX(#から始まる色番号)の欄で変えられます。作ったグラデーションはJSONで保存して、あとで続きから編集できます。

• クリスタ公式マニュアル: グラデーションマップの設定 — ノード・混色モード・輝度の補正。2026-09-06確認
• Adobe公式: カラー設定と変換方法 — 公式資料・2026-09-06確認

こんなときに使えます

• グレースケールで塗った絵に、あとからまとめて色を乗せたいとき
• 描き終わったイラストの色味を、別の雰囲気に変えた案を試したいとき
• 影・中間・ハイライトの色を数値で決めて、シリーズ全体で使い回したいとき

使い方

1. 画像を読み込み、取り出された色を確認します。その色でグラデーションを作るなら、「再抽出」か「抽出色でストップを作り直す」を押します。今のストップは置き換えられるので、残したいときは先にJSONで保存してください。
2. バーのハンドルをドラッグして、暗い色と明るい色の境目を調整します。矢印キーで1%、Shiftキーを押しながらだと10%ずつ動きます。
3. バーの空いている場所をクリックすると、その位置の色でストップが増えます。「ストップを追加」を押すと、ストップの間がいちばん空いている場所に追加されます。
4. 各行のHEX欄で色を、右の数値欄で位置(%)を細かく決めます。
5. プレビューを「左右分割」にして、スライダーを動かしながら、当てる前と後を見比べます。
6. JSON・CSS・ランプPNGを書き出すか、表示されているHEXと位置を、クリスタのグラデーションマップに入力します。

入力項目の意味

抽出色数

画像から取り出す色の数(2〜12)です。取り出した色は暗い順に並び、そのままストップの最初の配置になります。

抽出方法

迷ったら「バランス(K-means)」を選んでください。画像で多く使われている色を中心に取り出します。面積の小さい差し色も残したいときは、「アクセント重視(メディアンカット)」を試してください。

ストップ

グラデーションのバーの上で、色と位置を決める点です。0%が元の画像の暗い部分、100%が明るい部分に当たります。ストップとストップの間は、色が少しずつ変わるようにつながります。

位置

ストップを、バーの左端から何%の場所に置くかです。暗い色に置き換わる範囲を広げたいときは、暗い色のストップを右に動かします。

比較モード

「元画像」「適用後」「左右分割」の3つです。「左右分割」では、境目のスライダーを動かして、同じ場所の色を当てる前と後で見比べられます。

比較モードで何を見るか

• 「元画像」は当てる前、「適用後」はグラデーションを当てた結果です。「左右分割」は1枚の中に両方を並べるモードで、境目のスライダーを動かすと、同じ場所の色がどう変わったかを見比べられます。
• 暗い部分が真っ黒につぶれていないか、明るい部分が真っ白に飛んでいないか、途中の色が濁っていないかを確かめます。暗い部分の細かいところを見せたいなら左端の色を少し明るく、明るい部分なら右端の色を少し暗くします。
• 色合いの離れた2色をつなぐと、途中の色がくすんで見えることがあります。そのあたりにストップを足して調整しましょう。
• 透明な部分は、元の画像の透明度がそのまま残ります。切り抜いた素材に当てても、背景が出てくることはありません。
• プレビューは、長い辺を760pxに縮小した画像で計算しています。細かい階調の最終的な見え方は、クリスタで当てた結果で確かめてください。

クリスタの[グラデーションマップ]に入力する

[レイヤー]メニュー→[新規色調補正レイヤー]→[グラデーションマップ]を選ぶと、選んでいるレイヤーの上に、グラデーションマップの色調補正レイヤーが作られます(PRO/EXの機能)。[編集]メニュー→[色調補正]から直接かける方法と違って、あとから何度でも設定を変えられます。レイヤーパレットのアイコンをダブルクリック(ダブルタップ)すると、設定画面が開き直せます。

1. [グラデーションマップ]ダイアログの[カラーバー]の下に並ぶ点が[ノード]です。このツールのストップに当たります。ノードを選ぶと、右側で[位置]と[色]を設定できます。
2. 選んだノードの[位置]欄に、ストップの位置(%)を入れます。ドラッグでも動かせますが、数値を写すなら欄に直接入れるのが確実です。
3. 同じノードを選んだまま、[色]で[指定色]を選びます。色の表示部分をクリックして[色の設定]ダイアログを開き、[HEX]欄にこのツールのHEXを入れます。ノードの色は[メイン描画色]や[サブ描画色]からも指定できます。
4. ストップと同じ数のノードが必要です。[カラーバー]の下の何もないところをクリックするとノードが増えるので、同じ手順で位置と色を入れます。
5. JSONは、このツールで続きから編集するための保存ファイルなので、クリスタには読み込めません。クリスタには、位置とHEXを手で入力するか、ランプPNGを開いてスポイトで色を拾ってください。同じ設定でも見え方が違うことがあるので、クリスタでも確認しましょう。
6. クリスタの[混色モード]には[通常]・[知覚的]・[Photoshop互換]があります。まず[通常]で見比べてください。[輝度の補正]は[知覚的]のときだけ使えます。モードを合わせても、このツールと完全に同じ結果になるとは限りません。

グラデーションセットに登録して使い回す

• ダイアログの[グラデーションの追加]を押すと、[カラーバー]のグラデーションが、選んでいるグラデーションセットのいちばん下に追加されます。次からは[グラデーションリスト]でダブルクリックするだけで呼び出せます。
• リストの並びは[上へ]/[下へ]で変えられます。[グラデーションの置き換え]で上書き、[グラデーションの複製]で複製、[グラデーションの削除]で削除です。セットそのものは、[メニュー表示]から追加したり、素材として登録したりできます。
• 効き目が強すぎるときは、補正レイヤーで調整します。レイヤーパレットで[不透明度]を下げると元の色が透けて見え、[合成モード]を変えると、元の絵の陰影を残したまま色だけを乗せられます。
• 一部にだけ効かせたいときは、補正レイヤーに自動で付くレイヤーマスクを使います。マスクを選んで描いたり消したりすると、効かせる場所を調整できます。
• ランプPNGは、キャンバスに読み込んでスポイトで色を拾えます。JSONにはストップの位置と色、CSSの文字列が入っていますが、クリスタのグラデーションセットの形式ではないので、ファイルとして読み込むことはできません。

詳しい仕組み

グラデーションを当てたあとの色は、元の画像の画素ごとの明るさを、バーの上の位置に置き換えて決めます。明るさ(輝度)は「0.2126 × R + 0.7152 × G + 0.0722 × B」で計算し、0〜255の256段階に丸めます。そのうえで、あらかじめ作っておいた256段階の色の表から色を取り出します。

ストップとストップの間は、RGBの値をまっすぐ変化させてつなぎます。透明度は、元の画像の値をそのまま残します。ストップは常に位置の順に並べ直され、0〜100%の範囲に収められます。

色の取り出しは、画像を長い辺が160pxになるまで縮小してから行います。「バランス(K-means)」は、RGBの色の中から、多く使われている色のまとまりの中心を探す方法です。「アクセント重視(メディアンカット)」は、OKLabという色の表し方で、色の広がりが大きいところから順に真ん中で分けていく方法です。どちらも、取り出した色を暗い順に並べて、ストップの最初の配置にします。

確認できること・できないこと

2つの色の間は、RGBの数値が一定の割合で変わるようにつないでいます。見た目の色の変化が均等になるとは限りません。色合いの離れた色をつなぐと、途中がくすんで見えることがあるので、その位置に別のストップを足して調整してください。

• クリスタのグラデーションセットのファイル(.grdなど)としては書き出せません。位置とHEXを手で入力する形になります。
• クリスタのグラデーションマップの明るさの計算方法と、このツールの計算方法が完全に同じとは限りません。見え方が違うときは、ストップの位置で調整してください。
• プレビューは縮小した画像で計算しているので、細かい階調は元の大きさのときと少し違います。合成モードやレイヤーの不透明度も扱いません。

画像と入力データの扱い

画像はブラウザの中で処理します。編集したストップは端末に保存され、共有リンクにも含まれます。JSONを読み込むと、保存したストップが元に戻りますが、元の画像や色の取り出しの設定は含まれません。新しい画像を開いてもストップはそのままで、取り出した色の一覧とプレビューだけが変わります。ストップを置き換えたいときだけ、「再抽出」や「抽出色でストップを作り直す」を使ってください。