close

DEV Community

張旭豐
張旭豐

Posted on

Why Your LED Color Transitions Look Fake

Your LED Color Transition Is Lying to You

The problem isn't your code. It's the space your colors live in.

You spent three hours tuning a color transition. Yellow to violet. You wrote the code, uploaded it, and watched your LED strip glow from yellow to white to violet.

Wait — white?

You didn't ask for white. But there it is, right in the middle, between yellow and violet. It doesn't belong there. But you cannot seem to get rid of it.

This is the color transition lie, and it is built into how most LED tutorials teach color mixing.

The Code That Looks Right But Feels Wrong

\c
uint8_t red = map(timeNow, timeStart, timeEnd, startRed, endRed);
uint8_t green = map(timeNow, timeStart, timeEnd, startGreen, endGreen);
uint8_t blue = map(timeNow, timeStart, timeEnd, startBlue, endBlue);
return strip.Color(red, green, blue);
\
\

This is RGB linear interpolation. You are moving through RGB space by lerping each channel independently.

RGB space has a property nobody tells you about: white is the geometric center of the RGB cube.

When you go from yellow (RGB: 255, 255, 0) to violet (RGB: 128, 0, 255), the midpoint of that line is white (RGB: 192, 128, 128). You did not write code that goes through white. You wrote code that goes through RGB space, and RGB space has a white-shaped hole in the middle.

When you see white flash through a color transition, your brain does not see a smooth gradient. It sees an interruption. White is a reset. It does not feel like moving from yellow to violet. It feels like the LEDs are resetting, then continuing.

The Color Space That Does Not Lie

The answer is HSV space instead of RGB space.

HSV (Hue, Saturation, Value) describes colors by position on a color wheel, not by channel mixing. In HSV space, yellow to violet is a short walk around the color wheel — you do not pass through white because white is not a position you walk through. It is an absence of color.

\c
// HSV approach: shortest path around the wheel
float startHue = map(timeNow, timeStart, timeEnd, startHue, endHue);
CHSV hsv;
hsv.hue = startHue;
hsv.saturation = 255;
hsv.value = 255;
return strip.ColorHSV(hsv);
\
\

Yellow to violet in HSV: no white. No reset. A clean spectral transition your brain reads as continuous motion.

The code is shorter. The result feels alive. That is the difference between navigating RGB space and navigating color space.

Top comments (0)