ノード一覧に戻る

グラデーション

gradient_generate

線形または放射グラデーション画像を生成します

確認済み
解説あり

入力ポート

名前説明
色A
color_a
Color
始点色を外から差し替えます
色B
color_b
Color
終点色を外から差し替えます

出力ポート

名前説明
画像
output
Image
生成したグラデーション画像です

パラメータ

名前既定値範囲説明・選択肢
方式
mode
Enum
Linear

どの形のグラデーションを作るか選びます

  • 線形Linear
    まっすぐな方向に沿って 2 色を補間します
  • 放射Radial
    中心点から外側へ向かって 2 色を補間します
width
Int
641–1024

出来上がる画像の幅です

高さ
height
Int
641–1024

出来上がる画像の高さです

色A
color_a
Color
[0,0,0,1]

グラデーションの始点色です

色B
color_b
Color
[1,1,1,1]

グラデーションの終点色です

角度
angle
Angle
0— / step 1

画像のピクセル座標上で指定する線形グラデーションの向きです

中心X
center_x
Float
0.50–1 / step 0.01

放射グラデーションの横方向中心位置です

中心Y
center_y
Float
0.50–1 / step 0.01

放射グラデーションの縦方向中心位置です

半径
radius
Float
10.01–2 / step 0.01

放射グラデーションの広がりです。1.0 は短辺の半分を表します

色の補間
interpolation_space
Enum
Current

既存プロジェクトの見た目は従来互換で保ちます。空・炎・魔法など色味の変化を整えたい時はOKLCHを選びます。

  • 従来互換Current
    このノードで従来使っていた色の混ぜ方を保ちます
  • 知覚的(OKLCH)Oklch
    見た目の明るさと鮮やかさを補間し、通る色相の方向も選べます
色相の通り道
hue_path
Enum
Shortest

途中でどの色を通るかを選びます。中間色の印象が違う時は時計回り/反時計回りを切り替えます。

  • 近い方Shortest
    色相環の短い側を通ります。通常はこれが自然です
  • 時計回りClockwise
    色相値が増える方向へ進み、必要なら360度をまたぎます
  • 反時計回りCounterClockwise
    色相値が減る方向へ進み、必要なら0度をまたぎます

概要

線形・放射の2色グラデーション画像を作るノードです。空や背景の下地のほか、 「上から下へ」「中心から外へ」の連続値マップとして、マスクの重み・ 高さマップ・ディザの入力などに広く使う基礎素材です。

使い方のポイント

  • ドット絵の空: Linear(縦) → dither(2〜4色パレット) がレトロ空の定番2ノード
  • 白黒で作れば重みマップとして万能: blend_by_mask のソフトマスク、 「下に行くほど暗く」の乗算素材、放射なら口径食(ビネット)
  • 放射+radius 小さめでスポットライトの下地。center_x/y は0〜1の相対座標
  • 多色グラデが欲しい場合は、これではなくグレーの明暗を作って gradient_map に パレットを渡す(色数管理もしやすい)
  • 既存素材と同じ色味なら色の補間 = 従来互換のまま。空・炎・魔法のように中間色の 印象が重要なら知覚的(OKLCH)へ切り替え、まず近い方を試す
  • OKLCHで中間が意図と違う色を通る時だけ時計回り/反時計回りを切り替える。 端の2色は変わらず、途中で通る色だけを選び直せる

よくある失敗

  • バンディング(縞)が気になる: 連続グラデをそのまま使えばなめらか。縞が出るのは 減色後で、それがドット絵的には正解のことも多い。滑らかさを保ちたいなら dither を使う
  • 斜めグラデの向きが直感と違う: angle は角度ノブで確認しながら回すのが早い
  • 色相の通り道を変えても同じに見える: 2色が近い、または白・灰・黒のような 無彩色同士では差が小さい。赤と緑など離れた有彩色で比較する

注意

  • mode = Linear では画像のピクセル座標上で angle の向きに沿って 2 色を補間します。 横長・縦長の画像でも、指定角度と画面上の向きが一致します。
  • mode = Radial では center_x / center_y を中心に、radius の広がりで 2 色を補間します。
  • radius = 1.0 は「短辺の半分」基準です。
  • color_acolor_b はパラメータでも入力ポートでも指定できます。入力ポートが優先されます。

互換性

  • v2ではLinearの角度をUV空間ではなくピクセル空間で評価します。横長・縦長画像の 斜めグラデーションは、v1から見た目が変わります。
  • v3で色補間を選べるようになりました。既定の従来互換はv2までのRGBA補間と同じです。

使用例

  1. 背景用の横グラデーションを作る
  2. 放射グラデーションをマスクや座標マップの土台にする
  3. Palette QuantizeDither の入力にしてレトロな色段階を作る

関連ノード

  • gradient_map — 多色ランプでの塗り分けはこちら
  • dither — レトロ空の相方
  • noise_generate — ムラのある連続値マップ
  • blend — 明暗グラデの重ね掛け(Multiplyモード)
ノード一覧に戻る
グラデーション — PixPipeline ノード解説