If gradients were the first time color became a relationship, HSB is where color starts behaving like a coordinate system.
This is lesson 9 in the series, and it sits right after gradients — not as an upgrade, but as a shift in thinking.
Because once you’ve seen color as a blend between two values, the next question naturally appears:
Gradients, Distance, and Why Shaders Start With a Line
what if color itself was a space you could move through?
The examples here come from The Book of Shaders, and the code looks heavier than it feels. But that’s often the point — the complexity is mostly historical baggage. What matters is the idea underneath.
And the idea is simple:
RGB describes color.
HSB describes behavior.
We start with the familiar setup:
uniform vec2 u_resolution;
uniform float u_time;
Again, resolution defines space. Nothing new there.
But now we stop thinking in “left and right colors” and start thinking in dimensions of color.
RGB vs HSB — the quiet difference
RGB is additive. You decide how much red, green, and blue light you mix.
HSB (Hue, Saturation, Brightness) is positional. You move through a circular spectrum (Hue), control how pure it is (Saturation), and how bright it feels (Brightness).
That difference changes everything.
Not in syntax — but in intuition.
The conversion layer
The shader begins with two functions:
vec3 rgb2hsb(in vec3 c) { ... }
vec3 hsb2rgb(in vec3 c) { ... }
At first glance, they look like technical noise. Long math, constants, mixing, steps, clamps.
But conceptually, they’re just translators.
They let you move between two ways of thinking:
- RGB: “how much red, green, blue?”
- HSB: “what hue, how strong, how bright?”
You don’t need to memorize them. In practice, you rarely write them yourself anymore.
What matters is what they unlock.
The real idea happens here
vec2 st = gl_FragCoord.xy / u_resolution;
vec3 color = vec3(0.0);
We normalize space again — just like in gradients.
But now space is not only used for mixing two colors.
It becomes color itself.
Mapping space into color
color = hsb2rgb(vec3(st.x, 1.0, st.y));
This single line carries the entire lesson.
st.xbecomes Hue1.0is Saturationst.ybecomes Brightness
So instead of blending between two fixed colors, we are now walking through a full color field.
Left to right is hue shifting through the spectrum.
Bottom to top is brightness rising and falling.
There are no endpoints anymore. No A and B.
Only position.
What changes compared to gradients
In the previous lesson, gradients were about transition:
colorA → mix → colorB
A controlled interpolation between two states.
HSB removes the “two states” entirely.
Now color is not something you interpolate — it’s something you navigate.
That shift is subtle, but it changes how you build everything afterward:
- Noise stops being distortion and becomes variation in hue
- Shapes stop being geometry and become masks over color space
- Animation stops being movement and becomes movement through parameters
Why this matters less than it sounds, and more than it looks like
You could argue none of this is necessary anymore.
AI can generate gradients. Tools can simulate HSB wheels. Engines abstract all of it away.
But that misses the point.
This isn’t about writing shaders faster.
It’s about noticing that color isn’t fixed.
It responds to space, to mapping, to interpretation.
And once you see that, even simple visuals stop being “design choices” and start feeling like systems you can step inside.
This is lesson 9.
After gradients, this is where color stops being a transition and becomes a field.
Next comes something different.
In the following part of the series, I’ll combine the eight ideas we’ve touched so far — not as a summary, but as a working middle ground. A space where they stop being separate tricks and start behaving like one system.
All images and references are taken from “The Book of Shaders”, alongside the original GLSL code used in this lesson.
Posted Using INLEO
