Shaders for Games (GLSL) Lesson 17 of 20

Color by hue (HSB)

Think in hue, saturation and brightness — the easy way to pick and cycle colors.

Setting colors as raw red/green/blue is fine for one fixed color, but awful for "give me the next color around the rainbow." For that, artists think in HSB: Hue (which color, all the way around a wheel from 0 to 1), Saturation (how vivid — 0 grey to 1 pure), and Brightness (how light). A tiny helper converts HSB to the RGB the screen needs.

The magic: sweep the hue from 0 to 1 and you walk the entire rainbow. Feed a coordinate into the hue and you get a smooth spectrum across the screen — the basis of color wheels, rainbows, and hue-cycling effects.

Your turn: make a horizontal rainbow. The hsb2rgb() helper is provided — set the hue from st.x, at full saturation and brightness.

Your turn

Make a horizontal rainbow.

Call hsb2rgb(vec3(st.x, 1.0, 1.0)) so the hue sweeps left to right at full saturation and brightness.

Tip Add u_time to the hue — hsb2rgb(vec3(st.x + u_time * 0.1, 1.0, 1.0)) — and the whole rainbow scrolls. Hue-cycling is a one-line party trick.

▶ Cycle the hue Drive the hue with st.x and u_time to make a scrolling spectrum.

← Previous Next lesson →