ノード一覧に戻る

グラデーション

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のとき)。色リストを繋いでいる場合は使われません

色の補間
interpolation_space
Enum
Current

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

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

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

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

概要

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

使い方のポイント

  • 定番のつなぎ方: 「位置」に🎞️(アニメーションボタン)でモーションか キーフレームを付け、color 出力を動かしたい色パラメータのピンへつなぐ。 ※動かしたい色パラメータの🎞️を押せば、このノードごと自動で作られる
  • 2色だけなら 色A / 色B パラメータで完結する(色リストの接続は不要)。 3色以上を通したいときは palette_create などで色を並べて colors
  • 「途中までは元の色のまま→そこから一気に目標色へ」のようなタイミングの 作り込みは、色側ではなく**「位置」に付けたキーフレームのカーブ**で作る
  • ステップモード+繰り返すモーション(往復など)で、並べた色を順番に 切り替える点滅・信号のような表現になる
  • 以前のプロジェクトと同じ見た目は色の補間 = 従来互換。新しく空・炎・毒・魔法色を 作る場合は知覚的(OKLCH)を選び、色相の通り道で中間の雰囲気を決める
  • 白・灰・黒と有彩色をつなぐ時は、無彩色側が相手の色相を引き継ぐため、不自然に 虹を一周しない。透明度はどの補間でも一定の割合で変わる

よくある失敗

  • 中間の色が濁って見える: 従来互換を使っているならOKLCHを試す。OKLCHでも 意図と違う色を通るなら色相の通り道を変える。それでも足りない時は、経由したい色を 色リストへ1つ足す
  • ステップで最後の色が出ない: 並べた色は「位置」の0〜1を等分して 割り当てられる。位置が1.0まで届いていないと最後の色にならないので、 位置を動かしている側の振れ幅を確認する

関連ノード

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

互換性

  • v2で共通OKLCH補間と色相経路を追加しました。既定の従来互換はv1の OKLCH最短経路と同じ結果を保ちます。
ノード一覧に戻る
グラデーション — PixPipeline ノード解説