What is HSB really?

Question

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?

Answer 1

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.

Answer 2

HSB is actually far easier to understand than RGB, so that's good.

I actually wrote a stupidly long post explaining HSB, so I'm quoting a bit from there, but interspersing to answer your question more specifically.

What is Hue? Think: "Color of the Rainbow"

Hue is a number between 0 and 360. It’s measured in degrees, like degrees of a circle (because whoa, spoiler, circles also have 360°). Remember the color wheel? Hue is just where you are on the color wheel.

What is Saturation? Think "Richness"

Saturation is a number between 0 and 100. So, no matter what hue you’ve picked, a saturation of 100% will be the richest possible version of that color and a saturation of 0% will be the gray version of that color (i.e. if the color is light, it’ll be a light gray; if the color is dark, it’ll be a dark gray).

Wanna see?

Saturation is pretty simple. I sometimes think about it as the amount of color injected into the gray. So 0% is a flat gray, but 100% is the most colorful color your monitor can make.

What is Brightness? Think of a lightbulb

Brightness is a number between 0 and 100. Like saturation, it’s sometimes written as a percentage. This one is fairly obvious as to what it means, but there’s a quick catch.

0% brightness is black, no matter the hue, no matter the saturation. 100% brightness is white only if saturation is also 0%. Otherwise, 100% brightness is just a… very bright color. Sound confusing? Think of it this way. Imagine Brightness is a lightbulb. 0% means the lightbulb is off (pitch black in the room). 100% means the light is on full strength. So maybe 100% brightness is a bright color, or, if the light is already white, then 100% brightness is pure white.

Is black on the color wheel? No, but it's on the color cylinder

A wheel is flat, so it's in 2D. The HSB "space" of colors has three dimensions (H, S, and B... surprise!), so it's a 3D shape. In our case, a cone will do just fine.

Black is the ENTIRE color wheel where brightness=0. So, no matter what hue you have, no matter what saturation you have, if brightness=0, you're looking at BLACK.

(Oddly, white works differently. White is only one point, NOT an entire color wheel. To get white, you have to have brightness=100 AND saturation=0. That being said, there's a color system incredibly similar to HSB, but the only difference is it makes white and black exact opposites. That system is called HSL – hue, saturation, lightness.)

How does my skin tone change with lighting?

This question is more thoroughly answered here, but basically, the hue, saturation, OR brightness of your skin could change with the lighting.

• HUE: If your normal skin hue is between 0° and 60°, then in bright (white) lighting, the hue of your skin will shift towards yellow (hue=60). In darker lighting, it will shift towards red (hue=0°).
• SATURATION: In brighter lighting, your skin will have lower saturation. In lower lighting, it will have higher saturation.
• BRIGHTNESS: In brighter lighting, your skin will have higher brightness. In lower lighting, your skin will have lower brightness. But... you already knew that, didn't you? ;)

Hope that helps!

You can find a few more details here