The grammar of colour: What hue, value and saturation actually mean?
Three words that every designer uses
There’s a particular kind of frustration that comes with learning a new discipline, where you encounter words that feel like they should be simple, words you’ve used casually for years, and then discover they. mean something far. more precise than you realised. Hue, value and saturation did that to me.
I thought I knew what these words meant, but working through a course on visual design recently, I found myself stopping at these three terms and realising I had been using them interchangeably and loosely, the way someone might use “logo” and “logotype” without knowing they’re different things.
Hue: the purest version of a colour
Hue is the most fundamental of the three. It is, in essence, another word for colour in its simplest form: red, orange, yellow, green, blue, violet. The fully saturated, undiluted versions of colours that we might see in a rainbow. Hue describes what colour something is, without saying anything about how light or dark it is, or how vivid or muted.
This is where the confusion usually starts. If someone asks you what hue your shirt is and you answer “sky blue” or “slate”, you haven’t actually answered the question. Sky blue and slate are both shades, descriptions that tell us something about lightness and saturation as well as colour. The hue underneath both of them is simply blue.
It’s worth noting too that black and white, though we experience them as colours, have no hue at all. They sit outside the spectrum.
Value: the light and dark of it
Value is the term artists use to describe how light or dark a colour appears, on a scale from white to black. Pink and burgundy, for instance, are different values of red, one light, one dark, even though they share the same underlying hue.
Here is the surprising part: individual hues lose and retain their value at very different rates. Yellow, for example, loses its recognisability quickly when black is added to it. Within a few steps, it becomes something closer to brown, almost unrecognisable as yellow. Add white to yellow, by contrast, and the changes are subtle and gradual.
There’s also something almost optical in how value works between colours placed side by side. Two colours of equal value (meaning they would both convert to the same shade of grey in a greyscale image) appear to vibrate when placed next to each other. Artists have used this deliberately to create a sense of movement or intensity. Painters working in certain traditions built entire compositions on this effect, using what some called “inaccurate” colour, as long as the values were precisely right.
For designers, value is the invisible scaffolding behind legibility. A page where text and background share the same value will be nearly unreadable, regardless of what colours are involved.
Saturation: the intensity underneath
Saturation refers to the intensity or vividness of a colour, how much of that pure hue is present. A highly saturated red is vivid, almost aggressive. As saturation decreases, the same red becomes more muted, softer, eventually fading towards a grey.
A colour can become less saturated in a couple of ways: by adding black, white, or grey to it, or by adding its complementary colour from the opposite side of the colour wheel. Interestingly, different hues respond to this process at different speeds. Blues desaturate quite quickly when their complement is introduced. Reds hold on to their redness for longer.
Saturation and value are closely linked, and the relationship between the two is one of the more nuanced things to learn in colour theory. A colour can be high in saturation but very dark in value, or very light in value but barely saturated at all. Understanding both independently, and then in relation to each other, is what gives a designer real control over a palette.
Why this vocabulary matters
I want to be honest about something. When I first formally encountered these terms, my instinct was to skim past them. They felt like the dry, definitional part of learning, the bit you get through before the interesting stuff begins.
However, hue, value, and saturation are not a glossary. They’re a way of breaking down colour into the dimensions you can actually work with. When a colour combination isn’t working in a design, the problem is almost always in one of these three places - a value clash that’s killing legibility, a saturation mismatch that makes one element dominate in a way you didn’t intend, two hues that are too close to each other to do any useful distinguishing work.
Having the language doesn’t make the decisions for you. It gives you somewhere to look when something isn’t right.
Next in this series: the seven colour schemes every designer should know and why the most useful thing about them is understanding why they work.
A note on this series: I’m writing these as I learn. Working through a visual design course with the Interaction Design Foundation and reflecting on what strikes me along the way. I’m the local lead for IxDF’s Seville chapter. Whether you’re completely new to design or you’ve been practising for years, I hope there’s something here worth sitting with.