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ใฎใจใ)ใ€‚่‰ฒใƒชใ‚นใƒˆใ‚’็น‹ใ„ใงใ„ใ‚‹ๅ ดๅˆใฏไฝฟใ‚ใ‚Œใพใ›ใ‚“

่‰ฒใฎ่ฃœ้–“
interpolation_space
Enum
Currentโ€”

ๆ—ขๅญ˜ใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใฎ่ฆ‹ใŸ็›ฎใฏๅพ“ๆฅไบ’ๆ›ใงไฟใกใพใ™ใ€‚็ฉบใƒป็‚Žใƒป้ญ”ๆณ•ใชใฉ่‰ฒๅ‘ณใฎๅค‰ๅŒ–ใ‚’ๆ•ดใˆใŸใ„ๆ™‚ใฏOKLCHใ‚’้ธใณใพใ™ใ€‚

  • ๅพ“ๆฅไบ’ๆ›Current
    ใ“ใฎใƒŽใƒผใƒ‰ใงๅพ“ๆฅไฝฟใฃใฆใ„ใŸ่‰ฒใฎๆททใœๆ–นใ‚’ไฟใกใพใ™
  • ็Ÿฅ่ฆš็š„(OKLCH)Oklch
    ่ฆ‹ใŸ็›ฎใฎๆ˜Žใ‚‹ใ•ใจ้ฎฎใ‚„ใ‹ใ•ใ‚’่ฃœ้–“ใ—ใ€้€šใ‚‹่‰ฒ็›ธใฎๆ–นๅ‘ใ‚‚้ธในใพใ™
่‰ฒ็›ธใฎ้€šใ‚Š้“
hue_path
Enum
Shortestโ€”

้€”ไธญใงใฉใฎ่‰ฒใ‚’้€šใ‚‹ใ‹ใ‚’้ธใณใพใ™ใ€‚ไธญ้–“่‰ฒใฎๅฐ่ฑกใŒ้•ใ†ๆ™‚ใฏๆ™‚่จˆๅ›žใ‚Š/ๅๆ™‚่จˆๅ›žใ‚Šใ‚’ๅˆ‡ใ‚Šๆ›ฟใˆใพใ™ใ€‚

  • ่ฟ‘ใ„ๆ–นShortest
    ่‰ฒ็›ธ็’ฐใฎ็Ÿญใ„ๅดใ‚’้€šใ‚Šใพใ™ใ€‚้€šๅธธใฏใ“ใ‚ŒใŒ่‡ช็„ถใงใ™
  • ๆ™‚่จˆๅ›žใ‚ŠClockwise
    ่‰ฒ็›ธๅ€คใŒๅข—ใˆใ‚‹ๆ–นๅ‘ใธ้€ฒใฟใ€ๅฟ…่ฆใชใ‚‰360ๅบฆใ‚’ใพใŸใŽใพใ™
  • ๅๆ™‚่จˆๅ›žใ‚ŠCounterClockwise
    ่‰ฒ็›ธๅ€คใŒๆธ›ใ‚‹ๆ–นๅ‘ใธ้€ฒใฟใ€ๅฟ…่ฆใชใ‚‰0ๅบฆใ‚’ใพใŸใŽใพใ™

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