ノード一覧に戻る

グラデーション

color_ramp

色をアニメーションさせたいときに使うノードです。使いたい色(色A→色B、または色リスト)を決めておき、「位置」(0〜1)を動かすと、その位置の色が出てきます。位置にモーションやキーフレームを繋ぐと、フェード・発光・ダメージ点滅のような色の変化が作れます

確認済み
解説あり

入力ポート

名前説明
色リスト
colors
List<Color>
使いたい色を順番に並べたリストです(パレットもそのまま繋げます)。3色以上のグラデーションにしたいときに。繋ぐと下の色A・色Bの代わりにこちらが使われます

出力ポート

名前説明
color
Color
いまの位置の色です。動かしたい色パラメータのピンに繋ぎます

パラメータ

名前既定値範囲説明・選択肢
位置
t
Float
00–1 / step 0.01

色のどのあたりを出すかです。0で最初の色、1で最後の色になります。ここにアニメーション(🎞️ボタンやモーション/キーフレームのノード)を付けると、時間とともに色が変わります

つなぎ方
mode
Enum
Smooth

色から次の色への変わり方です

  • なめらかSmooth
    間の色を自動で作りながら、じわっと変化します。フェードや発光の明滅に
  • ステップStep
    間の色を作らず、並べた色をパッと切り替えます。点滅・信号・パレットの色送りに
色A
color_a
Color
[1,1,1,1]

始まりの色です(位置が0のとき)。色リストを繋いでいる場合は使われません

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

終わりの色です(位置が1のとき)。色リストを繋いでいる場合は使われません

概要

「色を時間で変化させたい」時に使うノードです。ダメージで白→赤に点滅する、 宝箱がキラッと光る、夕焼けで背景色がゆっくり変わる——そういう表現を、 使いたい色をこのノードに並べておき、「位置」を動かすだけで作れます。 色そのものにキーを打つ仕組みは無いので、色のアニメはこのノードが入口です。

使い方のポイント

  • 定番のつなぎ方: 「位置」に🎞️(アニメーションボタン)でモーションか キーフレームを付け、color 出力を動かしたい色パラメータのピンへつなぐ。 ※動かしたい色パラメータの🎞️を押せば、このノードごと自動で作られる
  • 2色だけなら 色A / 色B パラメータで完結する(色リストの接続は不要)。 3色以上を通したいときは palette_create などで色を並べて colors
  • 「途中までは元の色のまま→そこから一気に目標色へ」のようなタイミングの 作り込みは、色側ではなく**「位置」に付けたキーフレームのカーブ**で作る
  • ステップモード+繰り返すモーション(往復など)で、並べた色を順番に 切り替える点滅・信号のような表現になる

よくある失敗

  • 中間の色が濁って見える: なめらかモードの中間色は基本きれいに つながるが、正反対の色同士(赤⇔緑など)は間がくすむことがある。 間に経由したい色を1つ足すと思った通りの変化になる
  • ステップで最後の色が出ない: 並べた色は「位置」の0〜1を等分して 割り当てられる。位置が1.0まで届いていないと最後の色にならないので、 位置を動かしている側の振れ幅を確認する

関連ノード

  • motion / keyframe_clip — 「位置」を動かす(いつ・どんな速さで色が変わるか)
  • palette_create / palette_get — 通したい色の準備
  • palette_cycle — 画像全体のパレットを回す古典技法(1色ではなくパレット丸ごと動かしたい場合)
  • color_adjust_oklch — アニメではなく固定の色補正
ノード一覧に戻る
グラデーション — PixPipeline ノード解説