Hue, saturation, and brightness are three basic controls artists and designers use to describe and change color. Together they form the HSB color model, which is often easier to think about than mixing red, green, and blue light directly. Hue tells you the color family, saturation tells you how vivid or muted it is, and brightness tells you how light or dark it appears.
Understanding these controls helps you choose colors that communicate mood, contrast, and focus clearly.
In the HSB model, hue is usually shown as an angle around a color wheel from 0° to 360°. Saturation is often shown as a scale from gray to pure color, while brightness or value is shown as a scale from black to full lightness. Changing one setting can strongly affect how a color feels without changing the others.
For example, a bright low-saturation blue may look soft and misty, while a bright high-saturation blue may look bold and electric.
Key Facts
- Hue identifies the color family, such as red, yellow, green, blue, or violet.
- Hue is measured as an angle on a color wheel: red is often near 0° or 360°, green near 120°, and blue near 240°.
- Saturation measures color intensity: 0% saturation is gray, while 100% saturation is the most vivid version of the hue.
- Brightness or value measures lightness: 0% brightness is black, while 100% brightness is the brightest version of the selected hue and saturation.
- A typical HSB color can be written as HSB(h°, s%, b%), such as HSB(210°, 80%, 90%).
- Muted colors have lower saturation, while vivid colors have higher saturation.
Vocabulary
- Hue
- Hue is the basic color family of a color, such as red, orange, yellow, green, blue, or violet.
- Saturation
- Saturation is the strength or purity of a color, ranging from gray and muted to vivid and intense.
- Brightness
- Brightness is how much light a color appears to give off or reflect, ranging from black to very light.
- Value
- Value is the lightness or darkness of a color, often used in art to describe shading and contrast.
- Color wheel
- A color wheel is a circular diagram that arranges hues in order to show relationships between colors.
Common Mistakes to Avoid
- Confusing hue with brightness is wrong because hue names the color family, while brightness controls how light or dark that color appears.
- Calling every dull color dark is wrong because a color can be low in saturation but still high in brightness, such as a pale gray-blue.
- Assuming saturation changes the hue is wrong because lowering saturation makes a color more gray without moving it to a different color family.
- Using only vivid colors for contrast is wrong because value contrast, such as light against dark, often creates clearer visual separation than saturation alone.
Practice Questions
- 1 A digital color is HSB(30°, 90%, 80%). If only the saturation is reduced to 25%, what part of the color changes, and will it look more vivid or more muted?
- 2 Two swatches have the same hue of 210°. Swatch A is HSB(210°, 100%, 90%) and Swatch B is HSB(210°, 30%, 90%). Which swatch is more vivid, and by how many percentage points is its saturation higher?
- 3 An artist wants a calm background and a strong focal point using the same blue hue. Explain how the artist could change saturation and brightness to make the background recede and the focal point stand out.