# What is HSB really?

Can any of my graphics designer friends explain HSB to me? I know it’s hue/saturation/brightness and I know what those three do (for the most part)…

I understand the algorithm of creating colors behind RGB, but what about HSB? The hue is just the colors radial position on the color wheel right? But what do saturation and brightness do? (I know one washes the color out (towards grey) and the other lightens or darkens the color…) but what do they do on the color wheel? Hue is radial position? I’m assuming brightness says whether the color location is closer to the center of the wheel or closer to the edge of the wheel, but then where does saturation come into play?

Also, is black even on the color wheel? Or is it actually like a color cylinder where the center travels from white (on the bottom face) to black (on the top face) and saturation chooses the `z-position` of the color location?

What I’m really trying to understand is, in different lighting would my skin (assuming it’s all almost the same color) always have about the same hue but different brightness, and on cameras with different exposure would my skin always have the same hue but different saturation?

Great question! To take the last part first, your skin hue would be the same no matter the brightness of incident light, provided the color of the light didn’t change. That’s why “Select skin tones” works in Photoshop CS6 and later. In broadcast video work, there’s a commonly-used tool called a vectorscope that will prove to you, if you ever test it out, that ALL human skin falls into the same very narrow hue range. There’s a demonstration of this in an excellent video tutorial by Andrew Devis on Creative Cow.

At base, all the different color models seem to me to fall into three categories: defining color as we describe it, as we generate it and as we perceive it.

HSB (also HSV) is a way to define color based on how we describe it (e.g., “dark reddish-brown”). This is the one that uses a color wheel — not the same as the artists’ color wheel, by the way. It came in when we got on-screen color, as a way to try to describe color more intuitively than with RGB numbers.

Hue is the quality that we might describe as the “basic color” of something. It’s given an angular value on the color wheel.

Saturation is the “purity” of the color, also known as “chromaticity,” especially in TV and video work. A yellow that can’t get any yellower is fully saturated. To desaturate a color you add grey (or you subtract color leaving grey behind — pick whichever description seems more intuitive).

Brightness is determined by how much black is mixed with the color. Colors are not all perceived as being the same brightness, even when they are at full saturation, so the term can be misleading. Brightness is best thought of as the z-axis of a color cylinder. Value is a better term, in my opinion, because it doesn’t imply perceived lightness or darkness. A fully saturated yellow at full brightness (S 100%, B 100%) is brighter to the eye than a blue at the same S and B settings.

Here’s the cylinder, filched from Wikipedia:

In the Photoshop default color picker, the rectangle is a “slice” of the color cylinder. The hue bar determines the slice you’re looking at, then in the rectangle right-left changes saturation, up-down changes brightness.

RGB, like CMYK, is a mechanical specification related to how devices generate it. The color you actually see for a given set of RGB values depends on the color gamut (sRGB, Adobe RGB) and the color profile and physical characteristics of the device it’s displayed on.

Lab is an attempt to define color based on how we actually perceive it, and is the only device-independent way that colors are currently defined. The Lab color model covers every perceptible color and a large range of “impossible” colors besides, such as “pure yellow black.” See Dan Margulis’ brain-cracking but brilliant book “Photoshop LAB Color” for an in-depth practical text on using Lab in Photoshop.