Continuing my notes on The Book of Shaders — this chapter moves from shaping a single line into shaping actual color. I built two interactive tools while working through it, since “here’s a gradient, trust me” isn’t the same as seeing it change under your own hands.
colorA and colorB are the two colors being mixed. pct_r/g/b are functions of x (0 to 1) controlling how much of colorB replaces colorA in each channel.
Swizzling GLSL lets you access a color's channels by name — .r, .g, .b (or .x, .y, .z, or .s, .t, .p — three interchangeable naming sets for the same three slots). The interesting part is you can reorder or repeat them freely: color.bgr reverses red and blue, color.rrr turns any color into grayscale using only its red channel. This reordering trick is called swizzling.
mix(colorA, colorB, pct) Blends linearly between two colors. pct is usually a single float shared by all three channels — but it can also be a vec3, letting red, green, and blue each transition on their own separate curve instead of moving together. That one change is what turns a flat fade into something closer to an actual sunset: each channel arriving at its destination color at a different pace.
HSB (Hue, Saturation, Brightness) An alternative to RGB that's often easier to reason about — instead of three arbitrary channel values, you pick a direction around a color wheel (hue), how vivid it is (saturation), and how light or dark (brightness). Converting from HSB into RGB behind the scenes is where atan() shows up again: hue is fundamentally an angle, and atan(y, x) is how you compute an angle from coordinates.
The chapter's own exercises — "make a Turner sunset," "make a rainbow" — are open-ended art prompts with no single correct formula, which is a very different kind of practice than "match this exact curve." I found it useful to separate the two: freely experiment for the open prompts, but check my understanding of mix(), swizzling, and step()-vs-smoothstep() against something with an actual right answer.
RGB is what the hardware wants; HSB is what your brain wants when you're actually trying to design a color. Knowing how to move between the two — and knowing that mix() can operate per-channel — is most of what you need to build gradients, palettes, and color transitions in real shader work going forward.