Yotsuba Games
Back to Node List

Color Ramp

color_ramp

Animates a color. Pick the colors to travel through (Color A → Color B, or a connected list), then move Position (0..1) to get the color at that point. Connect a motion or keyframe node to Position for fades, glows and damage flashes.

Reviewed
Guide available
The node name and summary are available in English. Port, parameter, and article details are currently shown in Japanese.

Input Ports

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

Output Ports

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

Parameters

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

Overview

Use this node when you want a color to change over time: a damage flash from white to red, a treasure chest glinting, a background slowly shifting to sunset colors. Line up the colors you want inside this node, then move Position — that's all. Colors can't be keyframed directly, so this node is the entry point for color animation.

Usage tips

  • Typical wiring: attach an animation to Position with the 🎞️ button (motion or keyframe), then connect the color output to the pin of the color parameter you want to animate. Tip: pressing 🎞️ on that color parameter creates this whole setup automatically.
  • For just two colors, the Color A / Color B parameters are enough — no colors connection needed. To pass through three or more colors, line them up with palette_create and connect to colors.
  • Timing tricks such as "hold the original color, then snap to the target near the end" belong in the keyframe curve attached to Position, not in the color list.
  • Step mode plus a repeating motion (ping-pong etc.) switches through the colors in order — good for blinking lights and signals.

Common pitfalls

  • Muddy in-between colors: smooth mode usually blends cleanly, but opposite colors (red ⇔ green, etc.) can dull out in the middle. Add the color you want to pass through as an extra stop.
  • The last color never shows in step mode: the colors split Position's 0-1 range evenly. If Position never reaches 1.0, the last color is never picked — check the range of whatever moves Position.

Related nodes

  • motion / keyframe_clip — move Position (when and how fast the color changes)
  • palette_create / palette_get — prepare the colors
  • palette_cycle — rotate a whole palette (the classic technique, when you want to move the entire palette rather than one color)
  • color_adjust_oklch — fixed color correction without animation
Back to Node List
Color Ramp — PixPipeline Node Reference